原生js實現二級導航功能


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js制作二級菜單</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #nav{
            width: 800px;
            height: 50px;
            line-height: 50px;
            margin: 20px auto;
            background-color: darkcyan;
        }
        ul,ol,li{
            list-style: none;
        }
        #nav>ul>li{
            width: 160px;
            text-align: center;
            float: left;
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            text-decoration: underline;
            color: #fff;
        }
        .companyIntroduceUrl{
            display: none;
            width: 100px;
            margin: 0 auto;
            background-color: lightsteelblue;
        }
        .companyIntroduceUrl>li{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首頁</a></li>
        <li onmouseover="onOver(this)" onmouseout="onOut(this)">
            <a href="#">公司介紹</a>
            <ul class="companyIntroduceUrl">
                <li><a href="#">走進我們</a></li>
                <li><a href="#">悠久歷史</a></li>
                <li><a href="#">公司理念</a></li>
                <li><a href="#">經理致辭</a></li>
            </ul>
        </li>
        <li><a href="#">產品展示</a></li>
        <li><a href="#">聯系我們</a></li>
        <li><a href="#">招賢納士</a></li>
    </ul>
</div>


<script src="js/jquery-3.2.1.min.js"></script>
<script>

        function onOver(obj){
            var sub_url=obj.getElementsByTagName("ul")
            sub_url[0].style.display="block";
        }
        function onOut(obj){
            var sub_url=obj.getElementsByTagName("ul")
            sub_url[0].style.display="none";
        }

</script>


</body>
</html>

 二級菜單的機構特點

  二級菜單的結構可以有很多種形式,在本例種采用了<ul>與<li>標簽相結合的方式進行布局,二級菜單的<ul>放在對應的一級菜單<li>標簽里。這是一種比較簡單明了的結構。二級菜單與一級菜單相互對應,相互結合,讓程序員一目了然。

二級菜單的樣式特點

  二級菜單的出現不能影響到其他的標簽,因此二級菜單<ul>標簽只能是“絕對定位”的。要“管住”二級菜單,一級菜單的<li>標簽就只有“相對定位”。這是css樣式中絕對定位與相對定位的經典應用。

getElementsByTagName()函數

  getElementsByTagName()函數的字面意思是"通過標簽名字獲取標簽",函數括號里必須是HTML標簽的名稱。需要注意的是getElementsByTagName函數名字里有個"s",說明它獲取的標簽可能不止一個。實際上,它獲取的是一個標簽的數組,會把制定范圍里的所有同名標簽都獲取到。

  getElementsByTagName的制定范圍完全是由它前面的對象決定的。

  它前面的對象常常有兩種:

  var xy=document.getElementsByTagName("div");

  獲取頁面(document)里面所有的<div>標簽,並裝載在變量xy中。

  在它獲取的眾多標簽中,每個標簽都有自己的編號。按照在HTML里出現的順序,依次是0,1,2...通過類似xy[0]的格式來獲取某個具體的標簽。

  或者

  var x=document.getElementById("big");

  var z=x.getElementByTagName("div");

  表示的是 z 獲的是 x 下所有的 div 標簽

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM