Vertikal CSS Drop-Down Menu Tutorial

Når du utformer et nettsted, kan du lage en vertikal rullegardinmenyen ved hjelp av HTML og CSS. Du trenger HTML for å lage menyen på en webside, inkludert hvor mange menyalternativene du trenger og hvor mange rulle verdier for hver. Du må da CSS for å angi menyens utseende og format verdier. Når en besøkende svever musen over et av alternativene på menyen, en rullegardinliste med flere alternativer synes å hjelpe den besøkende navigere gjennom ditt nettsted.

Bruksanvisning

HTML-fil

1 Åpne HTML-filen der du vil legge til en vertikal rullegardinmenyen. Skriv inn følgende i <head> element:

<Link href = "style.css" rel = "stylesheet" type = "text / css" />

Endre "href" verdi til navnet på CSS-fil, hvis nødvendig.

2 Skriv inn følgende i <body> element:

<Ul id = "rullegardinmenyen">

<Li> <a href="index.html"> Hjem </a> </ li>

<Li> <a href="category1.html"> Kategori 1 </a>

<Ul>

<Li> <a href="option1.html"> Alternativ 1 </a> </ li>

<Li> <a href="option2.html"> Alternativ 2 </a> </ li>

<Li> <a href="option3.html"> Alternativ 3 </a> </ li>

</ Ul>

</ Li>

<Li> <a href="category2.html"> Kategori 2 </a>

<Ul>

<Li> <a href="option1.html"> Alternativ 1 </a> </ li>

<Li> <a href="option2.html"> Alternativ 2 </a> </ li>

</ Ul>

</ Li>

</ Ul>

Disse linjene opprette HTML-menyen og rullegardinlister. Legge til, endre og fjerne menyelementer som trengs. Merk at menyvalg som ikke har rullegardinlistene, slik som "Home" alternativet, må du ikke bruke <ul> tag, men hele menyen bruker en <ul> tag og referanser en id som heter "rullegardinmenyen" i CSS-fil.

3 Lagre HTML-fil.

CSS-fil

4 Åpne CSS-filen. Skriv inn følgende:

ul # dropdown {

list-style: none;

}

Som standard sorterte lister bruke punkter ved siden av teksten. Denne velger fjerner punkter for sorterte lister som kaller "rullegardinmenyen" id, slik som den på HTML-fil.

5 Skriv inn følgende:

ul # dropdown li, ul # dropdown li ul li {

float: left;

width: 75px;

}

Den "flyte" eiendom justerer elementene i menyen horisontalt. Fjern denne egenskapen hvis du vil at menyen for å vise elementer vertikalt i en liste. "Bredde" eiendom komplekser hvor stort hvert menyelement er. Endre denne verdien etter behov, slik at hvert element i menyen passer uten overlapping.

6 Skriv inn følgende:

li ul {

display: none;

position: absolute;

width: 75px;

}

Som standard rulle alternativer dukker opp på skjermen. Den "display" eiendom i denne velger skjuler dem. Den "posisjon" eiendom plasserer dem i en fast posisjon under kategorien.

7 Skriv inn følgende:

li: hover ul, li.over ul {

display: block;

}

"Display" eiendom her viser rulle alternativer når en besøkende svever musen over en kategori. Når musen går ut av en meny kategori, rulle alternativene forsvinne igjen.

8 Lagre CSS-filen.