Tre modi per implementare il menu a discesa di secondo livello nel menu di navigazione in JS

　　Possiamo vedere alcuni menu a discesa di secondo livello utilizzati su grandi siti come Taobao, Sohu e così via, come l'immagine seguente. Allora come si può realizzare il menu a discesa di secondo livello nel menu di navigazione? Di seguito, l'autore condivide l'idea di implementazione.

Ma come si può realizzare qualcosa di simile? In realtà, abbiamo almeno tre modi per farlo, di seguito, allego il codice per farvi riferimento.

1.Usa solo html e css

<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;}
/*Chiave uno: Impostare il menu di secondo livello su display:none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*Chiave due: Quando si passa sopra il menu di secondo livello del menu di primo livello, impostare su display:block;*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Automobile</a>
<ul>
<li><a href="#">Audi</a> </li>
<li><a href="#">Dodge</a></li>
</ul>
</li>
<li><a href="">Telefono</a>
<ul>
<li><a href="#">Xiaomi</a></li>
<li><a href="#">Huawei</a></li>
</ul>
</li>
<li><a href="">Contattaci</a></li>
</ul>
</div>

　　Possiamo vedere che questo metodo è abbastanza buono, garantisce una completa separazione di struttura e presentazione.

2.Usa javasc

<!DOCTYPE htm>
<html lang="en">
<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="#">Pagina iniziale</a></li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Automobile</a>
// Chiave uno: Imposta il programma di esecuzione all'interno del tag di primo livello che dipende dal titolo di secondo livello, this rappresenta questo elemento li -->
<ul>
<li><a href="#">Audi</a> </li>
<li><a href="#">Dodge</a></li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Telefono</a>
<ul>
<li><a href="#">Xiaomi</a></li>
<li><a href="#">Huawei</a></li>
</ul>
</li>
<li><a href="#">Contattaci</a></li>
</ul>
</div> 
script>
function show(li){
var ul=li.getElementsByTagName("ul")[0];
// Chiave due: Cerca il tag ul all'interno dell'oggetto li, poiché il tag di secondo livello ha solo uno, l'indice è 0.
ul.style.display="block";
// Chiave tre: Quando il mouse scorre su li, il display dei tag figli ul è impostato su block
}
function hide(li){
var ul=li.getElementsByTagName("ul")[0];
ul.style.display="none";
// Quarto punto chiave: quando il mouse passa sopra li, il display del suo elemento figlio ul è none
}
/script>

Implementare con JavaScript è piuttosto complicato e la struttura e il comportamento non sono separati in questo caso (anche se è possibile utilizzare DOM in JavaScript per separare la struttura e il comportamento, è molto complicato), non raccomandato.

3. Implementare con jQuery

　　jQuery è una libreria JavaScript, che possiamo scaricare dalla pagina ufficiale di jQuery per ottenere la versione più recente del file della libreria. I file compressi sono utilizzati per i prodotti, mentre i file non compressi sono più comodi per gli sviluppatori per imparare e debuggare. Dopo averli scaricati sul computer, è necessario aggiungere il file della libreria all'html, poiché jQuery è本质上 anche JavaScript, quindi il modo di riferimento è:　　　

<script src="nome_del_percorso"></script>

Il codice per implementare un menu a discesa di secondo livello con jQuery è il seguente:

<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="">Home</a></li>
<li class="navmenu"><a href="">Automobile</a>
<ul>
<li><a href="#">Audi</a> </li>
<li><a href="#">Dodge</a></li>
</ul>
</li>
<li class="navmenu"><a href="">Telefono</a>
<ul>
<li><a href="#">Xiaomi</a></li>
<li><a href="#">Huawei</a></li>
</ul>
</li>
<li><a href="">Contattaci</a></li>
</ul>
</div> 
// Primo punto chiave: includere il file della libreria jQuery.
script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
})
// Secondo punto chiave: utilizzare correttamente la sintassi di jQuery per completare l'azione.
$(function(){
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})
/script>

　Evidentemente, l'uso di jQuery è molto comodo.

L'effetto finale dell'implementazione è il seguente;

Apparirà il menu di secondo livello corrispondente quando il mouse passa sopra il menu di primo livello.

Come ha spiegato l'editor, qui vi mostriamo come implementare il menu a discesa di secondo livello nel menu di navigazione utilizzando tre metodi in JavaScript, speriamo che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'editor risponderà prontamente. Ringraziamo anche tutti i sostenitori del sito Web Yellowscream tutorial!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, appartiene al proprietario del copyright, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base