Hvordan lage en horisontal meny ved hjelp av CSS

Hvordan lage en horisontal meny ved hjelp av CSS


Ved koding en webside i HTML og CSS, er den foretrukne metode for å lage en ikke-sorterte liste i HTML og da gjelde for den enkelte CSS styling. Uansett hvor komplisert en meny blir, jo sorterte liste blir en effektiv metode for å strukturere linkene. Noen cross-browser problemstillinger krever spesiell omsorg og inngående kjennskap til CSS-kode for å lage en horisontal meny brukbar og holde den fra å bryte.

Bruksanvisning

1 Åpne opp HTML-fil og legge til <ul> og </ ul> koder til websiden. Mellom disse kodene, legge til linker innpakket i <li> og </ li> tags. Den <li> tag står for "listeelement" og brukes i punktlister og nummererte lister, men mange utviklere bruker også disse som grunnlag for sine menyer. Her er et eksempel på en uordnet liste du kan bruke til å lage en meny:

<Ul>

<Li> <a href="page1.html"> Side 1 </a> </ li>

<Li> <a href="page2.html"> Side 2 </a> </ li>

</ Ul>

Koden ovenfor viser to koblinger i en uordnet liste. De fleste menyer viser flere linker enn to. Legg til så mange linker som du vil, men husk samtidig at hvis du legger for mange, vil menyen bryte. Hvor mange du kan inkludere avhenger av bredden av design, bredden av menyen og bredden på brukerens skjerm.

2 Fjern kuler, marginer og padding fra sorterte liste. Du gjør dette ved å sette CSS egenskaper, enten i en ekstern CSS-fil eller mellom <style> og </ style> koder.

ul {list-style: none; margin-left: 0; padding-left: 0;}

Ovennevnte koden fjerner formatering fra din sorterte liste slik at du kan style den som en meny.

3 Juster alle menyelementene til venstre for hverandre ved å sette "flyte" egenskapen til "venstre" for hver <li> tag i sorterte liste. Dette er hvordan CSS-koden ser ut:

li {float: left;}

Denne koden gir deg en rett linje over lenker. Du bør style linkene selv i stedet for listeelementene, men innstillingen "flyte" for listeelementene i stedet for linkene hindrer "stepping" i enkelte nettlesere. "Stepping" er en feil der liste over linker ser ut som et sett av tiltak i stedet for å stille opp i en rett, horisontal linje.

4 Legg padding til alle ledd i CSS som så:

li a {padding: 5px 10px; display: block;}

I koden ovenfor, har hver kobling en utfylling på fem piksler på toppen og bunnen og 10 piksler til venstre og høyre. Bruk av padding til koblingene skaper et større klikkbare området rundt teksten i hver kobling. Sett "display: block;" for å gjøre nettlesere behandle koblingene som blokker. Legg merke til at CSS velgeren her er "li en" i stedet for "a" fordi du ikke vil at hver lenke på siden for å se ut som linkene i menyen.

Hint

  • Bruk CSS til å style <ul> tag for å lage menybakgrunnen, ramme og skygge. Bruk CSS på <a> tag å style menyelementene. The: hover pseudo-velgeren brukes til å lage hover stater for menyelementer.
  • Ved bruk av CSS-kode, finnes mange cross-browser problemer. Siden menyene krever kompleks styling, teste din webside i flere nettlesere, inkludert eldre versjoner av Internet Explorer.