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開發
