Hvordan lage Pure CSS drop-down menyer
Den "velg" tag er den lengste stående måte å lage en drop-down menyen på websiden, men siden Cascading Style Sheets (CSS) ble innført, har menyer med svært tilpass opptredener blitt populært. Mange slike tilpassede rullegardinmenyer bruke Javascript for å avsløre eller skjule menyelementer basert på brukerens musehandlinger. Imidlertid kan "sveve" pseudo-klasse i CSS også brukes til å avsløre menypunktene når musepekeren flyttes over menyen, slik at ingen Javascript er nødvendig.
Bruksanvisning
1 Sett følgende CSS-kode mellom "hodet" kodene i HTML-dokumentet:
<Style type = "text / css">
.meny{
display: inline-block;
position: relative;
}
.menucontent {
synlighet: skjult;
position: absolute;
width: 100%;
}
.Menyen: hover .menucontent {
synlighet: synlig;
}
</ Style>
2 Legg til følgende kode i kroppen av HTML-dokumentet:
<Div class = "meny"> rullegardinmenyen
<Span class = "menucontent">
<a href="page1.html"> Sak 1 </a>
<a href="page2.html"> Sak 2 </a>
<a href="page3.html"> Sak 3 </a>
</ Span>
</ Div>
3 Lagre siden og legg den i en nettleser. Beveg musen over "drop-down menyen" tekst, og menyelementene vises. Sette noen HTML-innhold du mellom "span" koder for å lage en tilpasset meny. Gjenbruk HTML-koden der du ønsker en rullegardinmenyen på siden din.
Hint
- Legg til følgende linje til toppen av HTML-dokumentet (før den første "html" tag) for å sikre kompatibilitet med Internet Explorer:
- <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
- Tilpass utseendet på menyen din ved hjelp av CSS egenskaper som "background-color" og "grensen".