Per realizzare un menu a 1 livello, ci sono molte soluzioni. È possibile utilizzare i tag UL e LI per racchiudere elementi di menu. Oppure puoi anche creare un tag div, al suo interno c'è un elenco di elementi di menu.

Il risultato di questo articolo avrà la seguente interfaccia:

Nota : il menu sarà costituito da collegamenti, quindi dobbiamo utilizzare il tag a per allegare collegamenti a ciascuno dei suoi elementi.

Crea HTML per menu a 1 livello

Sceglierò la soluzione è creare un tag div per avvolgere i menu.

 <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div>

Ora ho solo bisogno di modellare il CSS per questo HTML per ottenere il risultato desiderato.

Aggiungi CSS per il menu di 1 livello

Passaggio 1 : voglio che lo sfondo del menu sia blu, quindi scriverò CSS per il tag div circostante.

 .menu{ background: #333 }

Passaggio 2 : crea un carattere bianco per i menu. Aggiungi uno spazio bianco e aumenta la spaziatura tra i menu.

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; }

Sembra molto meglio, vero? Ora voglio creare un effetto spostando il mouse sui menu, lo sfondo cambierà in bianco e il colore del testo cambierà in blu.

Per creare CSS per il movimento del mouse, utilizziamo la proprietà CSS :hover .

 .menu a:hover{ color: #333; background: #fdfdfd; }

Scegli i tag UL e LI per creare un menu a 1 livello

Questa soluzione, la struttura HTML sarà un po' complicata, ma in seguito se vuoi aggiungere dei sottomenu, è molto più semplice.

La struttura HTML sarà simile a questa :

 <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul>

Passaggio 1 : per impostazione predefinita, il tag ul avrà riempimento e margine CSS. Pertanto, dovremo ripristinare per visualizzare il menu come la parte 1. Inoltre, non dimentichiamo di aggiungere uno sfondo ad esso.

 .menu{ margin: 0px; padding: 0px; background: #333 }

Passaggio 2 : poiché il tag li viene visualizzato come un blocco, uno consiste nel convertirlo in inline, l'altro nell'usare float per spostarlo da un lato. Dovremmo anche rimuovere i punti usando list-style:none .

Userò float.

 .menu li{ float:left; list-style: none }

Oh, sembra che lo sfondo sia scomparso. Il motivo è che abbiamo usato float:left per i tag li , quindi l'altezza del menu non dipenderà più dal tag li . Aggiungiamo la proprietà overflow:hidden a .menu e questo lo risolverà.

 .menu{ margin: 0px; padding: 0px; background: #333; overflow: hidden }

Passaggio 3 : ora dobbiamo solo modellare un tag come la parte 1.

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; } .menu a:hover{ color: #333; background: #fff; }

I risultati sono stati come previsto.

Quindi, ho completato il tutorial su come creare un menu a 1 livello con HTML e CSS semplici. In questo articolo, voglio che tu eserciti le tue abilità nella gestione di ogni situazione durante la creazione di un menu. Successivamente incontrerai molti tipi di menu più complessi.