横竖两级分类导航

前端入坑纪 16

得空如此，不更怎行！
最近属于项目空档期，所以时常更新，必然多多益善！
立马就要mother’s day了，依旧提前预祝天下的妈妈们，母亲节快乐！

今天忽然想起了当初刚刚进公司时的面对的一个项目（如题）。现在回忆起来，依旧是“刻苦铭心”啊！
这真没有打错字，刻苦极了。当时，对js的循环什么的都理解不深，就是一愣头青！
所以有多少个div就写了多少个循环，可想而知是多么的“刻苦铭心”了！

今天借着空闲，把这个回忆要抹杀掉，重新写一个，虽然依旧不是很完美，但是起码比以前是好多了！

素素的分级导航

OK，first things first！项目链接

HTML 结构

HTML 结构

这次重复的Div内容太多，贴出来太恐怖了，折叠截个图。详细的进项目里看吧！布局基本就是用float左右，来完成的。注意点应该就是第一个内容的div要设置display：block。不然鼠标滑入，第一次看到会是空的内容。

CSS 结构

        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        html,
        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
            height: 100%;
            background: #fefefe;
            text-align: center;
        }
        
        body {
            border-top: 1px solid #fefefe;
            box-sizing: border-box
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        ul,
        li {
            list-style: none
        }
        
        .mWrp {
            width: 90%;
            min-width: 650px;
            margin: 10% auto;
            border: 1px solid #ccc;
            border-radius: 3px;
            position: relative;
        }
        
        .leftNav {
            float: left;
            width: 80px;
            line-height: 36px;
        }
        
        .leftNav li {
            margin: 6px;
        }
        
        .leftNav li a {
            display: block;
            color: #fff;
            background-color: skyblue;
            transition: all 260ms ease;
            border-radius: 3px;
            font-size: 13px;
        }
        
        .leftNav li a:hover {
            color: #333;
            background-color: lightblue;
        }
        
        .ritDiv {
            display: none;
            width: calc(100% - 80px);
            float: right;
        }
        
        .ritDiv nav a {
            float: left;
            display: block;
            width: 15%;
            margin: 0 0.833%;
            line-height: 36px;
            text-align: center;
            position: relative;
        }
        
        .ritDiv nav a:hover {
            color: skyblue
        }
        
        .ritDiv nav a::after {
            content: "";
            display: block;
            top: 8px;
            right: 0px;
            height: 20px;
            background: #ddd;
            width: 1px;
            position: absolute;
        }
        
        .ritDiv nav a:last-child::after {
            display: none
        }
        
        .ritCont {
            border: 1px solid lightblue;
            margin: 10px;
            border-radius: 2px;
        }
        
        .ritCont div {
            display: none;
        }
        
        .ritCont img {
            width: 40%;
            float: left;
            margin: 3% 5%;
            box-shadow: 1px 1px 6px #666;
        }
        
        .ritCont p {
            float: left;
            text-align: left;
            text-indent: 2rem;
            width: 45%;
            line-height: 160%;
            margin-top: 3%;
            margin-right: 5%;
        }

float 的布局，真要说注意的地方，应该就是，float完，注意要清空浮动。名为 “.clear” 的class就是这么用的！

JS 结构

        // 获取leftNav里的a， 给他们添加对应的数字， 以便后面选取对应的ritDiv设置为显示，其它则隐藏。
        var leftNavas = document.getElementsByClassName("leftNav")[0].getElementsByTagName("a");
        for (var e = 0; e < leftNavas.length; e++) {
            leftNavas[e].setAttribute("idx", e);
            leftNavas[e].onmouseenter = function() {
                var nowIdx = this.getAttribute("idx");
                var ritDiv = document.getElementsByClassName("ritDiv");
                for (var i = 0; i < ritDiv.length; i++) {
                    ritDiv[i].style.display = "none";
                }
                ritDiv[nowIdx].style.display = "block";
            }
        }

        // 给每个右侧的导航ritNav里的的每个a添加对应的idx数字。
        var ritNav = document.getElementsByClassName("ritDiv");
        for (var i = 0; i < ritNav.length; i++) {
            var ritNavas = ritNav[i].getElementsByTagName("a");
            for (var j = 0; j < ritNavas.length; j++) {
                ritNavas[j].setAttribute("idx", j)
            }
        }

        // 当鼠标滑入当前的ritNav里的某个a时，选取这个ritNav同级的ritCont里的对应顺序的div，让它显示，其它隐藏
        for (var s = 0; s < ritNav.length; s++) {
            var ritNavas = ritNav[s].getElementsByTagName("a");
            for (var l = 0; l < ritNavas.length; l++) {
                ritNavas[l].onmouseenter = function() {
                    var targetDivs = this.parentNode.parentNode.getElementsByClassName("ritCont")[0].getElementsByTagName("div");
                    // 这里用到的idx，是之前特地设置过的
                    var aIdx = this.getAttribute("idx");
                    // 先隐藏全部，再显示对应idx的那个div
                    for (var b = 0; b < targetDivs.length; b++) {
                        targetDivs[b].style.display = "none";
                    }
                    targetDivs[aIdx].style.display = "block";
                }
            }
        }

这个效果真心难在循环里，有时候会把自己绕晕！所以大概的意思注解了下，太详细的怕把读者绕晕，也怕自己描述不清。有兴趣的话，大家可以多多尝试，慢慢应该就会懂了。我也是这么过来的......