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 圆角滑动门导航菜单 收藏 | 网站开发设计工作室联盟
❗ 不错嘛！学习了……
🙂
又回来了