Nwlapcug.com


Come creare collegamenti a discesa per un sito Web

Molti web design mode vengono e andare, ma il menu a discesa collegamenti sembra essere qui per rimanere, come essi combinano la facilità d'uso con una semplicità di design che consente di risparmiare spazio e sembra buono. Se sapete come creare fogli di stile con i CSS, creare menu a discesa non è mai stato più semplice.

Istruzioni

1Come creare collegamenti a discesa per un sito Web


Creare una lista non ordinata HTML sulla pagina desiderata in questo modo:
< ul >
Elemento dell'elenco 1 </li > < li >
Elemento dell'elenco 2 </li > < li >
Elemento dell'elenco 3 </li > < li >
</UL >

2Come creare collegamenti a discesa per un sito Web


Nidificare una lista non ordinata seconda all'interno di uno degli elementi dell'elenco. L'idea è per elenco nidificato essere l'elenco a discesa che viene visualizzato quando si passa il mouse o fare clic sull'elemento che lo contiene. Il codice sarà ora simile a questo:
< ul >
Elemento dell'elenco 1 </li > < li >
< li > elenco elemento 2
< ul >
< li > discesa voce 1 </li >
< li > discesa voce 2 </li >
</UL >
</li >
Elemento dell'elenco 3 </li > < li >
</UL >
Si noti che "elemento di elenco 2" non si chiude con il tag </li > fino al termine dell'elenco nidificato.

3Come creare collegamenti a discesa per un sito Web


Sbarazzarsi di elenco automatico formattazione modificando il tuo foglio di stile CSS. Si può avere qualsiasi tipo di formattazione ti piace, ma per questo semplice esempio, potrebbe oscurare solo il punto. Per effettuare questa operazione, modificare il vostro foglio di stile in questo modo:
UL {
list-style: none;
margin: 0;
padding: 0;
}

4Come creare collegamenti a discesa per un sito Web


Fare la lista non ordinata prima vengono visualizzati orizzontalmente e la lista non ordinata nidificata vengono visualizzati verticalmente di sotto di esso, modificando il tuo foglio di stile con il codice riportato di seguito:
li ul {
float: left;
}
ul li ul li {
chiaro: entrambi;
}

5Come creare collegamenti a discesa per un sito Web


Nascondere l'elenco nidificato venga visualizzato automaticamente:
li ul {
display: none;
}

6Come creare collegamenti a discesa per un sito Web


Fare elenco nidificato appaiono quando si passa il mouse sopra l'elemento dell'elenco che lo contiene:
li:hover > ul {
display: block;
}

7

Aggiungere collegamenti all'interno di elementi dell'elenco, e stile nell'elenco per adattarsi con lo schema del tuo sito Web. Pad di ciascuna voce di elenco per rendere le cose più leggibile, creare un bordo attorno a ogni elemento o modificare il colore di sfondo di ogni elemento, quello che funziona per voi.

Consigli & Avvertenze

  • Se non sai come modificare i file HTML o CSS, molte società di web forniscono elenchi a discesa come parte di alcuni dei loro disegni pre-made e temi. È possibile creare un sito web gratis in Blogger.com o Wordpress.com che può avere costruiti nel menu a discesa.