Ved hjelp av god HTML-kode og enkle CSS-regler kan du lage en fin popup-meny som enkelt kan endres og suppleres. Ved å bruke markeringsspråk og Cascading Style Sheets kan du sikre at menyene fungerer som de skal i alle nettlesere.
Bruksanvisning
Trinn 1
Bygg først den grunnleggende strukturen til menyen din. Åpne et tekstredigeringsprogram og opprett en nummerert liste med en undermeny som fungerer som et overordnet listeelement. For eksempel:
-
Første element
- Rulleliste
- Dropdown2
Steg 2
Lagre den genererte listen i en egen html-fil. Deretter oppretter du en fil med.css-utvidelse og skriver inn alle parametere for stilark.
Trinn 3
Fjern eventuell polstring og kuler som gjelder i punktlisten, og still inn menybredden ved hjelp av CSS-verktøy: ul {list-style: none;
bredde: 200px; }
Trinn 4
Sett den relative posisjonen til alle elementene i listen ved hjelp av posisjonsattributtet: ul li {posisjon: relativ; }
Trinn 5
Deretter må du designe en undermeny, der hvert av elementene vises til høyre for foreldermenyen i det øyeblikket når musepekeren er på elementet: li ul {posisjon: absolutt;
venstre: 199px;
topp: 0;
display: ingen; } Det venstre attributtet er en piksel mindre enn selve menyens bredde. Dette gjør at popup-elementene kan plasseres intelligent uten å skape doble rammer. Visningsattributtet brukes til å skjule undermenyen når du åpner siden.
Trinn 6
Stil lenkene som ønsket ved hjelp av de aktuelle css-alternativene. Inkluder parameteren display: block slik at hver lenke tar opp all den plassen den har reservert for den.
Trinn 7
For å få menyen til å vises i det øyeblikket markøren er over den (hover), må du skrive inn koden: li: hover ul {display: block; }
Trinn 8
Angi flere alternativer for å vise lenker og listeelementer etter ønske.
Trinn 9
Pop-up-menyen er klar. Nå gjenstår det å inkludere attributtet i.html-filen: hurtigmeny
