版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38147456/article/details/85759273
简单多级菜单导航实现js
简单多级菜单导航插件,觉得不实用的话可以联系我修改哦
js代码如下:
; (function ($, window, document, undefined) {
$.fn.setMenu = function (options) {
var defaults = {
event: "click", //触发响应事件
activeClass: 'on',//开启菜单加的类名
menuBox:'ul',
menuList:'li'
};
var options = $.extend({}, defaults, options);
var $this = $(this); //当然响应事件对象
//功能代码部分
//初始化
$(this).find(options.menuBox).hide();
//绑定事件
$this.find(options.menuList).on(options.event, function (e) {
if ($(this).hasClass(options.activeClass)) {
$(this).removeClass(options.activeClass).children(options.menuBox).slideUp();
} else {
$(this).addClass(options.activeClass).children(options.menuBox).slideDown();
$(this).siblings(options.menuList).removeClass(options.activeClass).find(options.menuBox).slideUp().find(options.menuList).removeClass(options.activeClass);
}
//阻止事件冒泡
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
});
}
})(jQuery, window, document);
//调用
$(function(){
$('#menu').setMenu();
})
很简单,感觉没什么好解释的,目前支持自定义:
event: "click", //触发响应事件
activeClass: 'on',//开启菜单加的类名
menuBox:'ul',//每级菜单盒子
menuList:'li'//每行菜单
我的css:css自己写哈,我给个参考,每级可以设不同的类名,设不同的样式,打开的菜单可以加on类名或者自定义的activeClass设置。
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li {
position: relative;
padding-left: 20px;
}
li:before {
content: '>';
transition: all .3s;
display: inline-block;
}
li.on:before {
transform: rotate(90deg);
}
#menu>.on{
background: #eee;
}
.sec-menu>.on{
background: #ddd;
}
.third-menu>.on{
background: #ddd;
}
html:
<ul id="menu">
<li>
一级菜单1
<ul class="sec-menu">
<li>二级菜单1
<ul class="third-menu">
<li>三级菜单1
<ul>
<li>4级菜单1</li>
<li>4级菜单1</li>
<li>4级菜单1</li>
<li>4级菜单1</li>
<li>4级菜单1</li>
</ul>
</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单2
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单3
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
一级菜单2
<ul class="sec-menu">
<li>二级菜单1
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单2
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单3
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
一级菜单3
<ul class="sec-menu">
<li>二级菜单1
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li class="sec-menu">二级菜单2
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li class="sec-menu">二级菜单3
<ul class="third-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
<li>三级菜单4</li>
<li>三级菜单5</li>
</ul>
</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>一级菜单4</li>
<li>一级菜单5</li>
</ul>
最后,记得引jq噢。