jquery左侧导航树菜单 jquery导航下拉菜单

jquery实现导航下拉菜单

• 原生的：
• 用layui

原生的：

html

<div id="my_menu" class="sdmenu">
    <div>

        <span class="menuSpan"><img src="../static/images/configure1x.png" />   配置</span>
        <a href="#"></a>
        <a href="#">系统配置</a>
        <a href="#">链路配置</a>
        <a href="#">设备模板</a>
        <a href="#">触发器</a>
    </div>
    <div class="">
        <span class="menuSpan"><img src="../static/images/debug1x.png" />   调试</span>
        <a href="#">在线调试</a>
        <a href="#">实时报文</a>
        <a href="#">系统日志</a>
    </div>
    <div class="">
        <span class="menuSpan"><img src="../static/images/script1x.png" />   脚本</span>
        <a href="#">全局脚本</a>
        <a href="#">静态脚本</a>
    </div>
    <div class="">
        <span class="menuSpan"><img src="../static/images/upgrade1x.png" />   升级</span>
        <a href="#">后台程序</a>
        <a href="#">南向协议</a>
        <a href="#">北向协议</a>
    </div>
</div>

js

window.onload = function () {
   var menuSpan = document.querySelectorAll(".menuSpan");
     var openDiv = menuSpan[0].parentNode;

     for (var i = 0; i < menuSpan.length; i++) {
         menuSpan[i].onclick = function () {
             var parentDiv = this.parentNode;
             toggleMenu(parentDiv);
             openDiv = parentDiv;
         };
     }

     /*
      * 用来切换菜单折叠和显示状态
      */
     function toggleMenu(obj) {
         var begin = obj.offsetHeight;
         toggleClass(obj, "collapsed");
         var end = obj.offsetHeight;
         obj.style.height = begin + "px";
         move(obj, "height", end, 10, function () {
             obj.style.height = "";
         });
     }
 };

css

div.sdmenu {
    width: 100%;
   
    padding-bottom: 10px;
}
div.sdmenu div {
    overflow: hidden;
    margin: 20px 1px;
}

div.sdmenu div.collapsed {
    height: 25px;
}
div.sdmenu div span {
    display: block;
    overflow: hidden;
    padding: 5px 25px;
    font-weight: bold;
    background: url(../images/menu_down1x.png);
    background-repeat: no-repeat;
    background-position: 200px center;
    cursor: pointer;
   
}
/* 折叠 */
div.sdmenu div.collapsed span {
    background-image: url(../images/menu_right1x.png);
    background-repeat: no-repeat;
    background-position: 200px center;
}
div.sdmenu div a {
    padding: 5px 56px;
    display: block;
}

div.sdmenu div a:hover {
    text-decoration: none;
}

tool.js

function move(obj, attr, target, speed, callback) {
    //关闭上一个定时器
    clearInterval(obj.timer);
    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));
    //判断速度的正负值
    //如果从0 向 800移动，则speed为正
    //如果从800向0移动，则speed为负
    if(current > target) {
        //此时速度应为负值
        speed = -speed;
    }
    //开启一个定时器，用来执行动画效果
    //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    obj.timer = setInterval(function() {
        //获取box1的原来的left值
        var oldValue = parseInt(getStyle(obj, attr));
        //在旧值的基础上增加
        var newValue = oldValue + speed;
        //判断newValue是否大于800
        //从800 向 0移动
        //向左移动时，需要判断newValue是否小于target
        //向右移动时，需要判断newValue是否大于target
        if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        //将新值设置给box1
        obj.style[attr] = newValue + "px";
        //当元素移动到0px时，使其停止执行动画
        if(newValue == target) {
            //达到目标，关闭定时器
            clearInterval(obj.timer);
            //动画执行完毕，调用回调函数
            callback && callback();
        }
    }, 30);
}
/*
 * 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 *         obj 要获取样式的元素
 *         name 要获取的样式名
 */
function getStyle(obj, name) {
    if(window.getComputedStyle) {
        //正常浏览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        //IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
}
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
 * 参数:
 *     obj 要添加class属性的元素
 *  cn 要添加的class值
 *     
 */
function addClass(obj, cn) {
    //检查obj中是否含有cn
    if(!hasClass(obj, cn)) {
        obj.className += " " + cn;
    }
}
/*
 * 判断一个元素中是否含有指定的class属性值
 *     如果有该class，则返回true，没有则返回false
 *     
 */
function hasClass(obj, cn) {
    //判断obj中有没有cn class
    //创建一个正则表达式
    //var reg = /\bb2\b/;
    var reg = new RegExp("\\b" + cn + "\\b");
    return reg.test(obj.className);
}
/*
 * 删除一个元素中的指定的class属性
 */
function removeClass(obj, cn) {
    //创建一个正则表达式
    var reg = new RegExp("\\b" + cn + "\\b");
    //删除class
    obj.className = obj.className.replace(reg, "");
}
/*
 * toggleClass可以用来切换一个类
 *     如果元素中具有该类，则删除
 *     如果元素中没有该类，则添加
 */
function toggleClass(obj, cn) {
    //判断obj中是否含有cn
    if(hasClass(obj, cn)) {
        //有，则删除
        removeClass(obj, cn);
    } else {
        //没有，则添加
        addClass(obj, cn);
    }
}

用layui

修改样式，在父级加一个类，加新的样式覆盖即可
html

//加一个类new-nav覆盖掉原来样式
<ul class="layui-nav layui-nav-tree new-nav" lay-filter="test">
     <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
     <li class="layui-nav-item layui-nav-itemed">
         <a href="javascript:;">默认展开</a>
         <dl class="layui-nav-child">
             <dd><a href="javascript:;">选项1</a></dd>
             <dd><a href="javascript:;">选项2</a></dd>
             <dd><a href="">跳转</a></dd>
         </dl>
     </li>
     <li class="layui-nav-item">
         <a href="javascript:;">解决方案</a>
         <dl class="layui-nav-child">
             <dd><a href="">移动模块</a></dd>
             <dd><a href="">后台模版</a></dd>
             <dd><a href="">电商平台</a></dd>
         </dl>
     </li>
     <li class="layui-nav-item"><a href="">产品</a></li>
     <li class="layui-nav-item"><a href="">大数据</a></li>
 </ul>

css

//加一个new-nav类覆盖掉原来样式
.new-nav{
    background-color: #fff !important;
}
.new-nav .layui-nav-item a{
    color: #333 !important;
}
.new-nav .layui-nav-itemed>a{
    color: #333 !important;
}
.new-nav .layui-nav-itemed>.layui-nav-child{
    background-color: #fff !important;
}