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.