Hvordan lage en CSS Drop Down Navigation Bar

Cascading Style Sheet klasser lar deg legge ut en HTML-side element, for eksempel et navigasjonsfelt. Du bruker "list" tag for å lage en liste av verdier brukere kan klikke i menyen, og deretter bruke CSS klasser til listen for å lage layout. Du kan endre knappens bakgrunn, drop down farger, skrift og tekststiler. Du kan sette inn CSS-klasser direkte i HTML-side eller i en egen CSS-fil koblet i HTML-koden.

Bruksanvisning

1 Høyreklikk på HTML-siden du ønsker å bruke for navigasjonsmenyen. Klikk "Åpne med", og klikk deretter på HTML editor i listen over programmer.

2 Lag menyelementene. For eksempel skaper følgende kode en "Home" menyen og en "om meg" i menyen:

<Ul id = "meny">

<Li> <a href="home.html"> Hjemmeside </a> </ li>

<Li> <a href="AboutMe.html"> om meg </a> </ li>

</ Ul>

3 Lag CSS stil. Du kan bruke alle CSS eiendom for å sette opp HTML-menyen. I dette eksemplet er margen og bakgrunnsfarge redigert. Skriv inn følgende kode i HTML-fil for å opprette en inline CSS-klasse:

<Script type = "text / css">

meny

{

margin: 0;

background-color: # ffffff;

}

</ Script>

Klassen heter med på menyen ID, slik at klassen kobler automatisk til riktig meny.

4 Lagre endringene og åpne HTML-fil med en nettleser. Gjennomgå menyen for å sørge for at oppsettet fungerer for siden din.