一款jQuery垂直下拉多级菜单,这里建议设置共3级菜单就可以了,当然也可以设置多级的效果,只要有子菜单的都可以点击展开或者伸缩,实用性还是挺强的,喜欢的小伙伴们请收下吧。
页面的head部分首先引入两个CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/base.css">
<link type="text/css" rel="stylesheet" href="css/menu.css">
接着引入jQuery库和menu_min.js文件,并启用menu插件,代码如下:
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/menu_min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$(".menu ul li").menu();
});
</script>
页面的body部分结构很清晰,看中文的字面意思就能明白了,代码如下:
<div class="menu">
<ul>
<li><a class="active" href="#">一级菜单 1</a>
<ul style="display: block;">
<li><a href="#">二级菜单 1</a></li>
<li><a href="#">二级菜单 2</a>
<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>
</ul>
</li>
<li><a href="#">二级菜单 3</a></li>
<li><a href="#">二级菜单 4</a>
<ul>
<li><a href="#">三级菜单 1</a></li>
<li><a href="#">三级菜单 2</a></li>
</ul>
</li>
<li><a href="#">二级菜单 5</a></li>
</ul>
</li>
<li><a href="#">一级菜单 2</a>
<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>
</ul>
</li>
<li><a href="#">一级菜单 3</a>
<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>
<li><a href="#">二级菜单 6</a></li>
</ul>
</li>
<li><a href="#">一级菜单 4</a></li>
<li><a href="#">一级菜单 5</a></li>
</ul>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791