精选10款超酷的HTML5/CSS3菜单

标签： HTML5实例 HTML5应用 | 发表时间：2014-03-19 22:33 | 作者：sxwgf
出处：http://www.html5tricks.com

今天向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧。

1、CSS3手风琴菜单 下拉展开带弹性动画

利用CSS3技术可以实现各种各样的网页菜单，我们之前也在 CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角也会出现动画，非常酷。

css3-accordion-menu

在线演示         源码下载

2、CSS3动画下拉菜单 带动画图标

利用CSS3可以制作很多精美的下拉菜单，而且这些菜单一般都会有挺不错的下拉动画。利用CSS3的Animation属性，我们可以非常方便的定制一些漂亮的菜单动画。今天介绍的这款CSS3菜单就非常完美的应用了CSS3的这些特性。

css3-animation-menu-with-icon

在线演示         源码下载

3、CSS3多级下拉菜单 弹性展开下拉动画

利用CSS3制作的网页菜单外观都十分绚丽，而且都带有一定的动画特效。今天分享的这款CSS3多级下拉菜单可以方便地配置菜单的层级数，而且每一个菜单项都有自己的小图标，显得非常清新亮丽。该CSS3下拉菜单在展开子级菜单时会有弹性展开的动画特效，是一款非常酷的下拉菜单。

css3-dropdown-menu-animation

在线演示         源码下载

4、CSS3 Lava Lamp动画下拉菜单 菜单很简洁

之前我们分享过一些漂亮的CSS3菜单，来回顾一下： CSS3灰色按钮菜单、 CSS3 飘带菜单等，大家可以前往 CSS3菜单类目下查看演示和下载源码。今天我们分享的这款CSS3菜单也是下拉菜单，鼠标滑动到相应菜单项时，菜单项下方会滑过一条漂亮的线条。

css3-lava-lamp-menu

在线演示         源码下载

5、CSS3 飘带菜单 超酷3D CSS3菜单

之前我们分享过不少漂亮的CSS3菜单， CSS3/jQuery创意盒子动画菜单、 CSS3垂直菜单 菜单有立体动画视觉、 CSS3多级下拉菜单 弹性展开下拉动画。今天要分享的这款CSS3菜单非常特别，菜单是呈飘带状的，鼠标滑过菜单项时，菜单项会凸显出来，表现的非常立体动感。

css3-3d-ribbon-menu

在线演示         源码下载

6、纯CSS3圆形面包屑菜单 有展开动画

上一次我们介绍过一款 CSS3扁平化面包屑菜单导航，非常漂亮和实用。今天我们再来介绍一款CSS3圆形面包屑菜单，该CSS3菜单的菜单项默认是圆形的，当鼠标滑过菜单项时，菜单项即会展开，并伴随展开动画。让我们一起来看看这款纯CSS3实现的圆形面包屑菜单吧。

css3-circle-bread-menu

在线演示         源码下载

7、CSS3扁平化面包屑菜单导航 菜单很精巧

面包屑菜单一般贯穿整个网站，可以很清晰地描述访客的当前层级目录，让用户更清楚地了解网站各个频道之间的关系。这款CSS3面包屑菜单十分精巧，它采用了扁平化设计，让菜单显得更加简单易用，视觉效果也非常不错。该CSS3面包屑菜单的箭头也是用纯CSS3代码实现。

css3-flat-bread-menu

在线演示         源码下载

8、CSS3垂直菜单 菜单有立体动画视觉

这款基于CSS3的垂直菜单实现很简单，该CSS3垂直菜单有几个特点：

1、菜单外观呈立体视觉效果，非常有质感

2、鼠标滑过菜单项时，菜单项会出现伸缩动画。

css3-vertical-menu

在线演示         源码下载

9、CSS3/jQuery创意盒子动画菜单

作为前端开发者，各种各样的jQuery菜单见过不少，这款jQuery/CSS3菜单却是别具一格，菜单项嵌入到九宫格中，像小盒子一样，加上温馨的背景，菜单整体外观十分可爱。点击菜单项，盒子就会展开，展示该菜单项具体的内容。该CSS3菜单在展开时也有不错的动画效果。

jquery-css3-box-menu

在线演示         源码下载

10、CSS3灰色按钮菜单 超具3D立体感

CSS3在按钮应用中非常常见，效果也都不错，一般利用CSS3制作的按钮都会有以下几个特点：1、色彩丰富，按钮不像CSS那样单一，利用CSS3的渐变色可以让按钮变得色彩多姿。2、3D立体效果，利用CSS3投影和阴影特性往往可以让按钮充满立体感。

css3-3d-button-menu

在线演示         源码下载

以上就是10款超酷的HTML5/CSS3菜单，欢迎收藏分享。（ www.html5tricks.com）

相关 [html5 css3 菜单] 推荐：

精选10款超酷的HTML5/CSS3菜单

- - HTML5资源教程
今天向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧. 1、CSS3手风琴菜单 下拉展开带弹性动画. 利用CSS3技术可以实现各种各样的网页菜单，我们之前也在 CSS3菜单栏目中分享了许多CSS3菜单. 今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久，一直没把这个文件夹分享出来. 这是我去年第四季度里做的，里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档，还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究，没有深入到应用中去. 不过，当做工具来使用，和入门文档，还是不错的. 特别是其中的 HTML5 JS API 文档.

HTML5 和 CSS3 书籍推荐

- - 我爱水煮鱼
HTML5 和 CSS3 是下一代 Web 开发标准，无论是针对内容结构还是媒体，HTML5 都引进了各种新元素. 今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3，学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web 设计和开发人员的当务之急. 现在网上已经有很多关于 HTML5 和 CSS3 的网站，包括介绍、教程以及使用技巧等等.

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
　　转载请注明原创地址： http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html. 　　demo查看地址： http://www.webdesignerwall.com/demo/media-queries/. 　　CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业，新标准既可能是无限财富的源泉，也可能导致企业帝国的毁灭. 尽管存在着如此多的风险，标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时，计算领域的主要争议是Unix是否是一个可行的操作系统（以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战），以及哪个视窗平台（SUN/AT&T还是IBM/DEC/HP）将成为标准.

HTML5和CSS3：网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设，网页上一些元素看起来和草稿中相对应元素不完全一样，客户端会发现那些字体定位上的细微的区别.

22个HTML5和CSS3表单教程

- 幻幽 or A書 - 伯乐在线 -博客
　　利用HTML5和CSS3，还有一些出色的说明文档，你可以做些有创造力的网页表单. 因此，本文整理综合了22个CSS3表单教程. 　　点击各个小标题下方图片，即可进入相应英文教程. 　　你可能对以下文章也感兴趣. 　　成为一个顶级设计师的8个秘诀　　. 　　10个令人印象深刻的JavaScript动画效果网站.

23个优秀的HTML5/CSS3教程

- - 可咔酷 | 网络杂货铺
HTML5/CSS3无疑是未来Web发展的方向，这一点在移动互联网领域已经得到了充分的证明. 如果你也是一名web开发者，想要深入了解关于HTML5和CSS3的话，你不妨看看下面这些教程. 这里有23个不错的HTML5/CSS3教程(有的使用了jQuery)，这些教程来自于国外的一些优秀的web开发者和设计师，相信看完之后你一定会学到不少东西.

30+免费优秀的HTML5+CSS3模板

- - Jackchen Design 1984
HTML5和CSS3都是这两年来一直被热议的话题. 因为他们都有非常多的有趣的功能，他们会让您的网站不管是设计还是创意上都更加的时尚. 只是对于很多网页设计师来说最大的瓶颈还是浏览器之间兼容性的问题. 这似乎一直都是网页设计师心头的痛. 但在很多欧美国家，他们都敢于取舍，敢于创新和设计，甚至一些公司可以为了一些IDEA去放弃个别头疼的浏览器针对性的使用HTML5和CSS3来设计出想要的效果.

9个超酷的 HTML5/CSS3 应用

- - 氪星人
1、HTML5播放器神话，卡带式古典播放器. 这是一款样式非常古典，但又是非常时尚的HTML5播放器，说它是古典播放器，是因为这种卡带式的HTML5播放器比较古老，说它时尚，是因为现在的HTML5播放器很少有这种样式的，非常有创意. 如果你想给你的个人主要添加一款个性化的播放器，那么这款HTML5卡带式古典播放器可以选择一下，个人认为这是HTML5播放器的神话，非常经典.