JQuery插件Mmenu使用入门
Mmenu简介：
mmenu 插件是一款用于创建光滑的导航菜单的 jQuery 插件，只需要一行 JavaScript 代码就能为您的移动网站加上类似移动应用程序外观的滑动菜单（不仅在移动网站，pc端网站也可以用）。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> mmenu演示 </title>
<!--需要的第三方包-->
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="jquery.mmenu.all.custom.css" rel="stylesheet" type="text/css">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.mmenu.min.all.js"></script>
<script src="bootstrap.min.js"></script>
<span style="white-space:pre"> </span>
<script type="text/javascript">
$(document).ready(function() {
$("#main_menu").mmenu({
counters: true,
classes: "mm-light mm-zoom-menu mm-zoom-panels",
searchfield: true,
footer: {
add: true,
content: "Powered by Real @2014"
}
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-head">
<div class="navbar-brand">
<a href="#main_menu">点击</a>
</div>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
aaa
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
aaa
</a>
<ul class="dropdown-menu dropdown-user">
<li>111</li>
<li class="divider"></li>
<li>222</li>
</ul>
</li>
</ul>
</nav>
<nav id="main_menu" class="noprint">
<ul>
<li>
<span>菜单一</span>
<div>
<ul>
<span style="white-space:pre"> </span><li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</li>
<li>
<span>菜单二</span>
<div>
<ul>
<li><a href="">1</a></li>
</ul>
</div>
</li>
<li>
<span>菜单三</span>
<div>
<ul>
<li><a href="">1</a></li>
<span style="white-space:pre"> </span><li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</body>
</html>
北京星诚视野网络科技有限公司 © 2008-2022 京ICP备09003513-1号 技术支持：北京网站建设公司 北京APP开发
