文章简介

很多前端的同学在最初学习html/css/javascript的时候，都会去模仿学习各大名站，例如淘宝京东等电商网站，今天这是我前不久做的仿京东的大菜单，我觉得做的很满意(样式上)，强迫症表示看得很爽0.0，于是决定提供出来，想用的拿去吧。

图片预览

预览&下载

点击预览? ? ?点击下载

使用&箴言

这个菜单没有使用任何的js,仅仅通过一行代码，即可实现菜单的显示隐藏

1
2
3
.sidenav ul li:hover > .secmenubox{
    display:block;
}

当然，也可以通过原生的js来实现，代码如下，很容易看懂0.0，js部分在源代码中注释掉了，大家可以进行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = secmenu;
function secmenu(){
    var nav = document.getElementsByClassName('sidenav')[0];
    var li = nav.getElementsByTagName('li');
    for(var i=0;i<li.length;i++){

        li[i].onmouseover = function(){
            var secmenubox = this.getElementsByClassName('secmenubox')[0];
            secmenubox.style.display = "block";
        }
        li[i].onmouseout = function(){
            var secmenubox = this.getElementsByClassName('secmenubox')[0];
            secmenubox.style.display = "none";
        }
    }
}