HTML5菜单栏特效

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

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

这款基于CSS3的垂直菜单实现很简单，该CSS3垂直菜单有几个特点： 1、菜单外观呈立体视觉效果，非常有质感 2、鼠标滑过菜单项时，菜单项会出现伸缩动画。

在线演示 /源码下载

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

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

在线演示 /源码下载

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

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

在线演示 /源码下载

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

9、纯CSS3垂直动画菜单效果很酷

CSS3菜单的实现实在是太多了，有需要的朋友可以在CSS3菜单栏目下搜索符合自己要求的菜单。今天我们来分享一款CSS3垂直菜单，这款垂直菜单不仅有漂亮的小图标，而且鼠标滑过时还有非常酷的CSS3动画，大家可以试试这款CSS3垂直菜单。

在线演示 / 源码下载

8、CSS3联系表单背景透明迷人

我们在网页上经常会用到一些联系表单或者留言表单，不久前我们也分享过一款外观清新的Select联系表单，今天我们要分享一款背景透明迷人的CSS3联系表单，整个表单的背景是半透明的，像是悬浮在一张漂亮的幕布上一样，表单输入框被激活时输入框也呈现透明的效果，非常具有立体感。

在线演示 / 源码下载

7、HTML5自定义Checkbox和Radiobox 很酷的选中动画

浏览器自带的Checkbox和Radiobox的样式不仅外观丑陋，而且控制起来也不方便，特别是Checkbox在各个浏览器中的样式都不同，今天我们来利用HTML5和CSS3技术来自定义Checkbox和Radiobox的样式，特别是Checkbox，在选中的时候还有非常酷的选中动画。

在线演示 / 源码下载

6、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

之前我们分享过一款非常不错的CSS3自定义Checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义Checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。

在线演示 / 源码下载

5、HTML5 SVG Tab滑块菜单非常酷的Tab菜单

之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单。这款Tab菜单是利用HTML5和SVG实现的，Tab菜单的外观非常漂亮，而且Tab切换也很方便。

在线演示 / 源码下载

4、HTML5仿Chrome样式控制滑杆动画

随着浏览器技术的发展，滑杆控制器在网页上应用越来越广泛。今天要分享一款HTML5的滑杆控制器，这个滑杆动画是放Chrome样式的，不仅外观非常漂亮，而且在数据初始化的时候还带有滑动动画特效，我们可以将此插件应用在数据更新、投票等系统中去。

在线演示 / 源码下载