设计过网站的小伙伴们应该都有深深的体会，当我们拿到客户需求准备开干的时候，第一反应会思考，我们的菜单该怎么设计？水平横幅菜单呢，还是垂直侧边栏，又或者是否需要个性化的创意？
这是一个让人头疼的问题，但这也恰恰说明了菜单导航在一个网站或者H5 App中起到了举足轻重的作用，可以说是一把前往系统灵魂深处的梯子。
最近，我收集了一些风格和样式都比较符合我口味的网页菜单组件，大部分都用CSS实现，也有一些SVG的巧妙应用。
文末提供了源码下载，让我们一起来看看吧。
1. 时尚的CSS圆形菜单
这款菜单的设计风格有点与众不同，它有点像汉堡菜单的升级版，点击主菜单按钮后，所有的菜单项形成一个圆形并展开。菜单采用CSS和简单的JS实现，它并不适合用于大型的网站首页，更适合用于地图应用或者是画板应用的操作菜单。
2. 超酷的Tab菜单切换动画
这款菜单，准确的说是一个tab选项卡，它和普通的tab选项卡不同，它的tab按钮和切换动画具有特色，切换时按钮就像从水面中浮起来一样。
3. 基于Bootstrap的响应式横幅菜单
这款菜单非常实用，相信肯定有很多小伙伴用得上，它的总体风格基于Bootstrap，一共设计了8种不同布局不同主题的横幅菜单，菜单包含下拉选项、搜索框这些常用的元素。另外它还能适配不同尺寸的设备屏幕，同样支持在移动设备上展示。
4. 可折叠的CSS侧边栏菜单
这是一款中规中矩的CSS侧边栏菜单，首先是它的默认配色是我喜欢的类型，同时它还有菜单项下拉折叠和侧边栏收起展开这两个实用的特性，非常适合在后台管理系统中使用。
5. jQuery粘性横幅Tab菜单
这款菜单在单页应用中使用非常广泛，特别是在一些大型企业网站中比较常见，它主要使用了jQuery来实现粘性显示的特效。
6. SVG创意卡片菜单
这款菜单主打一个创意，可能在PC端不太用得到，但在手机端可能会有一定的用武之地，这整个卡片组件继承了菜单、搜索、内容展示等功能，它的菜单项采用SVG实现了动画特效。
7. 纯CSS3面包屑导航菜单
这又是另外一种CSS菜单类型，面包屑导航，可以在一些有好几个步骤的页面应用中使用，它的优点在于可以让用户很清楚的了解有多少步骤需要做，当前在哪一步。这款菜单采用纯CSS3实现，代码非常清爽。
8. SVG吸附动画侧边栏菜单
这也是一款侧边栏菜单，和上面一款侧边栏相比，它的展开和收起带有比较酷的动画特效，有点吸附于鼠标的感觉。
9. CSS变形汉堡菜单动画
这款菜单非常适合在手机端使用，在页面顶部可以展开主菜单，既节省空间，有不乏友好的交互体验。
10. 纯CSS3 3D折叠下拉菜单
这是一款外观非常炫酷的CSS3 3D下拉菜单，当我们将鼠标滑过菜单项时，二级子菜单将会以3D的动画方式展开，同时子菜单会产生抖动折叠的动画效果，非常炫酷，而这一切都是纯CSS3实现。
源码下载
菜单介绍完了，有一些你应该在今后能用得上，不妨可以先收藏。
如果你需要完整的源码，也可以在我的公众号主页发送「菜单」获取下载链接。
↓↓↓
