來，搞個側欄導航

火雲邪神發表於2018-08-04

這麼大的太陽，你耶不耶！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .leftNav {
            width: 100px;
            height: auto;
            border: 1px #ddd solid;
            float: left;
            position: relative;
            z-index: 999999;
        }

        .leftNav div {
            width: 100px;
            height: 100px;
            background: rgb(97, 91, 91);
            font-size: 25px;
            color: #fff;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px #ddd solid;
        }

        .leftNav div:hover,
        .leftNav div.active {
            background: #fd7722;
            cursor: pointer;
        }

        .leftNav div:last-child {
            border: none !important;
        }

        .rightCont {
            width: 150px;
            height: 506px;
            background: #000;
            color: #fff;
            text-align: center;
            float: left;
            position: relative;
            /* display: none; */
            left: -506px;
            transition: all .4s;
        }

        .rightCont>div {
            height: 506px;
            width: 150px;
            background: #000;
            position: absolute;
            top: 0;
        }

        .rightCont>div {
            display: none;
        }

        .rightCont>div.show {
            display: block !important;
        }

        div {
            transition: all .9;
        }

        #ta:hover .rightCont {
            left: 0;
        }
    </style>
</head>

<body>
    <div id="ta">
        <div class="leftNav" id="leftNav">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <div class="rightCont" id="rightCont">
            <div class="show">cont1</div>
            <div>cont2</div>
            <div>cont3</div>
            <div>cont4</div>
            <div>cont5</div>
        </div>
    </div>

    <script>
        new function () {
            var tabes = function () {
                return {
                    tabLeft: function (x, y) {
                        for (var i = 0; i < x.length; i++) {
                            x[i].index = i;
                            x[i].onmouseover = function () {
                                for (var i = 0; i < x.length; i++) {
                                    x[i].className = '';
                                    y[i].className = '';
                                }
                                this.className = 'active';
                                y[this.index].className = 'show';
                            }
                        }
                    }
                }
            }
            tabes().tabLeft(
                window.leftNav.getElementsByTagName('div'),
                window.rightCont.getElementsByTagName('div')
            );
        }
    </script>
</body>

</html>
複製程式碼

相關文章