侧边栏三级级菜单滑出jquery怎么写
发布网友
发布时间：2022-04-20 01:13
我来回答
共1个回答
热心网友
时间：2022-04-23 04:31
你指的是：
这种效果么？？？
如果是的话可以考虑使用mmenu Jquery插件，很强大。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>
如果你想要的不是这个效果，请贴出效果图。
