August 28
Creazione di un menu a comparsa coesa per il vostro sito web può significare la differenza tra mostrare al mondo un sito professionale con una facile navigazione, o un groviglio complicato di link e strati. Un menu a comparsa può essere verticale o orizzontale, con blocchi di colore che cambiano con una hover del mouse, o immagini e simboli elaborati. menu flyout può fare un sito web pop con entusiasmo. E la parte migliore è, è possibile crearne uno con una conoscenza di base di HTML e un semplice editor di testo.
1 Aprite il vostro editor di testo preferito. È possibile costruire un menu a comparsa in Blocco note, che si trova nella cartella di accessori, in qualsiasi versione di Windows.
2 Aprire il file HTML con un editor di testo in cui si vuole costruire il menu.
3 Costruire liste non ordinate annidati per le principali schede di tabulazione e sub. Questi sono composti da liste non ordinate (UL) e voci di elenco (LI). Assicurati di metterli dopo il tag Corpo.
Ecco un esempio:
<Body>
<Div class = "cssfly">
<Ul>
<Li> <a href="#"> casa </a>
<Ul>
<Li> <a href="#"> Sotto casa 1 </a> </ li>
<Li> <a href="#"> Sub Home 2 </a>
<Ul>
<Li> <a href="#"> Sotto casa 3 </a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li> <! - End "Home" elenco di elementi ->
<Li> <a href="#"> Fabulous </a>
<Ul>
<Li> <a href="#"> Favoloso 1 </a> </ li>
<Li> <a href="#"> Favoloso 2 </a> </ li>
</ Ul>
</ Li> <! - End "Fabulous" elenco di elementi ->
</ Ul>
</ Div>
</ Corpo>
4 Trovare o creare il foglio di stile CSS nel codice HTML. Il foglio di stile è un modello per la tua pagina. Il codice vi verrà immettendo qui vi dettare come la pagina appare e agisce. Se non si dispone di un CSS, crearla utilizzando un nome di stile sotto il tag di intestazione.
esempio:
<Head>
<Title> XYZ </ title>
<Style type = "text / css">
Questo è dove il vostro codice di foglio di stile va.
</ Style>
</ Head>
5 Scrivere il codice del foglio di stile che descrive ciò che il vostro menù sarà simile. È possibile variare la dimensione e il colore qui.
<Style type = "text / css">
.cssfly {
font-family: Arial, sans-serif; width: 106px; altezza: 150px;
position: relative; margin: 0; font-size: 11px; margin: 50px 0;
}
.cssfly ul li a, .menu ul li a: visited {
blocco di visualizzazione; text-decoration: none;
color: # 000; width: 104px; Altezza: 25px;
text-align: center; border: 1px solid #fff;
border-width: 1px 1px 0 0; background: # 003.221; colore: #FFFFFF;
line-height: 19px; font-size: 10px;
}
.cssfly ul {padding: 0; margin: 0; list-style-type: none; }
.cssfly ul li {float: left; margin-right: 1px; position: relative;}
.cssfly ul li ul {display: none;}
6 Aggiungere il codice che rende il vostro menu "volare fuori." Il codice seguente rende la nidificato LI presentarsi sotto la UL. Gli stati hover descrivono ciò che il testo sarà simile quando il mouse su di esso.
.cssfly ul li: hover a {color: #fff; background: # 000;}
.cssfly ul li: hover {ul
blocco di visualizzazione; position: absolute; top: 0;
sinistra: 105px; width: 105px;
}
.cssfly ul li: hover {ul li a.hide
sfondo: #ccc; color: # 000;
}
.cssfly ul li: hover ul li: hover a.hide {width: 150px;}
.cssfly ul li: hover ul li ul {display: none;}
.cssfly ul li: hover ul li a {
blocco di visualizzazione; sfondo: #ccc; color: # 000; width: 150px;
}
.cssfly ul li: hover ul li a: hover {background: rosso; color: # 000;}
.cssfly ul li: hover ul li: hover {ul
blocco di visualizzazione; position: absolute; sinistra: 151px; top: 0; color: # 000;
}
.cssfly ul li: hover ul li: hover ul li a {
blocco di visualizzazione; width: 200px; background: # dfc184; color: # 000;
}
.cssfly ul li: hover ul li: hover ul li a: hover {background: # bd8d5e;
colore: #fff;
}
7 Salvare la pagina. Mettere la pagina on-line e testarlo nel tuo browser.