Heim > Artikel > Web-Frontend > Drei Möglichkeiten, das sekundäre Dropdown-Menü im Navigationsmenü in JS zu implementieren

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

高洛峰Original: 2016-12-08 13:18:591333Durchsuche

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.

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>

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>

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>

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>

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

Das heißt, wenn die Maus über das Menü der ersten Ebene bewegt wird, wird das entsprechende Menü der zweiten Ebene angezeigt erscheinen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Diskussion über gängige Methoden der JavaScript-Ereignisbindung und Analyse ihrer Vor- und NachteileNächster Artikel：Eine kurze Diskussion über gängige Methoden der JavaScript-Ereignisbindung und Analyse ihrer Vor- und Nachteile

In Verbindung stehende Artikel

Mehr sehen