CSS3 下拉菜单
Mar 6th, 2010
Add Comment
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
预览
下面的图片展示出如果浏览器不支持 CSS3 时菜单将是什么的样子.
使用了一个渐变图片
一个由白色过渡到透明的图片被用来实现渐变效果. 因为新的 CSS3 渐变特性还没有被所有浏览器支持, 渐变的背景图片是更保险的选择.
渐变的强度可以通过更改图片的上下偏移量来实现. 并且渐变颜色可以简单地通过更换背景颜色来实现.
CSS 代码
我不会逐行地解释 CSS 代码. 但会在下面的图片中将重点标出, 说明这个下拉菜单是这样编写出来的.
译者的话
昨天翻译了《CSS 基础知识》一文, 因为没有实例觉得不完整, 自己对 CSS3 的了解确实有限, 所以厚着脸再翻译了这位同学较早前的一个文章. 文中内容同样通俗易懂, 效果相当好而且实用.
原文链接: CSS3 Dropdown Menu
最近 CSS3 说得很火, 近如咫尺, 但是鄙人认为这是一个假象, CSS3 要普及还需要经历一个悠长而曲折的阶段. 在为 CSS3 欢呼的同时, 我们不能否认 CSS2 的可用性更高. 我认为 Windows XP 和 Vista 离场的时候将是 CSS3 普及之时, 而在 PC 之前, Mobile Phone 可能会捷足先登.
很好啊，收藏了！
博主翻译的很好！好文章
坐等ie6基本淘汰
看了又看，还是需要再多研究研究，代码可真多呀。
no entiendo
@bolo
是的。
呃，只是用CSS3渲染了效果，还以为是完全采用CSS3实现的下拉效果……还不错，谢谢分享。
@bolo XX下的直接子元素XX。
好的。确实是很需要的东西，想要啊，弄不来
为webkit加入些transition的东西，让它有展开、收缩效果会更棒
菜单 导航 对网站来说十分重要，在目前形式下 肯定不会把CSS3用在这上面。
神往中。。
@涛涛
why
谢谢博主了。
呵呵 在这里总是能学到好多
东西啊
好教程，谢谢博主。
可不可以分享一下贵站的首页文章那个展开/折叠功能代码？
本人不才，在经典论坛以及无忧脚本等各大论坛搜了个遍，也没找到合适的解决方法
不知道站长可不可以分享一下
最近蛮多人下CSS下拉菜单的文章的
请教一个问题，我的博客使用WordPress自带的摘要命令后，分类页则不能显示图片摘要，
使用缩略图插件Thumbnail for Excerpts，可以自动摘要文章，分类页也有图片摘要显示，效果也是我想要的，
但是我想把部分内容比较短的首篇文章全部显示，长的文章显示一部分，全部显示就不好看了，
所以请教个问题，就是能否使用Thumbnail for Excerpts插件，达到比较好的摘要效果
但是第一篇文章摘要不要这个插件的效果，按照我使用WordPress的摘要命令来完成？
我是菜鸟，整不出来，我整到使用插件后，每页的第一篇文章全部显示这个阶段，
但是不会把首篇文章使用WP的摘要命令来完成。。
也不知道是不是修改文章内部的某个零件可以达到效果
说的比较繁琐，不知道你看明白了不。。。谢谢~~
或者不使用插件，使用什么方法能设置分类页也像其它页一样有图片显示的摘要？
完整的效果确实不错.. 不过等着普及 似乎遥远... 毕竟现在很多中国用户大多都是用的IE6 还是多研究下基础的把 说实话 我对这些花样 总体感觉是：中看不中用...
很实用也很好看的效果, 学习了
等ccs3普及真的要很久...哈
CSS3 的确很炫，不过普及还需要很久。
坐观默不语
效果不错~
@Justice
嗯嗯，我看的比较粗心，我指的是xx > xx这种写法，一时想不起这叫什么了
渐变也可以用css实现阿
菜单效果很不错
我得好好学学。
我感觉CSS在新的版本里最应该做的是性能方面的优化吧！功能强大的话应该是会很耗资源的。不过做做研究还是很不错的！
@bolo
这个只是在原来的 CSS 下拉菜单中加入了 CSS3 的新特性, 让人们看到在 CSS3 下我们还能对下拉菜单做怎样的改进吧. 而且他应用到的 CSS3 伪类也是有必要的, 如果不使用 CSS3 下的 :last-child 伪类, 在设置菜单最后项的圆角时就需要在 HTML 中加入额外的 class 了. 而不单独对首尾两项设置圆角的话 ul 的圆角就被覆盖了. 还有...这没有用到 CSS 表达式吧...
1.我认为这种菜单只能成为CSS下拉菜单，因为真正实现下拉功能的并不是CSS3的属性
2.这个教程使用了CSS表达式和伪类，我觉得不够好，也没这个必要
3.这个教程还是有一个常见的问题，没有为下拉列表加上z-index属性，个人认为应该加上，以确保菜单不会被其他元素遮盖
4.在li>ul不显示是对ul进行样式渲染会不会对性能产生不良影响（加入下级菜单很多的话）？在li:hover时再对li>ul渲染样式会不会更好？
沙发，吃完宵夜再看