当前位置: 首页 > 设计 > 正文
avatar

一个很不错CSS3下拉菜单的演示,很不错,配色我也比较喜欢。是一个类似MAC风格的多级下拉菜单,这个效果使用了 border-radius,box-shadow,和text-shadow属性。它在Firefix,Safari和Chrome上的渲染效果都很赞。

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

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

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

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

看原文你就点击这里

看演示你就点击这里

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

使用一个渐变图层

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

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

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

本文固定链接: http://www.weisay.com/blog/css3-dropdown-menu.html | 威言威语

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

  1. avatar
    16楼
    怎么去痘印 Unknow Browser Unknow Os

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

    William 于 2010-08-01 05:11 PM 回复
    CSS隐藏?貌似藏不住,CSS目前的技术是藏不住,再怎么藏都是能看到的

    2010-08-01 16:06 [回复]
  2. avatar
    15楼
    小叶榄仁 Unknow Browser Unknow Os

    好像挺好看的

    2010-07-01 15:45 [回复]
  3. avatar
    14楼
    winw Unknow Browser Unknow Os

    技术文章,路过

    2010-07-01 15:44 [回复]
  4. avatar
    13楼
    QuietBoy Unknow Browser Unknow Os

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

    William 于 2010-07-01 03:49 PM 回复
    是的,特别是IE6,现在是深恶痛绝。真希望微软强制升级IE6

    2010-07-01 15:22 [回复]
  5. avatar
    12楼
    HCONLY Unknow Browser Unknow Os

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

    William 于 2010-06-30 05:54 PM 回复
    这个已经出来很久了,只是没有一个真正的标准出来。所以想统一思想还有难度

    2010-06-30 14:10 [回复]
  6. avatar
    11楼
    老七 Unknow Browser Unknow Os

    效果不错。。

    William 于 2010-06-28 11:32 PM 回复
    恩,是的

    2010-06-28 23:02 [回复]
  7. avatar
    10楼
    Jungle Unknow Browser Unknow Os

    在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 [回复]
  8. avatar
    9楼
    Firm Unknow Browser Unknow Os

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

    William 于 2010-06-27 06:15 PM 回复
    呵呵,这个就要看一个人的设计想象力了~

    2010-06-27 00:00 [回复]
  9. avatar
    8楼
    木易 Unknow Browser Unknow Os

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

    William 于 2010-06-26 02:49 PM 回复
    呵呵,我也是,所以要多多研究CSS3

    2010-06-26 09:02 [回复]
  10. avatar
    7楼
    Tony Unknow Browser Unknow Os

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

    William 于 2010-06-26 02:48 PM 回复
    他的那个渐变构思还是很不错的

    2010-06-26 00:30 [回复]
  11. avatar
    6楼
    苏扬 Unknow Browser Unknow Os

    你还别说 CSS3还真的好看!

    William 于 2010-06-26 02:48 PM 回复
    恩,这个演示还是CSS3的基本样子,还有旋转,渐隐等等,就更炫了

    2010-06-26 00:17 [回复]
  12. avatar
    5楼
    凯说 Unknow Browser Unknow Os

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

    William 于 2010-06-25 05:32 PM 回复
    不支持的

    2010-06-25 17:10 [回复]
  13. avatar
    4楼
    沉冰浮水 Unknow Browser Unknow Os

    好像用不到这个效果。。

    William 于 2010-06-25 02:34 PM 回复
    看个人所需了,我觉得挺实用的。

    2010-06-25 14:22 [回复]
  14. avatar
    地板
    littlebear Unknow Browser Unknow Os

    字体很好看, 是什么啊?
    [reply=William,2010-06-25 02:33 PM]font: normal .8em/1.5em Arial, Helvetica, sans-serif;
    就是很常见的英文字体,主要是他的颜色搭配的比较合理,看着舒服。[/reply]

    2010-06-25 11:25 [回复]
  15. avatar
    板凳
    海天无影 Unknow Browser Unknow Os

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

    William 于 2010-06-25 02:30 PM 回复
    是的,里面用到图片了,开始我也以为是纯CSS3写的渐变。

    2010-06-25 10:51 [回复]
  16. avatar
    沙发
    木本无心 Unknow Browser Unknow Os

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

    William 于 2010-06-24 10:13 PM 回复
    我在构思着了,嘿嘿

    2010-06-24 22:01 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter