Bruke lenker til å lage vertikale navigasjonsmenyer

click fraud protection

Enten nettsteds navigasjonsmeny er en horisontal rad over toppen eller en vertikal rad nedover siden, er det bare en liste. Når du designer nettnavigasjon, er en navigasjonsmeny en gruppe lenker. Når du programmerer navigasjonen din ved hjelp av XHTML + CSS, kan du lage en meny som er liten å laste ned (XHTML) og enkel å tilpasse (CSS).

Bærbar PC med CSS-ord på skjermen
hardik pethani / Getty Images 

Starter

For å utforme en liste for navigering, må du bruke en liste. Det kan være en standard uordnet liste som er identifisert som navigasjon. For eksempel:

  • Hjem
  • Produkter
  • Tjenester
  • Kontakt oss

Når du ser på HTML, har hjemmekoblingen en ID på.

du er her

Dette lar deg lage en meny som identifiserer gjeldende plassering for leserne dine. Selv om du ikke planlegger å ha den typen visuell indikasjon på nettstedet ditt akkurat nå, kan du inkludere den informasjonen. Hvis du bestemmer deg for å legge til køen senere, har du mindre koding for å forberede nettstedet ditt.

Uten noen CSS styling, denne XHTML-menyen ser ut som en standard ikke-ordnet liste. Det er kuler, og listeelementene er litt innrykkede. Når du bruker

instagram viewer
plassholderlenker, de fleste nettlesere viser ikke koblingene som klikkbare (understreket og i blått). Når du limer inn HTML-en på en webside, ser navigasjonen din slik ut:

  • Hjem
  • Produkter
  • Tjenester
  • Kontakt oss

Dette ser ikke mye ut som en meny. Imidlertid, med noen få CSS-stiler lagt til listen, kan du opprette en meny som gjør deg stolt.

Hvis du vil ha flere eksempler på vertikale menyer, kan du søke etter følgende:

  • En vertikal meny
  • En grunnleggende vertikal menymal
  • En vertikal meny med You Are Here
  • En grunnleggende vertikal menymal med You Are Here

Vertikal navigasjonsmeny

En vertikal navigasjonsmeny er enkel å skrive fordi den vises på samme måte som en vanlig liste: opp og ned. Listeelementene vises vertikalt nedover på siden.

Når du styler menyer, begynner du på utsiden og jobber inn. Først utformer du navigasjonen:

ul # navigasjon

Gå deretter til elementene og koblingene. Først definerer du bredden på menyen. Dette sikrer at hvis menyelementene er lange, vil ikke elementene skyve resten av oppsettet over eller forårsake vannrett rulling.

ul # navigasjon {bredde: 12em; }

Når du har angitt bredden, jobber du med listeelementene. Dette lar deg angi ting som bakgrunnsfarger, rammer, tekstjustering og marginer.

ul # navigasjon li {
liste-stil: ingen;
bakgrunnsfarge: # 039;
border-top: solid 1px # 039;
tekstjustering: venstre;
margin: 0;
}

Når du har angitt det grunnleggende for listeelementene, kan du jobbe med hvordan menyen ser ut i koblingsområdet. Først stil navigasjonen:

UL # navigasjon LI A

Styl deretter følgende:

En kobling
A: besøkt
A: sveve
A: aktiv

For koblingene, gjør koblingene til et blokkeringselement (i stedet for standard in-line). Dette tvinger koblinger til å ta opp hele plassen til LI, og fungere som et avsnitt, noe som gjør koblinger lettere å utforme som menyknapper. Fjern deretter følgende:

understreking, tekstdekorasjon: ingen; som

Dette gjør at knappene ser mer ut som knapper. Designet ditt kan være annerledes.

ul # navigasjon li a {
skjerm: blokk;
tekstdekorasjon: ingen;
polstring: .25em;
kantbunn: solid 1px # 39f;
border-right: solid 1px # 39f;
}

Med skjerm: blokk; satt på lenkene, kan hele boksen i menyelementet klikkes, ikke bare bokstavene. Dette er også bra for brukervennlighet. Angi koblingsfargene (lenke, besøkt, sveve og aktiv) hvis du vil at koblinger skal være forskjellige fra standard blå, rød og lilla.

a: link, a: besøkt {color: #fff; }
a: svever, a: aktiv {farge: # 000; }

Du kan også gi svevetilstanden litt oppmerksomhet ved å endre bakgrunnsfargen.

a: sveve {bakgrunnsfarge: #fff; }

Horisontal navigasjonsmeny

Å lage horisontale navigasjonsmenyer er litt vanskeligere enn vertikale navigasjonsmenyer fordi du må kompensere for at HTML-lister foretrekker å vises vertikalt. Som med den horisontale menyen, opprett navigeringsmenylisten:

  • Hjem
  • Produkter
  • Tjenester
  • Kontakt oss

For å lage en horisontal meny, arbeid på samme måte som du gjorde med den vertikale menyen. Start med utsiden og jobb inn. For å starte navigasjonen i venstre hjørne, sett den med 0 venstre marg og polstring, og svev den til venstre.

Gjør for vane å stille inn bredden slik at menyen ikke tar mer eller mindre plass enn du har tenkt deg. For horisontale menyer er dette vanligvis hele bredden på designet. Du kan også legge til en bakgrunnsfarge til listen for å gjøre det lettere å lese.

ul # navigasjon {
flyte: venstre;
margin: 0;
polstring: 0;
bredde: 100%;
bakgrunnsfarge: # 039;
}

Hemmeligheten til den horisontale navigasjonsmenyen er i listeelementene. Listeelementer er normalt blokkeringselementer, noe som betyr at disse elementene har en ny linje plassert før og etter hver enkelt. Ved å bytte skjerm fra blokk til innebygd, tvinger du listeelementene til å stille seg horisontalt ved siden av hverandre.

ul # navigasjon li {display: inline; }

Behandle lenkene nøyaktig som den vertikale navigasjonsmenyen, med samme farger og tekstdekorasjon. Legg til en øvre kant for å avgrense knappene når brukeren svever over en knapp. Fjern deretter skjerm: blokk; da det setter de nye linjene tilbake og ødelegger den horisontale menyen.

Du er her Stedsinformasjon

Et annet aspekt av HTML er denne identifikatoren:

du er her

Hvis du vil endre menyen for å indikere brukerens nåværende beliggenhet, kan du bruke denne ID-en til å definere en annen bakgrunnsfarge eller en annen stil. Flytt attributt-ID-en til riktig menyelement på andre sider, slik at den gjeldende siden alltid blir uthevet.

Hvis du setter disse stilene sammen på siden din, kan du opprette en horisontal eller vertikal menylinje som fungerer sammen med nettstedet ditt og er raskt å laste ned og enkelt å oppdatere. Ved å bruke XHTML + CSS blir listene dine til et kraftig verktøy for design.

Hvis du vil ha flere eksempler på horisontale menyer, kan du søke etter følgende på nettet:

  • En stilt horisontal meny
  • En grunnleggende horisontal menymal
  • En horisontal meny med You Are Here
  • En grunnleggende horisontal menymal med You Are Here
instagram story viewer