March 14
È possibile risparmiare spazio sul sito web utilizzando i menu a comparsa. Questi contengono una lista di opzioni genitore e come l'utente si libra il suo mouse sulla voce, tutte le voci di menu figlio appaiono all'interno della pagina. Questo tipo di menu può essere realizzato su un file HTML stand-alone o come parte di un sistema di gestione dei contenuti aggiungendo la codifica CSS al foglio di stile CSS principale.
Se si desidera che il menu per andare su un file HTML stand-alone, è necessario creare uno spazio tra i tag <head> e </ head> tag in cui il codice CSS andrà. Digitare il seguente nel file:
<Style type = "text / css">
</ Style>
Lo spazio tra questi due tag è il tuo foglio di stile. Se si utilizza un file CSS separato, aggiungere il seguente da qualche parte tra i tag head:
<Link href = "style.css" rel = "stylesheet" type = "text / css">
Quindi creare un file chiamato "style.css", che è il foglio di stile. Mantenere il foglio di stile nella stessa directory del file HTML principale.
È necessario creare un tag contenente <div> per il menu andare in. Aggiungere la seguente alla tua pagina HTML nella posizione che si desidera il menu per andare:
<Div id = Menu>
</ Div>
È quindi necessario definire il divisorio menu. Aggiungere il seguente codice al foglio di stile:
Menu {
width: 200px;
}
Aggiungere a questa voce qualsiasi altro stile CSS si desidera il divisore contenente per avere - per esempio, un colore di sfondo, bordi, o diverso dimensionamento.
Aggiungere il codice per il menu stesso. Il menu utilizzerà una lista non ordinata: <ul>. Aggiungere il seguente codice tra i tag <div> per il vostro menu:
<Ul>
<Li> Voce di menu 1
<Ul>
<Li> <a href="#"> voce di sottomenu 1 </a> </ li>
<Li> <a href="#"> voce di sottomenu 2 </a> </ li>
</ Ul>
</ Li>
</ Ul>
Si noti che <ul> tag del sottomenu sono annidati all'interno del <li> e </ li> tag per "Voce di menu 1." Questo dice al browser che il sotto-menu è contenuta in quella voce di menu. Adattare il codice precedente per rappresentare il proprio menu, aggiungere i propri URL e ulteriori sottomenu, se necessario.
A questo punto, il menu appare ma il sotto-menu sarà in mostra in ogni momento. È necessario utilizzare l'attributo "schermo" per nascondere e rivelare il sottomenu. Aggiungere la seguente al tuo foglio di stile:
menù li {position: relative;} menù ul ul {
position: absolute;
top: 0;
sinistra: 100%;
width: 100px;
}
div # menù ul ul {display: none;}
div # menù ul li: hover ul {display: block;}
Salvare tutti i file. Il menu pop-out è pronto.