实现电商菜单切换效果

实现如下菜单效果

源码

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

第一步先实现布局


        
            
                家用电器
            
            
                手机/运营商/数码
            
            
                电脑办公
            
            
                家居/家具/家装/厨具
            
            
                男装/女装/童装/内衣
            
            
                个户化妆/清洁用品/宠物
            
            
                鞋靴/箱包/珠宝/奢侈品
            
            
                运动/户外/钟表
            
            
                汽车/汽车用品
            
            
                女婴/玩具乐器
            
            
                食品/酒类/生鲜/特产
            
            
                医疗保健

左边栏是一个列表，我们就用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，这里因为是一个大类后面多个小类，使用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)

        })
})

实现电商菜单切换效果

实现如下菜单效果

第一步 先实现布局

你可能感兴趣的:(实现电商菜单切换效果)

第一步先实现布局