October 16
Pulire sito web design porta ad un sito più facilmente comprensibile in generale. Un sito ingombra confonde i visitatori e riduce click-through. Mantenere i menu pulito da rimboccare opzioni di navigazione complesse o lunghe in sottomenu che appaiono solo quando un visitatore si sofferma il suo cursore su un pulsante menu principale. Al passaggio del mouse, il sottomenu scivolerà fuori dal pulsante principale automaticamente e fornire al visitatore con una moltitudine di opzioni di collegamento.
1 Aprire il file HTML in Blocco note o il vostro editor di testo preferito. Aggiungere questo codice al foglio di stile CSS che passa i controlli al menu:
ul # navlist {font-family: sans-serif; }
ul # navlist un
{
font-weight: bold;
text-decoration: none;
}
ul # navlist, ul # navlist ul, ul # navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul # navlist li {float: left; }
ul # navlist li a
{
colore: #FFFFFF;
background-color: # 003366;
padding: 3px;
border: 1px fin #ffffff;
}
ul # navlist li a: hover
{
color: # ffff00;
background-color: # 003366;
}
ul # navlist li a: attiva
{
colore: #CCCCCC;
background-color: # 003366;
border: 1px #ffffff inserto;
}
ul # subnavlist {display: none; }
ul # subnavlist li {float: none; }
ul # subnavlist li a
{
padding: 0px;
margin: 0px;
}
ul # navlist li: hover ul # subnavlist
{
blocco di visualizzazione;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul # navlist li: hover ul # subnavlist li a
{
blocco di visualizzazione;
width: 10em;
border: none;
padding: 2px;
}
ul # navlist li: hover ul # subnavlist li a: before {content: ">>"; }
2 Sostituire "sans-serif" con la vostra scelta di carattere desiderato. Sostituire "#FFFFFF" con il codice colore desiderato per il testo sui pulsanti principali del menu. Sostituire "# 003366" con il codice colore di sfondo desiderato per i pulsanti del menu principale e al codice colore di sfondo per il sottomenu. Sostituire "# FFFF00" con il codice colore desiderato per tutto il testo e titoli quando un visitatore passa un cursore su di loro. Sostituire "#CCCCCC" con il codice colore desiderato per il testo sul sottomenu. Utilizzare la tabella di colore-codice esadecimale si trovano in Risorse.
3 Aggiungere questo codice tra i tag body del documento HTML:
<Div id = "navcontainer">
<Ul id = "navlist">
<Li id = "attivo">
<a href="http://www.mainmenu1.com" id="current"> Menu principale Una </a>
<Ul id = "subnavlist">
<Li id = "subactive">
<a href="http://www.subitem1.com" id="subcurrent"> Sottovoce Uno </a> </ li>
<Li> <a href="Subitem"> http://www.subitem2.com "> Sottovoce Due </a> </ li>
<Li> <a href="Subitem"> http://www.subitem3.com "> Sottovoce Tre </a> </ li>
<Li> <a href="Subitem"> http://www.subitem4.com "> Sottovoce Quattro </a> </ li>
</ Ul>
</ Li>
<Li> <a href="Main"> http://www.mainmenu2.com "> Menu principale Due </a> </ li>
<Ul id = "subnavlist">
<Li id = "subactive">
<a href="http://www.subitem5.com" id="subcurrent"> Sottovoce Cinque </a> </ li>
<Li> <a href="Subitem"> http://www.subitem6.com "> Sottovoce sei </a> </ li>
<Li> <a href="Subitem"> http://www.subitem7.com "> Sottovoce Sette </a> </ li>
<Li> <a href="Subitem"> http://www.subitem8.com "> Sottovoce Otto </a> </ li>
</ Ul>
</ Li>
<Li> <a href="Main"> http://www.mainmenu3.com "> Menu principale Tre </a> </ li>
<Ul id = "subnavlist">
<Li id = "subactive">
<a href="http://www.subitem9.com" id="subcurrent"> Sottovoce Nove </a> </ li>
<Li> <a href="Subitem"> http://www.subitem10.com "> Sottovoce Dieci </a> </ li>
<Li> <a href="Subitem"> http://www.subitem11.com "> Sottovoce Eleven </a> </ li>
<Li> <a href="Subitem"> http://www.subitem12.com "> Sottovoce Dodici </a> </ li>
</ Ul>
</ Li>
<Li> <a href="Main"> http://www.mainmenu4.com "> Menu principale Quattro </a> </ li>
<Ul id = "subnavlist">
<Li id = "subactive">
<a href="http://www.subitem13.com" id="subcurrent"> Sottovoce Tredici </a> </ li>
<Li> <a href="Subitem"> http://www.subitem14.com "> Sottovoce Quattordici </a> </ li>
<Li> <a href="Subitem"> http://www.subitem15.com "> Sottovoce Quindici </a> </ li>
<Li> <a href="Subitem"> http://www.subitem16.com "> Sottovoce Sedici </a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
4 Sostituire i nomi principali del menu numerati "Menu principale One", "Menu principale Due", ecc, con i nomi reali dei pulsanti principali del menu. Sostituire i collegamenti URL principale del menu con i collegamenti si desidera che il visitatore di essere diretto a se fanno clic su un pulsante menu principale.
5 Sostituire i nomi Sottovoce numerati "Sottovoce One", "Sottovoce Due", ecc, con i nomi reali delle opzioni sul sottomenu. Sostituire i collegamenti sottovoce URL con link si desidera che il visitatore di essere diretto a quando lui o lei fa clic su un elemento secondario.
6 Salvare e caricare il file HTML.