Nwlapcug.com


Codice HTML per i Menu di Pop-Out verticale



È possibile salvare spazio sul tuo sito Web utilizzando il menu di pop. Questi contengono un elenco di opzioni di genitore e come l'utente passa il mouse sopra l'elemento, tutti gli elementi di menu figlio all'interno di appaiano nella pagina. Questo tipo di menu è possibile su un file HTML autonomo, o come parte di un sistema di gestione dei contenuti aggiungendo la codifica per il foglio di stile CSS principale di CSS.

Creare il foglio di stile

Se si desidera il menu andare su un file HTML autonomo, è necessario effettuare uno spazio tra < head > e < / head > Tag dove andrà il codice CSS. Digitare quanto segue nel file:

< style type = "text/css" >

< / stile >

Lo spazio tra questi due tag è il foglio di stile. Se si utilizza un file CSS separato, aggiungere quanto segue da qualche parte tra i tag head:

< LINK href="style.css" rel = "stylesheet" type = "text/css" >
Quindi creare un file denominato "Style. CSS," che è il tuo foglio di stile. Tenere il foglio di stile nella stessa directory del file HTML principale.

Creazione del Menu

È necessario creare un tag contenente < div > per entrare nel menu. Aggiungere quanto segue alla pagina HTML nella posizione che si desidera il menu di andare:

< div id = menu >
< / div >

È quindi necessario definire il separatore di menu. Aggiungere il codice seguente al foglio di stile:

menu () {

Larghezza: 200px;
}

Aggiungere a questa voce qualsiasi altri CSS styling si desidera il divisore contenente avere - per esempio, un colore di sfondo, bordi e dimensioni diverse.

Markup HTML

Aggiungere il codice per il menu stesso. Il menu verrà utilizzato un elenco non ordinato: < ul >. Aggiungere il seguente codice tra i tag < div > per il vostro menu:

< ul >
< li > voce di Menu 1
< ul >
< li >< un href = "#" > voce di sottomenu 1 < /a >< / li >
< li >< un href = "#" > voce di sottomenu 2 < /a >< / li >
</UL >
</li >
</UL >

Si noti che il sub-menu < ul > tag nidificati all'interno di < li > e </li > Tag per "Voce di Menu 1." Questo dice al browser che il sotto-menu è contenuto sotto tale voce di menu. Adattare il codice sopra riportato per rappresentare il proprio menu, aggiungendo il proprio URL e ulteriori sottomenu, secondo necessità.

Stile CSS

A questo punto, verrà visualizzato il menu ma il sotto-menu sarà esposta in ogni momento. È necessario utilizzare l'attributo "display" per nascondere e rivelare il sotto-menu. Aggiungere quanto segue al foglio di stile:

menu li {posizione: relativo;} menu ul ul {

Posizione: assoluta;
Top: 0;
sinistra: 100%;
Larghezza: 100px;
}
div #menu ul ul {display: none;}
div #menu ul li:hover ul {display: block;}

Salvare tutti i file. Il vostro menu di pop-out è ora pronto.