js導航欄 - iriliguo－IT工程師數位筆記本

文章出處

此法與jquery導航欄效果相同
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        a {
            text-decoration: none;
        }
        li{
            list-style: none;
            cursor: pointer;
        }
        /*總樣式*/

        .wrap {
            width: 100%;
            height:46px;
            line-height:45px;
            background-color:pink;
            position: relative;
        }/*整個導航欄的樣式*/

        .first {
            float: left;
            height:46px;
            width: 10%;
            text-align: center;
            border-right:1px solid lightpink;
        }/*一級導航的樣式*/
        #cart {
            float: right;
            margin-right: 1%;
        }
        #food {
            border-left: 1px solid lightpink;

        }

        ul .first .second, ul .first .three, ul .first .four, ul .first .five {
            border:1px solid pink;
            border-top: none;/*實現一二級導航無縫顯示*/
            position: absolute;
            width: 40.3%;
            display: none;
            background-color:whitesmoke;

        }/*二級導航樣式（絕對定位+給定元素寬度實現二級導航寬過一級導航）*/

        ul .first .second, ul .first .three, ul .first .four, ul .first .five{
            left: 0;
        }


        .first:hover{
            background-color:whitesmoke;
        }


        @media (max-width: 600px) {
            .first {
                width: 50px;
            }
            ul .first .second, ul .first .three, ul .first .four, ul .first .five{
                width: 203px;
            }
        }/*解決屏幕變小樣式變形問題*/
    </style>
    <script>

    function subMenu(obj) {
        obj.nextSibling.nextSibling.style.display = "block";
        var a = document.getElementsByClassName("second");
        for (var i = 0; i < a.length; i++) {
            a[i].onmouseover = function () {
                /*document.body.childNodes.item(0)=document.body.childNodes[0],a[i]=a.item(i)兩者效果相同*/
                this.style.display = "block";
            }

        }
    }
        function hideMenu(obj) {
            var a = document.getElementsByClassName("second");
            obj.nextSibling.nextSibling.style.display = "none";
            for (var i = 0; i < a.length; i++) {
                a[i].onmouseout = function () {
                    this.style.display = "none";
                }

            }

        }


    </script>
</head>
<body>
<div class="wrap">
   
        <ul>
            <li class="first" id="food" >
                <h3 onmouseover="subMenu(this)"  onmouseout="hideMenu(this)">美食</h3>
                <div class="second">
                    <p>chapter one</p>
                </div>

            </li>
            <li class="first" id="movie">
                <h3 onmouseover="subMenu(this)"  onmouseout="hideMenu(this)">電影</h3>
                <div class="second three">
                    <p>chapter two</p>
                </div>
            </li>
            <li class="first" id="travel">
                <h3 onmouseover="subMenu(this)"  onmouseout="hideMenu(this)">旅游</h3>
                <div class="second four">
                    <p>chapter three</p>
                </div>
            </li>
            <li class="first" id="hotel">
                <h3 onmouseover="subMenu(this)"  onmouseout="hideMenu(this)">酒店</h3>
                <div class="second five">
                    <p>chapter four</p>
                </div>
            </li>
        </ul>
        <div id="cart">
            <h3>購物車</h3></div>
    </div>

</body>
</html>