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".