jQuery技术

第76款插件:jquery.mmenu.js实现侧边导航非常适用于手机版站

字号+ 作者:H5之家 来源:H5之家 2017-05-16 15:06 我要评论( )

这个插件一般做手机站用的比较多,左侧上侧右侧下侧弹出菜单。 老杨我比较笨,每次下载下来很多demo,都让我看的晕晕的,倒是看时间长了,也能看懂,不过老杨我

你的位置:爱上JQuery > Jquery插件 > 菜单插件 > 第76款插件:jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程(一)

第76款插件:jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程(一)

菜单插件 杨红伟 3年前 (2014-03-21) 26452浏览

一、插件介绍

这个插件一般做手机站用的比较多,左侧上侧右侧下侧弹出菜单。

老杨我比较笨,每次下载下来很多demo,都让我看的晕晕的,倒是看时间长了,也能看懂,不过老杨我就是觉得麻烦。总想慢慢来,从最简单的来,越简单越好。这不,最近想做一个手机站,就用到这个菜单了,先从最简单的开始,从左侧弹出菜单,先截个图吧。

    

如果不想了解它的细节,直接看

二、插件作者及网址

作者:WELKOM,荷兰人(从官网看到的名字,也不知道是否正确)
版本:4.1.9
官方网站:      
作者的网站: 这哥们写了好多好东西,建议有机会看看吧,特别牛叉的一个人!
官方DEMO下载:
官方DEMO本站查看:

三:最简使用教程

1、引用JS和CSS代码:

这里如果不用手机版就不用引用meta这一句,注:style.css是页面布局,mmenu.css是菜单的样式,font-face.css这个是最上角那个图标的样式,注意,那个图标是字体,可不是什么图片,如上图:

<meta 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(); }); </script> <link href="css/style.css" type="text/css"> <link href="css/mmenu.css" type="text/css"> <link href="css/font-face.css" type="text/css">

2、HTML代码:这里不多解释了,都在代码里。

<div> <!--头部 start--> <header> <div><a href="#menu"></a></div> 标题 </header> <!--头部 end--> <!--正文 start--> <div>正文的内容</div> <!--正文 end--> <!--侧边菜单 start--> <nav> <ul> <li><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> </ul> </nav> <!--侧边菜单 end--> </div>

继续浏览有关 的文章

上一篇 字体第1款:glyphicons-halflings-regular字体 第77款插件:ddsmoothmenu.js制作下拉菜单(一)插件介绍、作者、参数及官方DEMO 下一篇

与本文相关的文章

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

    用于修改图片大小并保持长宽比的jQuery插件(Tony原创)

    2017-05-14 17:01

  • jQuery插件手把手教会(一)

    jQuery插件手把手教会(一)

    2017-05-01 14:01

  • jQuery插件dataTables使用Ajax通过Action点击下一步传数据 jQuer

    jQuery插件dataTables使用Ajax通过Action点击下一步传数据 jQuer

    2017-04-24 17:01

  • [jQuery插件] jQuery Color Animations颜色动画插件 WEB前端开发

    [jQuery插件] jQuery Color Animations颜色动画插件 WEB前端开发

    2017-04-23 17:01

网友点评