Hvordan lage et bilde rullegardinmenyen i CSS

Før utviklingen av Cascading Style Sheets, Webdesignere brukte en kombinasjon av Hypertext Markup Language og Javascript for å skape rullegardinmenyer. For omtrent et tiår, "<Velg>" koder ble brukt til å legge navigasjonsmenyer til nettsteder, men de fleste designere nå bruke UL, eller sorterte liste, element. De fleste UL elementer bruke tekst, men du kan kombinere HTML og CSS for å lage en rullegardinmeny som bruker bilder i stedet.

Bruksanvisning

1 Sett "<ul>" og "</ ul>" koder mellom "<body>" og "</ body>" tagger i HTML-dokumentet:

<Body>
<Ul>
</ Ul>
</ Body>

2 Sett "<li>" og "<li>" mellom "<ul>" koder for å lage hovedmenyen. Sett "<img>" tag mellom "<li>" tags.

<Ul>
<Li> <img src = "URL" alt = "header en"> </ li>
<Li> <img src = "URL" alt = "header b"> </ li>
</ Ul>

Erstatt "URL" med full adresse knytte til menybilder. Bruk samme formatering, "<li> <img> </ li>", for å legge til flere elementer i menyen. Bytt ut teksten i "alt" feltet med en beskrivelse for hvert bilde.

3 Sett "<ul>" og "<li>" kodene mellom eksisterende "<li>" koder for å legge til sub-menyer. For eksempel:

<Ul>
<Li> <img src = "URL" alt = "header en">
<Ul>
<Li> <img src = "URL" alt = "sub-element en"> </ li>
</ Ul>
</ Li>
<Li> <img src = "URL" alt = "header b">
<Ul>
<Li> <img src = "URL" alt = "sub-element b"> </ li>
<Li> <img src = "URL" alt = "sub-element c"> </ li>
</ Ul>
</ Li>
</ Ul>

Sett de riktige bildene for undermenyene ved hjelp av samme prosedyre som brukes for hovedmenyen. Bytt ut "alt" felt med bilder beskrivelser.

4 Tilsett "<a>" tag til hver "<li>" element for å koble menyelementene til en bestemt side på nettstedet. For eksempel:

<Li> <a href="page.html"> <img src = "URL" alt = "sub-element et"> </a> </ li>

Erstatt "/side.html" med adressen knytte til riktig Web dokumentet.

5 Sett "<style>" koder i dokumentet header:

<Head>
<Style>
</ Style>
</ Head>

6 Legg til følgende mellom "<style>" koder for å formatere "<ul>" og "<li>" tags:

li {
list-style-type: none;
}

ul li {
float: left;
bredde: #px;
}

Erstatte "#" med bredden av den største bildet i bildeelementer.

7 Sett inn følgende kode mellom "<style>" koder, etter "ul li" element, å konvertere menyen til en rullegardinmenyen:

ul li ul {
synlighet: skjult;
}

ul li: hover ul {
synlighet: synlig;
display: inline;
}

Hint

  • Hvis du ikke vil at de beste menyelementer for å koble til en annen side på nettstedet, sette inn "#" inn i "href" -feltet i stedet.