优化手机网站菜单 9款响应式导航插件下载 | 设计达人
爱设计，爱分享。
优化手机网站菜单 9款响应式导航插件下载
赞助商链接
为了适应手机版的网站，网站导航都需要做一优化，比如使用汉堡包导航，前期我们分享过《》可帮助大家搭建手机网站，方便了很多，如果你在这25个菜单插件中还没找到适合自己的话，那就看看今天为大家分享最新的一些RWD菜单插件，也许你会在下个项目上用上哦！
这个mmenu插件除了能实现手机侧边栏菜单外，它设计的2级菜单效果也很棒，就像是iPhone的设置菜单一样，可左右滑动展开。还有更多强大功能，比如为菜单加上图标，展开的方式等等。
Drawer的响应式菜单带有多种不同类型的展开方式，从右边、左边、上边、固定等。
Formstone是一个简约RWD导航，用户可以自定义菜单左右展示，或者overlay、reveal、push方式展示。
Sidebars是一个jQuery插件，可以帮你快速搭建你APP一样的off-canvas菜单，有2种展示方式，一种是在菜单展示的时候，右侧内容也跟着向右缩，另一种是直接覆盖在内容的上面，具体请看DEMO吧。
一个简单的侧边导航插件，如果不需要多级菜单，可以使用这个，轻量级。
Off-Canvas Menu Effects
这个菜单的展示特效非常弦，有的使用SVG动画实现，推荐看看。
Mega-Site Navigation
很赞的一个RWD多级菜单，响应式方面做得很好。
轻量级响应式网站导航插件，展开动画效果平滑流畅。
RWD full screen navigation menu
全屏式的响应式导航，菜单文字好大只，很醒目哦～
手机网站越来越流行，为了实现RWD导航，使用现成的响应式菜单插件确实能省很多时间，而且用CSS修改样式也很方便，只要找对一款合适的菜单即可，此外还大家还要以去或网站，里面也有一些RWD MENU分享。
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，欢迎转载。
印刷工艺必备神技
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群你的位置： >
> 第76款插件：jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程（一）
一、插件介绍
这个插件一般做手机站用的比较多，左侧上侧右侧下侧弹出菜单。
老杨我比较笨，每次下载下来很多demo，都让我看的晕晕的，倒是看时间长了，也能看懂，不过老杨我就是觉得麻烦。总想慢慢来，从最简单的来，越简单越好。这不，最近想做一个手机站，就用到这个菜单了，先从最简单的开始，从左侧弹出菜单，先截个图吧。
如果不想了解它的细节，直接看
二、插件作者及网址
作者：WELKOM，荷兰人（从官网看到的名字，也不知道是否正确）
版本：4.1.9
官方网站： &&&
作者的网站： 这哥们写了好多好东西，建议有机会看看吧，特别牛叉的一个人！
官方DEMO下载：
官方DEMO本站查看：
三：最简使用教程
1、引用JS和CSS代码：
这里如果不用手机版就不用引用meta这一句，注：style.css是页面布局，mmenu.css是菜单的样式，font-face.css这个是最上角那个图标的样式，注意，那个图标是字体，可不是什么图片，如上图：
&meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" /&
&script src="js/jquery-1.9.1.min.js"&&/script&
&script src="js/jquery.mmenu.min.js"&&/script&
&script type="text/javascript"&
$(function() {
$('nav#menu').mmenu();
&link href="css/style.css" rel="stylesheet" type="text/css"&
&link href="css/mmenu.css" rel="stylesheet" type="text/css"&
&link href="css/font-face.css" rel="stylesheet" type="text/css"&
2、HTML代码：这里不多解释了，都在代码里。
&div id="page"&
&!--头部 start--&
&div class="l_tbn"&&a href="#menu" class="glyphicon glyphicon-th-large"&&/a&&/div&
&!--头部 end--&
&!--正文 start--&
&div class="content"&正文的内容&/div&
&!--正文 end--&
&!--侧边菜单 start--&
&nav id="menu"&
&li class="Selected"&&a href="#"&按钮1&/a&&/li&
&li&&a href="#"&按钮2&/a&&/li&
&li&&a href="#"&按钮3&/a&&/li&
&li&&a href="#"&按钮4&/a&&/li&
&li&&a href="#"&按钮5&/a&&/li&
&!--侧边菜单 end--&
与本文相关的文章优化手机网站菜单 9款响应式导航插件下载
为了适应手机版的网站，网站导航都需要做一优化，比如使用汉堡包导航，今天为大家分享最新的一些RWD菜单插件，也许你会在下个项目上用上哦！
这个mmenu插件除了能实现手机侧边栏菜单外，它设计的2级菜单效果也很棒，就像是iPhone的设置菜单一样，可左右滑动展开。还有更多强大功能，比如为菜单加上图标，展开的方式等等。
Drawer的响应式菜单带有多种不同类型的展开方式，从右边、左边、上边、固定等。
Formstone是一个简约RWD导航，用户可以自定义菜单左右展示，或者overlay、reveal、push方式展示。
Sidebars是一个jQuery插件，可以帮你快速搭建你APP一样的off-canvas菜单，有2种展示方式，一种是在菜单展示的时候，右侧内容也跟着向右缩，另一种是直接覆盖在内容的上面，具体请看DEMO吧。
一个简单的侧边导航插件，如果不需要多级菜单，可以使用这个，轻量级。
Off-Canvas Menu Effects
这个菜单的展示特效非常弦，有的使用SVG动画实现，推荐看看。
Mega-Site Navigation
很赞的一个RWD多级菜单，响应式方面做得很好。
轻量级响应式网站导航插件，展开动画效果平滑流畅。
RWD Full Screen Navigation Menu
全屏式的响应式导航，菜单文字好大只，很醒目哦～
手机网站越来越流行，为了实现RWD导航，使用现成的响应式菜单插件确实能省很多时间，而且用CSS修改样式也很方便，只要找对一款合适的菜单即可，此外还大家还要以去cssmenumaker或navnav网站，里面也有一些RWD MENU分享。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
&&