10大经典CSS3菜单应用欣赏

古城微笑少年丶 2022-08-05 15:11 66阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:698px; color:rgb(0,0,0); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:14px; line-height:25.200000762939453px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word"> 
 <div style="word-wrap:break-word"> 
 很多时候，我们的网页菜单需要个性化，从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=16" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">CSS3</a>菜单<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=20" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">应用</a>，菜单涉及到动画菜单、Tab菜单、面包屑菜单等。 
 </div> 
 <div style="word-wrap:break-word"> 
 
 </div> 
 <div style="word-wrap:break-word"> 
 1、CSS3飘带状3D菜单 菜单带小图标 
 </div> 
 <div style="word-wrap:break-word"> 
 
 </div> 
 <div style="word-wrap:break-word"> 
 这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。 
 </div> 
 <div style="word-wrap:break-word"> 
 
 </div> 
 <div style="word-wrap:break-word"> 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095004shb1d01je510fsby.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095004shb1d01je510fsby.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 <a href="http://www.html5tricks.com/demo/css3-ribbon-3d-icon-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14057" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3飘带状3D菜单 菜单带小图标.rar</a> 
 
 2、jQuery动画二级下拉菜单 
 
 对于jQuery菜单，大家已经非常熟悉了，我们也已经分享过很多jQuery菜单和CSS3菜单。今天要介绍的这款jQuery菜单是二级下拉菜单，并且在子菜单展开的时候出现动画效果。更为特别的是，鼠标滑过子菜单项时会产生该菜单项的提示。 
 </div> 
 <div style="word-wrap:break-word"> 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095138swaxmwlmhgpq0xwg.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095138swaxmwlmhgpq0xwg.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 <a href="http://www.html5tricks.com/demo/jquery-animate-dropdown-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 </div> 
 <div style="word-wrap:break-word; text-align:center"> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14059" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">jQuery动画二级下拉菜单.rar</a> 
 3、CSS3 iPhone样式的3D菜单 
 
 之前已经向大家分享过很多漂亮的CSS3菜单了，很多菜单都支持多级下拉。今天要分享的CSS3菜单时模拟iPhone样式的，菜单整体呈现3D立体的视觉效果。同时你也可以选择平面方式的菜单，2D和3D之间可以自由切换。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095402dslgrj52na5eay5n.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095402dslgrj52na5eay5n.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-iphone-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14076" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3 iPhone样式的3D菜单.rar</a> 
 
 4、CSS3 3D动画菜单 3D立方体菜单项 
 
 之前我们分享过很多富有创意的CSS3菜单，今天分享的这款CSS3动画菜单非常有特点，它的菜单项是一个个可以翻转的3D立方体，效果非常不错。再来回顾一下之前的3D菜单，像这款<a href="http://www.html5tricks.com/css3-3d-paper-menu.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">HTML5/CSS3 3D下拉折叠菜单</a>也非常不错。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/0954195mhhysnaw59arwfu.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/0954195mhhysnaw59arwfu.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-3d-cube-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14075" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3 3D动画菜单 3D立方体菜单项.rar</a> 
 5、纯CSS3立体动画菜单 菜单项按下有内阴影 
 
 这次小编来分享一款利用纯CSS3实现的立体动画菜单，该菜单的实现非常简单，并没有太多的特效渲染，但是看起来却非常干净漂亮，尤其配合灰黑色的背景，让菜单显得有点立体的感觉。另外，当我们点击菜单项时，菜单项将会出现内阴影的视觉效果。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095432avntccsczlpxdapc.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095432avntccsczlpxdapc.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-ckean-mini-menu-animation/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14074" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">纯CSS3立体动画菜单 菜单项按下有内阴影.rar</a> 
 6、CSS3华丽的Tab菜单 带小图标动画 
 
 之前我们分享过一款非常出色的CSS3 Tab菜单<a href="http://www.html5cn.org/" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">HTML5</a>&nbsp;SVG Tab滑块菜单，结合SVG，Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3的华丽Tab菜单，这款Tab菜单的菜单项是一个个小图标，鼠标滑过时，菜单项展示对应文字，并出现展开的动画。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095447hr4r60ejih0rmemj.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095447hr4r60ejih0rmemj.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-tab-with-icon/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14073" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3华丽的Tab菜单 带小图标动画.rar</a> 
 7、基于Bootstrap的CSS3下拉菜单 
 
 Bootstrap是Twitter推出的一个用于前端开发的开源工具包，基于Bootstrap框架，我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的，下拉子菜单的外观也非常不错，同时菜单也具有3D立体的视觉效果。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095501e5ejcfuddfnyutee.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095501e5ejcfuddfnyutee.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-bootstrap-dropdown-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14072" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">基于Bootstrap的CSS3下拉菜单 菜单3D立体效果.rar</a> 
 8、CSS3黑色主题菜单 菜单项淡入淡出动画 
 
 今天我们要来分享一款简单实用的CSS3菜单，菜单是黑色主题，因此显得非常端庄霸气。由于菜单应用了CSS3特性，菜单的边缘将出现阴影的效果，给人立体的视觉效果。另外还有一个特点就是，鼠标滑过菜单项时将出现淡入淡出的动画特效，是一款很不错的CSS3黑色主题菜单。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095538w4sv5bsiwqs3hw95.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095538w4sv5bsiwqs3hw95.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-black-animated-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14071" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3黑色主题菜单 菜单项淡入淡出动画.rar</a> 
 9、CSS3精美小图标菜单导航 
 
 之前我们分享过很多漂亮的小图标菜单导航，像这款超具立体感的CSS3 3D菜单 菜单项带小图标，还有这款HTML5/CSS3仿Google Play垂直菜单，都很不错。今天我们要来分享一款更加精美清新的CSS3小图标菜单导航，鼠标滑过这款菜单时还可以在图标和文字之间形成切换的动画效果。 
 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095550sxtvgt5g966p5sl5.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095550sxtvgt5g966p5sl5.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 
 <a href="http://www.html5tricks.com/demo/css3-simple-icon-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14070" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3精美小图标菜单导航.rar</a> 
 10、CSS3响应式面包屑菜单 
 
 之前我们分享过两款CSS3面包屑菜单，<a href="http://www.html5tricks.com/css3-circle-bread-menu.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">纯CSS3圆形面包屑菜单</a>和<a href="http://www.html5tricks.com/css3-flat-bread-menu.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">CSS3扁平化面包屑菜单导航</a>，效果都还不错。今天我们再分享一款响应式面包屑菜单，这款CSS3菜单外观设计非常简洁但又十分大气，我们可以在分步注册页面或者活动引导页面使用这款CSS3面包屑菜单。 
 <a href="http://www.html5cn.org/data/attachment/portal/201503/12/095610ekzzf0a5fkrrf2k3.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><img src="http://www.html5cn.org/data/attachment/portal/201503/12/095610ekzzf0a5fkrrf2k3.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></a> 
 <a href="http://www.html5tricks.com/demo/css3-responsive-bread-menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a> 
 <a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14069" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px" rel="nofollow">CSS3响应式面包屑菜单.rar</a> 
 </div> </td> 
 </tr> 
 </tbody> 
</table>