Durante la creazione di un menu verticale per uso nella barra laterale di un sito Web, aggiunta di riquadri a comparsa sottomenu lo rende più facile per i visitatori di navigare attraverso i contenuti. Anziché fare clic su una pagina, quindi fare clic su una pagina secondaria dopo di che, l'utente può sorvolare una pagina nel menu, quindi fare clic sul collegamento che vogliono. È possibile costruire un menu a comparsa in puro codice HTML e fogli di stile CSS (Cascading Style Sheet), che funziona in tutti i browser moderni.

Istruzioni

1

Andare su "Start" sulla barra delle applicazioni Windows e immettere il nome dell'editor di codice preferito o blocco note. Siete pregati di notare che il testo colorato di un editor di codice come Notepad + +, jEdit o BBEdit vi aiuterà con questo progetto.

2

Aprire il file HTML della pagina Web dove si desidera inserire il menu a comparsa. Costruire una lista non ordinata..--questi sembrano elenchi puntati quando non in stile con i CSS..--dove si desidera il menu a comparsa venga visualizzato nel documento. Ecco un esempio:

< ul >

< li >< un href = "#" > Link 1 < /a >< / li >

< li >< un href = "#" > Link 2 < /a >< / li >

< li >< un href = "#" > Link 3 < /a >

<ul>

<li><a href="#">Link A</a></li>

<li><a href="#">Link B</a></li>

<li><a href="#">Link C</a></li>

<li><a href="#">Link D</a></li>

</ul>

</li>

<li><a href="#">Link 4</a></li>

<li><a href="#">Link 5</a></li>

<li><a href="#">Link 6</a></li>

<li><a href="#">Link 7</a></li>

</UL >

Si noti che sopra, una lista non ordinata è incorporato all'interno il primo, o piuttosto un elemento in tale elenco. Quando l'utente posiziona il mouse su "Link 3", il risultato desiderato è per i collegamenti da A D a comparire nel riquadro a comparsa.

3

Trovare il tuo foglio di stile. Questo è il file esterno o un set di tag di "stile < >" dove inserire il codice CSS. Se si dispone di nessuna delle due, quindi aggiungere un insieme di stile"< >" tag tra i tag "< head >" come segue:

< head >

< title > titolo della pagina < / title >

< style type = "text/css" >

< / stile >

< / head >

Scrivere il codice CSS tra i tag di "stile < >" o nel vostro file CSS esterni.

4

Scrivere il codice CSS per applicare uno stile di elenco non ordinato in un menu laterale attraente. A questo punto, non preoccuparti per la parte del riquadro a comparsa del menu. Dare la parte principale del menu una larghezza e ricordarsi di impostare "list-style" su "nessuno" e i margini sinistro e imbottiture a zero, in questo modo:

UL {

Larghezza: 100px;

margin-left: 0;

padding-left: 0;

list-style: none;

background: #555555;

}

5

Stile il vostro link in CSS come questo:

li a {

background: #999999;

colore: #00b5ac;

border-bottom: 1px solid #000000;

Proprietà Text-decoration: none;

display: block;

}

È necessario includere "display: block" per rendere la voce di menu intero highlightable e cliccabili. Rimuovere la sottolineatura del collegamento con "text-decoration: none". Impostare il colore del carattere "colore" e dare le voci di menu di un bordo di colore e fondo di sfondo per lo styling più menu-come.

6

Dare il tuo voci di menu un stato hover. Sulle pagine Web, qualsiasi momento un visitatore del sito passa il mouse sopra qualcosa del genere e modifiche, che è un stato hover. Uso il ": hover" pseudo-classe in questo modo:

li a: hover {

Priorità bassa: #eeeeee;

}

In questo caso, lo sfondo del collegamento cambia in un grigio molto chiaro quando l'utente passa il mouse sopra la voce di menu.

7

Scrivere il tuo CSS per nascondere la parte del riquadro a comparsa del menu. Ecco il codice:

UL > li > ul {

Posizione: assoluta;

sinistra:-1000em;

}

8

Aggiungere questo codice CSS per rendere la parte del riquadro a comparsa del menu vengono visualizzati ogni volta che l'utente passa sopra una voce di menu che contiene un sottomenu:

UL > li:hover ul {

Top: 0;

sinistra: 100px;

}

Modificare "100px" in base alla larghezza della parte principale del menu. In questo modo il riquadro a comparsa non si sovrappongono il menu principale.