实现电商菜单切换效果

实现如下菜单效果

源码

屏幕快照 2017-05-20 下午5.47.54.png

第一步 先实现布局

<div class="wrap" id="menu">
        <ul>
            <li data-id="a">
                <span>家用电器</span>
            </li>
            <li data-id="b">
                <span>手机/运营商/数码</span>
            </li>
            <li data-id="c">
                <span>电脑办公</span>
            </li>
            <li data-id="d">
                <span>家居/家具/家装/厨具</span>
            </li>
            <li data-id="e">
                <span>男装/女装/童装/内衣</span>
            </li>
            <li data-id="e">
                <span>个户化妆/清洁用品/宠物</span>
            </li>
            <li data-id="f">
                <span>鞋靴/箱包/珠宝/奢侈品</span>
            </li>
            <li data-id="g">
                <span>运动/户外/钟表</span>
            </li>
            <li data-id="h">
                <span>汽车/汽车用品</span>
            </li>
            <li data-id="i">
                <span>女婴/玩具乐器</span>
            </li>
            <li data-id="j">
                <span>食品/酒类/生鲜/特产</span>
            </li>
            <li data-id="k">
                <span>医疗保健</span>
            </li>
        </ul>
</div>

左边栏是一个列表，我们就用ul将这个列表所有信息都列出来,得到下面的效果

屏幕快照 2017-05-20 下午5.57.49.png

我们开始添加css样式来实现左边栏的样式

.wrap{
    position: relative;
    width: 200px;
    top: 50px;
    left: 50px;
}
ul{
    padding: 15px 0;
    margin: 9px 0;
    list-style: none;
    background-color: #6c6669;
    color: #fff;
    border-right-width: 0;
}
li{
    display: block;
    height: 30px;
    line-height: 30px;
    padding-left: 12px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
}
li.active{
    background: #999395;
}
li span:hover{
    color: #c81623;
}

这里我们最外层的div设置div是相对定位，因为等会我们的右边的详细信息会通过设置绝对定位，外层div是相对div，内层的div相对外层的div进行绝对定位，这样实现布局的效果

<div id="sub" class="">
           <div id="a" class="sub_content ">
               <dl>
                   <dt>
                       <a href="#">电视<i>></i></a>
                   </dt>
                   <dd>
                       <a href="#">合资品牌</a>
                       <a href="#">国产品牌</a>
                       <a href="#">互联网品牌</a>
                   </dd>
               </dl>
               <dl>
                   <dt>
                       <a href="#">空调<i>></i></a>
                   </dt>
                   <dd>
                       <a href="#">壁挂式空调</a>
                       <a href="#">柜式空调</a>
                       <a href="#">中央空调</a>
                       <a href="#">空调配件</a>
                   </dd>
               </dl>
               <dl>
                   <dt>
                       <a href="#">洗衣机<i>></i></a>
                   </dt>
                   <dd>
                       <a href="#">滚筒洗衣机</a>
                       <a href="#">洗烘一体机</a>
                       <a href="#">波轮洗衣机</a>
                       <a href="#">迷你洗衣机</a>
                       <a href="#">洗衣机配件</a>
                   </dd>
               </dl>
               <dl>
                   <dt>
                       <a href="#">冰箱<i>></i></a>
                   </dt>
                   <dd>
                       <a href="#">对门</a>
                       <a href="#">对开门</a>
                       <a href="#">三门</a>
                       <a href="#">双门</a>
                       <a href="#">冷柜/冰吧</a>
                       <a href="#">酒柜</a>
                       <a href="#">冰箱配件</a>
                   </dd>
               </dl>
           </div>

添加上右边详细菜单的div，这里因为是一个大类后面多个小类，使用dt和dd的语义化标签，更好,在添加上布局样式

.none{
    display: none;
}
#sub{
    width: 600px;
    position: absolute;
    border: 1px solid #f7f7f7;
    background: #f7f7f7;
    box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
    left: 200px;
    top: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
}
.sub_content a{
    font-size: 12px;
    color: #666;
    text-decoration: none
}
.sub_content dd a{
    border-left: 1px solid #e0e0e0;
    padding: 0 10px;
    margin: 4px 0;
}
.sub_content dl {
    overflow: hidden;
}
.sub_content dt{
    float: left;
    width: 70px;
    font-weight: bold;
    clear: left;
    position: relative;
}
.sub_content dd{
    float: left;
    margin-left: 5px;
    border-top: 1px solid #eee;
    margin-bottom: 5px;
}
.sub_content dt i{
    width: 4px;
    height: 14px;
    font: 400 9px/14px consolas;
    position: absolute;
    right: 5px;
    top: 5px;
}

屏幕快照 2017-05-20 下午6.17.48.png

这里的sub定位就是绝对定位，这样实现贴合左边布局显示成功，这里的小括号使用了一个i标签，同时这个i标签,i相对于外层的dt进行了定位，同时这里设置的none是为了隐藏右边，会通过js动态控制添加的class，同时li下的active也是通过js动态添加。

这里的js代码已经写了详细的注释，大家可以下源码，在本地自己打开看看

$(document).ready(function(){
    var sub = $('#sub');       //jquey获取页面sub元素 sub元素为右侧子菜单的div

    var activeRow;              //定义变量 鼠标动态放置的左侧menu行
    var activeMenu;             //定义变量 右侧动态展示的子菜单

    var timer;                      //设置变量  让鼠标移动放置菜单时 有一个延时
    var mouseInsub = false;         //定于变量  鼠标是否在右侧子菜单上放置

    //这里通过监听鼠标是否在右侧子菜单设置 mouseInsub 是为true和false
    sub.on('mouseenter',function(e){
        mouseInsub = true;
    }).on('mouseleave',function(e){
        mouseInsub = false;
    })


    $('#menu')                           //menu是最外层的div，这里只要鼠标移至这个div下面就开始监听 并进行一系列控制
        .on('mouseenter',function(e){       
            sub.removeClass('none');     //鼠标进入menu时就移除sub最外层的隐藏控制，sub用了两层控制是否显示和隐藏，可在html中看到两个none
        })
        .on('mouseleave',function(e){
            sub.addClass('none');        //鼠标移出menu添加none 隐藏sub

            //这里判断是否鼠标正放在某个菜单上，是的话移出已经放上去的添加的class效果，并设置activeRow为空
            if(activeRow){
                activeRow.removeClass('active');
                activeRow = null;
            }

            //同理这里判断是否放在子菜单上
            if(activeMenu){
                activeMenu.addClass('none');
                activeMenu = null;
            }
        })
        //通过监听li的方式，使不必要每个li都写触发函数，这里监听li，在通过e找到当前鼠标所放的具体是哪个目标li
        .on('mouseenter','li',function(e){
            //如果鼠标之前没有放在哪个菜单上执行if里面的操作
            if(!activeRow){
                activeRow = $(e.target).addClass('active');     //给activeRow赋值为当前鼠标放上去的菜单
                activeMenu = $('#' + activeRow.data('id'));    //这里取到html页面上设置data-id的值，对应sub下的id，可看html
                activeMenu.removeClass('none');
                return          //因为鼠标之前没有放在哪个菜单栏上，添加效果后，直接返回，不需要进行下面操作
            }
            //这里的timer添加判断，是为了只执行鼠标放上菜单的最后一次操作，不然划过几个菜单到目标菜单，之前的子菜单都会闪现
            //这里添加后clear定时函数，让之前划过的不在执行，只执行最后停留的那个方法
            if(timer){
                clearTimeout(timer);    
            }

            //定时函数，让鼠标放上过300毫秒在出现效果
            timer = setTimeout(function(){
                //这里判断鼠标是否爱子菜单，右侧菜单上，如果在，直接return出去，不用执行其他操作了，不然则继续
                if(mouseInsub){
                    return
                }
                //如果鼠标在移动来之前放在其他菜单上，需要清除这些，加一个if判断，
                //因为不加判断直接写在外面，因为settime的原因可能报错，大家可以试试，但是不影响使用
                if(activeRow){
                    activeRow.removeClass('active');
                    activeMenu.addClass('none');    
                }   

                //重新赋值，显示菜单的效果
                activeRow = $(e.target);
                activeRow.addClass('active');

                activeMenu = $('#' + activeRow.data('id'));
                activeMenu.removeClass('none');

                //最后将定时器设置为空
                timer = null;
            },300)

        })
})