Ved hjelp av kompetent HTML-kode og enkle CSS-regler kan du opprette en lokalmeny, supplere den og endre den. Ved å bruke de overlappende tabellene og markup-språkverktøyene kan du sikre at selve menyen fungerer riktig i alle nettlesere.
Bruksanvisning
Trinn 1
Hold først på den grunnleggende menylinjen. Lag en spesiell nummerert liste med en undermeny i et tekstredigeringsprogram. Vanligvis brukes "Notisblokk" til disse formålene. Undermenyen fungerer som et element i foreldrelisten. For eksempel: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Steg 2
Lagre denne listen i en egen html-fil. Opprett deretter en.css-fil. Skriv inn alle nødvendige stilarkparametere. Gjør dette veldig nøye, fordi en feil, og hurtigmenyen vises ikke riktig eller fungerer ikke i det hele tatt.
Trinn 3
Fjern eventuelle kuler og polstring som er brukt i punktlisten. Still inn bredden på menyen ved hjelp av CSS-verktøy: ul-stil: ingen; bredde: 200 px; }
Trinn 4
Merk den relative posisjonen til alle elementene i listen med et attributt som heter posisjon: ul li: relativ; }
Trinn 5
Så ordner du undermenyen, hvis elementer vises fra foreldermenyen til høyre når musemarkøren er over elementet: li ul: absolutt; venstre: 199px; topp: 0; skjerm: ingen; }
Trinn 6
Venstreattributtet er en piksel mindre enn bredden på selve menyen. Dette gjør at popup-elementer kan plasseres riktig uten å opprette doble kanter. Visningsattributtet brukes til å skjule undermenyen når du åpner siden.
Trinn 7
Stil koblingene etter behov ved å bruke de riktige css-alternativene. Inkluder parameteren display: block slik at lenkene tar opp all plass som er reservert for dem. For å få menyen til å vises når musepekeren svever over den, skriv inn følgende kode: li: sveve ul: blokk; }
Trinn 8
Angi flere alternativer for å vise listeelementer og lenker etter ønske. Inkluder et attributt i.html-filen. Pop-up-menyen er klar til bruk.
