Ved hjælp af god HTML-kode og enkle CSS-regler kan du oprette en dejlig popup-menu, der let kan ændres og suppleres. Ved at bruge markup sprog og Cascading Style Sheets kan du sikre, at menuer fungerer korrekt i alle browsere.
Instruktioner
Trin 1
Bygg først den grundlæggende struktur i din menu. Åbn en teksteditor, og opret en nummereret liste med en undermenu, der fungerer som et overordnet listeelement. For eksempel:
-
Første element
- Dropdown-vare
- Dropdown2
Trin 2
Gem den genererede liste i en separat html-fil. Derefter skal du oprette en fil med en.css-udvidelse og indtaste alle typografiarkparametre.
Trin 3
Fjern eventuel polstring og kugler, der gælder i punktlisten, og indstil menubredden ved hjælp af CSS-værktøjer: ul {list-style: none;
bredde: 200 px; }
Trin 4
Indstil den relative position for alle emner på listen ved hjælp af attributten position: ul li {position: relativ; }
Trin 5
Dernæst skal du designe en undermenu, hvor hvert af elementerne vises til højre for overordnet menu i det øjeblik, hvor musemarkøren er på elementet: li ul {position: absolut;
venstre: 199px;
top: 0;
display: ingen; } Den venstre attribut er en pixel mindre end selve menuens bredde. Dette gør det muligt at placere pop-up-emner intelligent uden at skabe dobbeltgrænser. Displayattributten bruges til at skjule undermenuen, når siden åbnes.
Trin 6
Stil linkene som ønsket ved hjælp af de relevante css-indstillinger. Inkluder parameteren display: block, så hvert link optager al den plads, det har reserveret til det.
Trin 7
For at få menuen til at vises i det øjeblik, hvor markøren er over den (svæver), skal du indtaste koden: li: svæver ul {display: blok; }
Trin 8
Indstil yderligere muligheder for at få vist links og listeelementer efter ønske.
Trin 9
Pop-up-menuen er klar. Nu er det fortsat at inkludere attributten i.html-filen: pop op-menu
