CSS3下拉菜单

William2010-06-24 21:38设计21,404次浏览16条评论

扫一扫手机看

今天网上随便乱窜，然后发现了一个很不错CSS3下拉菜单的演示，很不错，配色我也比较喜欢，所以有必要分享一下。

是一个类似MAC风格的多级下拉菜单，这个效果使用了 border-radius， box-shadow，和 text-shadow 属性。它在 Firefox，Safari 和 Chrome 上的渲染效果都很赞，IE8以下的就不谈了。

CSS3应该是时下一个比较热门的话题，虽然现在没有唯一的标准，而且浏览器的支持也不是很好，特别是在天朝这个特殊的国度，IE6依然是一个难以逾越的鸿沟。不过这不妨碍对新技术的追求。

这个菜单带有多级分类，可惜PJBlog不支持多级分类，不然使用起来将会是非常漂亮的。

看原文你就点击这里

看演示你就点击这里

下面的图片展示的是浏览器支持CSS3和不支持CSS3时菜单样子的对比。

CSS3下拉菜单

使用一个渐变图层

一个白色过渡到透明的图片被用来实现渐变效果。因为新CSS3渐变功能不是所有的浏览器都支持的,渐变的背景图片是更安全的选择。

CSS3下拉菜单

渐变的强度是可以通过改变图片上下偏移量来实现的，此外，渐变颜色可以很容易地通过改变背景颜色调整。

CSS3下拉菜单

我不会一行一行地解释CSS代码。下面的图片重点说明了，这个这个下拉菜单是如何编码出来的关键。

CSS3下拉菜单

CSS3下拉菜单：目前有 16 条评论

16楼
怎么去痘印：

我一直把那个css这个文件的隐藏功能没有搞明白，还是因为自己是新手，慢慢学习吧

William 于 2010-08-01 05:11 PM 回复

CSS隐藏？貌似藏不住，CSS目前的技术是藏不住，再怎么藏都是能看到的

2010-08-01 16:06 回复
15楼
小叶榄仁：

好像挺好看的

2010-07-01 15:45 回复
14楼
winw：

技术文章，路过

2010-07-01 15:44 回复
13楼
QuietBoy：

浏览器的不统一造成技术的偏差，很多好的东西都实现不了，对于网站开发的人来说的确是个悲哀。。

William 于 2010-07-01 03:49 PM 回复

是的，特别是IE6，现在是深恶痛绝。真希望微软强制升级IE6

2010-07-01 15:22 回复
12楼
HCONLY：

信息更新得太快了，往往还没反应过来就又冒出来一个新东西

William 于 2010-06-30 05:54 PM 回复

这个已经出来很久了，只是没有一个真正的标准出来。所以想统一思想还有难度

2010-06-30 14:10 回复
11楼
老七：

效果不错。。

William 于 2010-06-28 11:32 PM 回复

恩，是的

2010-06-28 23:02 回复
10楼
Jungle：

在IE7里是方的，CHROME 和FF是圆边。

William 于 2010-06-27 09:53 PM 回复

是的啊，IE6/7/8都不支持CSS3，Chrome、FireFox、Opera、Safari支持CSS3，但是又各有各的标准，所以CSS3还要发展。

2010-06-27 20:53 回复
9楼
Firm：

效果做出来实在是好，要仿照简单，要自己创造一个咋那么难呢

William 于 2010-06-27 06:15 PM 回复

呵呵，这个就要看一个人的设计想象力了~

2010-06-27 00:00 回复
8楼
木易：

CSS3的功能在这里再次使我折服！

William 于 2010-06-26 02:49 PM 回复

呵呵，我也是，所以要多多研究CSS3

2010-06-26 09:02 回复
7楼
Tony：

呃真得很好看！都用上图片移动！厉害！

William 于 2010-06-26 02:48 PM 回复

他的那个渐变构思还是很不错的

2010-06-26 00:30 回复
6楼
苏扬：

你还别说 CSS3还真的好看！

William 于 2010-06-26 02:48 PM 回复

恩，这个演示还是CSS3的基本样子，还有旋转，渐隐等等，就更炫了

2010-06-26 00:17 回复
5楼
凯说：

不知道pj4会不会支持多级分类

William 于 2010-06-25 05:32 PM 回复

不支持的

2010-06-25 17:10 回复
4楼
沉冰浮水：

好像用不到这个效果。。

William 于 2010-06-25 02:34 PM 回复

看个人所需了，我觉得挺实用的。

2010-06-25 14:22 回复
地板
littlebear：

字体很好看, 是什么啊?

William 于 2010-06-25 02:33 回复

font: normal .8em/1.5em Arial, Helvetica, sans-serif;
就是很常见的英文字体，主要是他的颜色搭配的比较合理，看着舒服。

2010-06-25 11:25 回复
板凳
海天无影：

我还在想颜色变色是怎么变的呢
原来是图片移动效果很好很好~

William 于 2010-06-25 02:30 PM 回复

是的，里面用到图片了，开始我也以为是纯CSS3写的渐变。

2010-06-25 10:51 回复
沙发
木本无心：

恩，确实很棒，如能移植到pj上就好了……

William 于 2010-06-24 10:13 PM 回复

我在构思着了，嘿嘿

2010-06-24 22:01 回复