Drei Möglichkeiten, das sekundäre Dropdown-Menü im Navigationsmenü in JS zu implementieren-js-Tutorial-php.cn

Drei Möglichkeiten, das sekundäre Dropdown-Menü im Navigationsmenü in JS zu implementieren

高洛峰

Freigeben： 2016-12-08 13:18:59

Original

1358 Leute haben es durchsucht

Wir können einige sekundäre Dropdown-Menüs sehen, die auf großen Websites wie Taobao und Sohu verwendet werden, wie im Bild unten. Wie implementiert man also das sekundäre Dropdown-Menü in der Navigationsmenüleiste? Der unten stehende Herausgeber teilt Ihnen die Umsetzungsideen mit.

Drei Möglichkeiten, das sekundäre Dropdown-Menü im Navigationsmenü in JS zu implementieren

Aber wie erreicht man ähnliche Bilder? Tatsächlich haben wir mindestens drei Möglichkeiten, dies zu erreichen. Nachfolgend füge ich den Code als Referenz bei.

Nur HTML und CSS verwenden

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*关键一：将二级菜单设置为display：none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">汽车</a>
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li><a href="">手机</a>
<ul>
<li><a href="#">小米</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="">联系我们</a></li>
</ul>
</div>

Nach dem Login kopieren

Wir sehen, dass diese Methode besser ist, sie gewährleistet die vollständige Trennung von Struktur und Leistung.

2. Verwenden Sie Javasc

<!DOCTYPE htm>
<html>
<head >
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display:none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">汽车</a>
<!-- 关键一：在二级标题从属的一级标题标签内设置时间执行程序，this代表的时这个li元素 -->
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">手机</a>
<ul>
<li><a href="#">小米</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div> 
script>
function show(li){
var ul=li.getElementsByTagName("ul")[0];
// 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
ul.style.display="block";
// 关键三：当鼠标划过li时，其子元素ul标签的display为block
}
function hide(li){
var ul=li.getElementsByTagName("ul")[0];
ul.style.display="none";
// 关键四：当鼠标划出li时，其子元素ul的display为none
}
/script>

Nach dem Login kopieren

Die Implementierung mit Javascript ist schwieriger und die Struktur und das Verhalten sind hier nicht getrennt (obwohl Sie versuchen können, es in JavaScript zu trennen). die Struktur und das Verhalten, aber es ist sehr umständlich), nicht zu empfehlen.

3. Verwenden Sie jQuery zur Implementierung

jQuery ist eine Javascript-Bibliothek. Wir können die neueste Version der Bibliotheksdatei auf der offiziellen Website von jQuery herunterladen. Die Dokumentation ist für Entwickler leicht zu erlernen und zu debuggen. Nach dem Herunterladen auf den Computer müssen Sie die Bibliotheksdatei in HTML referenzieren. Da es sich bei jQuery im Wesentlichen um JavaScript handelt, lautet die Referenzmethode:

<script src="路径名称"></script>

Nach dem Login kopieren

Verwenden Sie jQuery Der Code zum Implementieren des sekundären Dropdown-Menüs lautet wie folgt:

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li class="navmenu"><a href="">汽车</a>
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li class="navmenu"><a href="">手机</a>
<ul>
<li><a href="#">小米</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="">联系我们</a></li>
</ul>
</div> 
<!-- 关键一：引入jQuery库文件 -->
script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
})
// 关键二：正确使用jQuey的语法完成行为。
$(function(){
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})
/script>

Nach dem Login kopieren

Offensichtlich ist die Verwendung von jQuery sehr praktisch.

Der endgültige Implementierungseffekt ist wie folgt:

Drei Möglichkeiten, das sekundäre Dropdown-Menü im Navigationsmenü in JS zu implementieren