最新消息:

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

菜单插件 杨红伟 34459浏览 0评论

一、插件介绍

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

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

    

如果不想了解它的细节,直接看 第三条内容:“最简使用教程

二、插件作者及网址

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

三:最简使用教程

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();
	});
</script>
<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-->
	<header>
		<div class="l_tbn"><a href="#menu" class="glyphicon glyphicon-th-large"></a></div>
		标题
	</header>
	<!--头部 end-->
	
	<!--正文 start-->
	<div class="content">正文的内容</div>
	<!--正文 end-->
	
	<!--侧边菜单 start-->
	<nav id="menu">
		<ul>
			<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>
		</ul>
	</nav>
	<!--侧边菜单 end-->
</div>

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址