Nwlapcug.com


Come scrivere uno Script CSS per l'aggiunta di un Menu a discesa

Cascading Style Sheets (CSS) può essere utilizzato per creare menu a discesa senza l'utilizzo di un linguaggio di scripting, come JavaScript. Le voci di menu sono nascosti fino a quando l'utente passa sopra l'elemento superiore del menu. Il resto delle voci del menu apparirà sopra il resto del contenuto della pagina senza spostare il contenuto. Quando fatto correttamente, apparirà il menu se JavaScript è abilitato nel browser web.

Istruzioni

1

Aprire qualsiasi editor di testo come blocco note di Windows.

2

Creare lo stile per la voce di menu digitando le seguenti tre righe.

goccia li.top {font-family: Verdana, Geneva, san-serif

VAI
font-size: 100%
VAI
colore: #FF00FF;}

3

Creare lo stile per le voci di menu aggiuntive digitando le seguenti quattro righe.

Drop. link ul {display: none

VAI
font-family: Verdana, Geneva, san-serif
VAI
dimensione del carattere: 75%
VAI
Color: #0000FF;}

La sezione \"display: nessuno; \" dice per nascondere gli elementi per impostazione predefinita.

4

Digitare. ul:hover link \"#drop {display: block;} \ "al fine di mostrare gli elementi secondari quando l'utente passa sopra la voce di menu.

5

Digitare \"#drop{position:absolute;} \ "per assicurare che il menu a discesa viene visualizzato in cima il contenuto di sotto senza spostare esso.

6

Creare il menu digitando le seguenti sette righe nella sezione body del documento HTML.

< div id = \ "drop\" >
< ul id = \ "head\" >
< classe li = \ "top\" > Top </li >
< classe li = \ "link\" >< href = #\ \"" > 1 elemento < /a >< / li >
< classe li = \ "link\" >< href = #\ \"" > 2 elemento < /a >< / li >
< classe li = \ "link\" >< href = #\ \"" > 3 elemento < /a >< / li >
</UL >< / div >

7

Salvare e chiudere il documento.

Consigli & Avvertenze

  • Il secondo riferimento per questo articolo ti dice a \"View il codice di origine. \" In Firefox, fare clic su \"View Source\" sotto la \"View\" menu in un browser Firefox. In Internet Explorer, fare clic su \"Source\" sotto la \"View\" dal menu.