一张图片实现的 css 圆角滑动门导航菜单

一张图片实现的 css 圆角滑动门导航菜单
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>

是不是很简单?

演示图片比较挫,莫见怪!

View Demo Sliding Door

ZIP File2.42 kB 共被下载798次

22 Responses to 一张图片实现的 css 圆角滑动门导航菜单

  1. welee says:

    很不错,如果加上 Ajax 效果就更炫了,好吧,我承认我来乱的,门口在右边,我自己出去~

  2. Leeiio says:

    @welee
    呃,我這裡提供的是一張圖片實現滑動門導航的思路啊,其他花哨的自己琢磨去,哈 :mrgreen:

  3. yinheli says:

    这还叫挫吗?顶呱呱.

  4. Elicip says:

    wahoo!~It’s cool!Many thanx!

  5. xiaorsz says:

    不错,收藏了!!
    最近正在重构个站,用得上,呵呵!!

  6. 吖Bee says:

    也想改变一下结构~看看能牌上用场不~HoHO~

  7. eddie says:

    把文字放在span里面应该也可以吧?

  8. Dickey says:

    哈,这方法非常实用!谢谢!

    另想请问,你当前使用的主题能否分享一下?(盼复)
    放心,不会滥用的,只是想研究学习其中一些东西。

  9. Leeiio says:

    @ Dickey
    抱歉,目前還不行,我現在用的主題裡面有很多冗餘代碼,每天都在抽空改成大眾試用版,原打算就是準備放出下載的,只是還未到時候。

  10. Charles says:

    说实在的,好抽象啊,基本看不懂

  11. 无敌小强 says:

    我想向您学习

  12. Sivan says:

    看着很完美了,不管文本宽还是窄,都有空间显示右端的圆角。 😛

  13. ZH CEXO says:

    真牛X,我从来没用过滑动门……你的方法我收藏了~

  14. 1w says:

    我在想增加一个无语义的是否合算… 毕竟把左右切好的滑动门图片放在一张图里, 也可以达到减少http连接的目的….

    PS, 个人觉得这个评论的输入框交互还可以再改改啊… 把必须首先填写的id与mail放到右边去是为了减少用户输入回复时的成本么? 但是感觉实际上更加重了我的成本了.. 呵呵..

  15. Leeiio says:

    @1w
    span标签的作用是为了实现圆角的还可以拥有hover样式,除非你要牺牲掉ie6上的表现。

    至于评论嘛,因为我觉得评论框是重要的部分所以放在左边,而右边的用户信息在输入一次之后下一次访问的时候根据cookies会隐藏。

  16. Pingback: 一张图片实现的 css 圆角滑动门导航菜单 收藏 | 网站开发设计工作室联盟

  17. huaipingguo says:

    ❗ 不错嘛!学习了……

Leave a Reply

Your email address will not be published. Required fields are marked *