Ved hjælp af kompetent HTML-kode og enkle CSS-regler kan du oprette en pop op-menu, supplere den og ændre den. Ved at bruge de kaskadetabeller og markup-sprogværktøjer kan du sikre, at selve menuen fungerer korrekt i alle browsere.
Instruktioner
Trin 1
Hold fast på den grundlæggende menulinje først. Opret en speciel nummereret liste med en undermenu i en teksteditor. Normalt bruges "Notepad" til disse formål. Undermenuen fungerer som et element på forældrelisten. For eksempel: Første ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Trin 2
Gem denne liste i en separat html-fil. Opret derefter en.css-fil. Indtast alle de krævede parametre for typografiark. Gør dette meget omhyggeligt, fordi en fejltagelse, og pop op-menuen vises ikke korrekt eller fungerer slet ikke.
Trin 3
Fjern eventuelle kugler og polstring, der er anvendt i punktlisten. Indstil bredden på menuen ved hjælp af CSS-værktøjer: ul -style: none; width: 200px; }
Trin 4
Marker den relative position for alle elementerne på listen med en attribut kaldet position: ul li: relative; }
Trin 5
Arranger derefter undermenuen, hvis elementer vises fra overordnet menu til højre, når musemarkøren er over punktet: li ul: absolut; venstre: 199px; top: 0; display: ingen; }
Trin 6
Venstre attribut er en pixel mindre end selve menuens bredde. Dette gør det muligt at placere pop-up-emner korrekt uden at skabe dobbelte kanter. Displayattributten bruges til at skjule undermenuen, når siden åbnes.
Trin 7
Stil linkene efter behov ved hjælp af de relevante css-indstillinger. Inkluder parameteren display: block, så linkene optager al den plads, der er reserveret til dem. For at få menuen til at vises, når musemarkøren svæver over den, skal du indtaste følgende kode: li: svæver ul: blok; }
Trin 8
Indstil yderligere muligheder for at få vist listeelementer og links efter ønske. Inkluder en attribut i.html-filen. Pop-up-menuen er klar til brug.
