Innhold

• Å trå
• Del 1 av 2: Skrive HTML
• Del 2 av 2: Skrive CSS
• Tips

Med en rullegardinmeny oppretter du en klar og hierarkisk oversikt over alle viktige deler på siden og underavsnittene som siden inneholder. Du må bare bevege musen over hoveddelene for å få underseksjonene til å vises. Du kan opprette en rullegardinmeny med bare HTML og CSS.

Å trå

Del 1 av 2: Skrive HTML

1. Opprett navigasjonsdelen. Normalt bruker du nav> for navigasjonsfeltet på hele nettstedet, overskrift> for mindre lenkeseksjoner som er sidebundet, eller div> hvis ingen andre alternativer ser ut til å passe. Plasser dette i et div> -element slik at du kan justere stilen til både beholderen og selve menyen.
   • div>
   • nav>
   • / nav>
   • / div>
2. Gi hver seksjon et klasseattributt. Vi vil bruke klasseattributtet senere for å endre stilen til disse elementene med CSS. Gi både beholderen og menyen sin egen klasseattributt.
   • div>
   • nav>
   • / nav>
   • / div>
3. Legg til en liste over menyelementer. Den uordnede listen (ul>) inneholder elementene i hovedmenyen (listeelementer li>). Hvis brukeren beveger musen over den, ser han / hun rullegardinmenyene. Legg til klassen "clearfix" i listeelementet ditt; vi kommer til dette senere i CSS-regnearket.
   • div>
   • nav>
   •       ul>
   •          li> Hjem / li>
   •          li> Ansatte
   •          li> Kontakt
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Legg til lenker. Hvis disse menyelementene på øverste nivå også lenker til sine egne sider, kan du nå sette inn lenkene. Lenke til et ikke-eksisterende anker (for eksempel "#!"), Selv om de ikke lenker til noe, slik at brukerens markør vil se annerledes ut. I dette eksemplet fører Contact ingen steder, men de to andre menyelementene gjør:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Hjem/ a>/ li>
   • li>a href = "/ Ansatte">Ansatte/ a>
   • / li>
   • li>a href = "#!">Ta kontakt med/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Opprett underlister for rullegardinmenyene. Etter at stilen er opprettet, danner disse listene rullegardinmenyen. Plasser listen i listeelementet som brukeren vil holde musen over. Legg til et klasseattributt og en lenke akkurat som før.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Hjem / a> / li>
   • li> a href = "/ Ansatte"> Ansatte / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontakt / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Rapporter et problem / a> / li>
   •             li> a href = "/ support"> Kundestøtte / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Del 2 av 2: Skrive CSS

1. Åpne CSS-stilarket ditt. Legg ut en lenke til CSS-stilarket ditt i hodeseksjonen i HTML-dokumentet hvis lenken ikke allerede er der. I denne artikkelen vil vi ikke dekke det grunnleggende om CSS, for eksempel å sette skrift og bakgrunnsfarge.
2. Legg til clearfix-kode. Husker du å legge til "clearfix" -klassen i menylisten? Normalt har elementene i rullegardinmenyen en gjennomsiktig bakgrunn som gjør at andre elementer kan flyttes. En enkel tilpasning til CSS kan løse dette problemet. Her er en fin, rask løsning, selv om det ikke fungerer i Internet Explorer 7 og tidligere:
   • .clearfix: etter {
   • innhold: "";
   • display: tabell;
   • }
3. Lag grunnleggende design. Med denne koden kan du plassere menyen øverst på siden og skjule rullegardinelementene. Dette er veldig enkelt med vilje, slik at vi kan fokusere på den aktuelle koden. Du kan endre den senere med ekstra CSS-kode, for eksempel polstring og margin.
   • .nav-wrapper {
   • bredde: 100%;
   • bakgrunn: # 008B8B;
   • }
   •  
   • .nav-meny {
   • posisjon: relativ;
   • display: inline-block;
   • }
   •  
   • .sub-meny {
   • posisjon: absolutt;
   • display: ingen;
   • bakgrunn: # 555;
   • }
4. Få rullegardinelementene til å vises når du holder musen over dem. Elementene i rullegardinlisten er nå satt slik at de ikke vises. Slik får du en hel underliste til å vises så snart du holder markøren over "foreldren":
   • .nav-meny ul li: svever> ul {
   • display: blokk;
   • }
   • Merk - hvis flere menyer er skjult i menyelementene i rullegardinmenyen, vil egenskapene som legges til her, gjelde for alle menyer. Hvis du bare vil at stilen skal gjelde for det første nivået i rullegardinmenyene, bruker du ".nav-menu> ul" i stedet.
5. Angi med en pil at det er en rullegardinmeny. Nettdesignere viser normalt med en pil ned at et element åpner en rullegardinmeny. Denne koden legger til den pilen til hvert element i menyen:
   • .nav-meny> ul> li: etter {
   • innhold: " 25BC"; / * rømte unicode for nedpilen * /
   • skriftstørrelse: .5em;
   • display: blokk;
   • posisjon: absolutt;
   •    }
   • Merk - Juster posisjonen til pilen med egenskapene øverst, nederst, høyre eller venstre.
   • Merk - Hvis ikke alle menyelementene har rullegardin, må du ikke endre utseendet til hele klassens nav-meny. I stedet legger du til en annen klasse (for eksempel rullegardin) til hvert li-element der du vil ha en pil. Henvis til den klassen i koden ovenfor.
6. Juster polstring, bakgrunn og andre egenskaper. Menyen skal fungere nå, men den er ikke veldig fin ennå. Med egenskapene i CSS kan du tilpasse hvordan hver klasse eller element ser ut og hvor de ligger.

Tips

• Hvis du vil legge til en rullegardinmeny i et skjema, er det veldig enkelt i HTML5 med elementet velg>.
• Koblingen a href = "#"> blar til toppen av siden, og en lenke som peker mot et ikke-eksisterende anker, for eksempel et href = "#!">, Ruller ikke. Hvis det føles for slurvet, kan du endre hvordan markøren ser ut med CSS.
• Fjern alle punktene når du kopierer og limer inn eksempelkoden.