css 滑動門樣式我想應該是個陳穀子爛芝麻的問題了，我之前一直使用的兩張圖片的方式進行處理的，後來偷懶，用一些瀏覽器的私有屬性進行的直接圓角的方式，前者需要切圖比較麻煩，後者通不過 W3C 驗證。思索了一下，找到了一個只用一張圖片實現的 css 圓角滑動門的方法。僅供存檔以及學習筆記，高手可以繞行了，感興趣的請繼續閱讀下去。
因為 IE6 不支持 a 之外的 Hover 偽類，所以我們需要插入一個空標籤來解決 IE6 下的 Hover 問題。請先看下面這段html
<ul class="nav"> <li><a href="#" title="標題" class="current"><span></span>標題</a></li> <li><a href="#" title="還是標題"><span></span>還是標題</a></li> <li><a href="#" title="我是中文標題"><span></span>我是中文標題</a></li> <li><a href="#" title="人家是個女標題"><span></span>人家是個女標題</a></li> <li><a href="#" title="人家是個苗條的美女標題"><span></span>人家是個苗條的美女標題</a></li> </ul> |
注意看，就是在 a 標籤裡面 插入了一個 span 標籤。
然後是 css 部分,因為是滑動門，所以是自適應寬度，任何一個標籤都不要定義寬度
<style type="text/css"> ul.nav{list-style: none;clear: left;float: left;border-bottom:2px solid #ed6d00;margin: 10px 0;padding: 0px;} ul.nav li{float:left;line-height:25px;} ul.nav li a{float: left;font-size:12px;color: #000;text-decoration: none;padding-right:20px;margin-right: 8px;} ul.nav li a span{float: left;display: block;height: 25px;padding-right: 20px;} /* 這裡的padding-right是關鍵，空出20像素的右間距來顯示出背景 */ ul.nav li a.current {background: url(nav-bg.jpg) no-repeat top right;color: #fff;} /* 背景圖片的起始位置是頂部,右側 */ ul.nav li a.current span {background: url(nav-bg.jpg) no-repeat top left;} /* 背景圖片的起始位置是頂部,左側,先前已經指定了20px的間距 */ ul.nav li a:hover {background: url(nav-bg.jpg) no-repeat top right;color: #fff;} ul.nav li a:hover span {background: url(nav-bg.jpg) no-repeat top left;} /* 滑鼠經過的時候span的變化 */ </style> |
是不是很簡單？
演示圖片比較挫，莫見怪！
先沙發！！
很不錯，如果加上 Ajax 效果就更炫了，好吧，我承認我來亂的，門口在右邊，我自己出去~
@welee
呃，我這裡提供的是一張圖片實現滑動門導航的思路啊，其他花哨的自己琢磨去，哈
這還叫挫嗎?頂呱呱.
@yinheli
過獎過獎了～
wahoo!~It’s cool!Many thanx!
不錯，收藏了！！
最近正在重構個站，用得上，呵呵！！
也想改變一下結構~看看能牌上用場不~HoHO~
把文字放在span裡面應該也可以吧？
學習啊
哈，這方法非常實用！謝謝！
另想請問，你當前使用的主題能否分享一下？(盼復)
放心，不會濫用的，只是想研究學習其中一些東西。
@ Dickey
抱歉，目前還不行，我現在用的主題裡面有很多冗餘代碼，每天都在抽空改成大眾試用版，原打算就是準備放出下載的，只是還未到時候。
說實在的，好抽象啊，基本看不懂
我想向您學習
看著很完美了，不管文本寬還是窄，都有空間顯示右端的圓角。 😛
真牛X，我從來沒用過滑動門……你的方法我收藏了~
我在想增加一個無語義的是否合算… 畢竟把左右切好的滑動門圖片放在一張圖裡, 也可以達到減少http連接的目的….
PS, 個人覺得這個評論的輸入框交互還可以再改改啊… 把必須首先填寫的id與mail放到右邊去是為了減少用戶輸入回復時的成本么? 但是感覺實際上更加重了我的成本了.. 呵呵..
@1w
span標籤的作用是為了實現圓角的還可以擁有hover樣式，除非你要犧牲掉ie6上的表現。
至於評論嘛，因為我覺得評論框是重要的部分所以放在左邊，而右邊的用戶信息在輸入一次之後下一次訪問的時候根據cookies會隱藏。
Pingback: 一張圖片實現的 css 圓角滑動門導航菜單 收藏 | 網站開發設計工作室聯盟
❗ 不錯嘛！學習了……
🙂
又回來了