Hvordan lage en Drop Down HTML-meny og undermeny

Drop-down menyer - også kjent som "suckerfish" menyer - bruk en kombinasjon av HTML og CSS (Cascading Style Sheets) for struktur og stil. HTML del av en rullegardinmeny består av punktlister og nestede punktlister. Etter du style menylinjen og hovednavigasjonslenker i CSS, kan du forme de hekket punktlister som undermenyer. Den ": hover" velgeren i CSS lar deg endre en skjult undermeny display eiendom til "block" for å få den frem igjen.

Bruksanvisning

1 Koden menyen i HTML ved hjelp av "<ul>" og "<li>" tags:

<Ul id = "meny">

<Li> <a href="link1.html"> Link 1 </a> </ li>

<Li> <a href="link2.html"> Link to </a> </ li>

<Li> <a href="link3.html"> Link 3 </a> </ li>

<Div class = "clearfix"> </ div>

</ Ul>

Legg en klar-fix div før slutten av listen. Du vil legge til en stil til "clearfix" klasse å gjøre menyen bakgrunn strekke ned.

2 Legg inn undermeny som en ny sorterte liste nestet innenfor den overordnede koblingen er "<li>" tags:

<Ul id = "meny">

<Li> <a href="link1.html"> Link 1 </a> </ li>

<Li> <a href="link2.html"> Link to </a>

&lt;ul>

& Lt; li> & lt; a href = "link1.html"> Link 1 & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "link2.html"> Link 2 & lt; / a> & lt; / li>

& Lt; li> & lt; a href = "link3.html"> Link 3 & lt; / a> & lt; / li>

</ Li>

<Li> <a href="link3.html"> Link 3 </a> </ li>

</ Ul>

3 Åpne din style sheet, og style menyen din ved hjelp av CSS. Fjern både kuler og venstre-innrykk:

menyen {

list-style: none;

padding: 0;

}

Merk at "#menu" matcher ID navnet på eksempel HTML-kode.

4 Legg en bakgrunnsfarge til menylinjen:

menyen {

list-style: none;

padding: 0;

background-color: mørkblå;

}

5 Float menypunktene til venstre, slik at de på linje horisontalt på menylinjen:

meny li {

float: left;

}

6 Style koblingene som utgjør menyelementer. Legg padding til lenkene for å stille dem opp vertikalt på menylinjen mens du gjør dem lettere å klikke på og sveve over. Du må endre "display" egenskapen til "block" for å legge padding til linker:

Menyen li a {

display: block;

padding: 8px 15px;

text-align: center;

Farge: hvit;

font-weight: bold;

text-decoration: none;

}

Merk at i "padding", to verdier er angitt. Den første verdien er vertikal polstring, mens de andre effektene horisontale polstring.

7 Stil undermenyen og dens elementer. Du må først plassere undermenyen. Fjern kuler og polstring fra undermenyene også:

Menyen ul {

position: absolute;

list-style: none;

padding: 0;

}

8 Ta til venstre flyter fra elementene i undermenyer:

Menyen ul li {

klar: left;

}

9 Legg til "dsiplay: ingen" til "#menu ul" regelen for å slå av undermenyen, siden du ikke vil at det skal vises, med mindre brukeren svever over den overordnede element. Gjør menyen vises igjen ved hjelp av denne koden:

Menyen li: hover ul {

dipslay: block;

}

10 Legg til "klar fix" regelen til div:

.clearfix {

klar: begge;

}

Hint

  • Legg utheving til menyelementer når brukeren svever over dem. En stil regel å endre bakgrunnsfargen på en svevet-over koblingen ser ut som "#menu a: hover {}".
  • Når du er ferdig med å bygge din meny ved hjelp av HTML og CSS, kan du legge til en jQuery plugin for å lage fine animasjoner for drop-downs.