Diversi metodi per implementare menu a discesa di secondo livello nei menu di navigazione JS

I recently sorted out three ways to implement the secondary dropdown menu in the navigation menu using JS, which is convenient for application in projects.

　How to implement the secondary dropdown menu in the navigation menu bar?

　　We can see some secondary dropdown menus used on some large websites such as Taobao, Sogou, etc., like the following picture.

But how to achieve a similar image? In fact, we have at least three ways to achieve this, and below, I attach the code for everyone to refer to.

1.Only use html and 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;}
/*First key: Set the secondary menu to display:none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*Second key: Set display to block when hovering over the primary menu of the secondary menu.*/
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 è buono, assicura che la struttura e la presentazione siano completamente separate.

2. Implementare con JavaScript

<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 onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Automobile</a>
  <!-- Critico uno: impostare il programma di tempo all'interno del tag dell'intestazione 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>

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

3. Implementare con jQuery

　　jQuery è una libreria JavaScript, possiamo scaricare l'ultima versione della libreria dal sito ufficiale di jQuery, tra cui i file compressi sono utilizzati per i prodotti, i file compressi sono utili per gli sviluppatori per imparare e debuggare. Dopo averli scaricati sul computer, è necessario aggiungere il file della libreria all'html, poiché jQuery è本质上 anche JavaScript, il modo di riferimento è:

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>

　Evidentemente, l'uso di jQuery è molto comodo.

L'effetto finale di implementazione è il seguente;

Quando il mouse passa sopra il menu di primo livello, appare il menu di secondo livello corrispondente.

　Grazie per aver letto, spero di essere stato d'aiuto, grazie per il supporto al nostro sito!

Manuale di base