Brug af links til at oprette lodrette navigationsmenuer

The best protection against click fraud.

Uanset om dit websteds navigationsmenu er en vandret række over toppen eller en lodret række ned ad siden, er det bare en liste. Ved design webnavigation, en navigationsmenu er en gruppe af links. Når du programmerer din navigation ved hjælp af XHTML + CSS, kan du oprette en menu, der er lille til download (XHTML) og nem at tilpasse (CSS).

Bærbar computer med CSS-ord på skærmen
hardik pethani / Getty Images 

Kom godt i gang

For at designe en liste til navigation skal du bruge en liste. Det kan være en standard ikke-ordnet liste, der er identificeret som navigation. For eksempel:

  • Hjem
  • Produkter
  • Tjenester
  • Kontakt os

Når man ser på HTML, har linket Hjem et ID på.

du er her

Dette giver dig mulighed for at oprette en menu, der identificerer den aktuelle placering for dine læsere. Selvom du ikke planlægger at have den type visuelle signal på dit websted lige nu, kan du medtage disse oplysninger. Hvis du beslutter at tilføje køen senere, har du mindre kodning til at forberede dit websted.

Uden nogen CSS styling, denne XHTML-menu ligner en ikke-ordnet standardliste. Der er kugler, og listen er lidt indrykket. Ved brug

instagram viewer
pladsholder links, de fleste browsere viser ikke linkene som klikbare (understregede og i blå). Når du indsætter HTML'en på en webside, ser din navigation sådan ud:

  • Hjem
  • Produkter
  • Tjenester
  • Kontakt os

Dette ligner ikke meget en menu. Men med et par CSS-stilarter tilføjet til listen kan du oprette en menu, der gør dig stolt.

Hvis du vil have flere eksempler på lodrette menuer, skal du foretage en websøgning efter følgende:

  • En vertikal menu i stil
  • En grundlæggende lodret menuskabelon
  • En stilret lodret menu med You Are Here
  • En grundlæggende lodret menuskabelon med You Are Here

Vertikal navigationsmenu

En lodret navigationsmenu er let at skrive, fordi den vises på samme måde som en normal liste: op og ned. Listeelementerne vises lodret ned på siden.

Når du styler menuer, skal du starte udefra og arbejde ind. Stil først navigationen:

ul # navigation

Gå derefter til elementerne og linkene. Definér først bredden på menuen. Dette sikrer, at hvis menupunkterne er lange, vil elementerne ikke skubbe resten af ​​layoutet over eller forårsage vandret rulning.

ul # navigation {bredde: 12em; }

Når du har indstillet bredden, skal du arbejde på listen. Dette giver dig mulighed for at indstille ting som baggrundsfarver, rammer, tekstjustering og margener.

ul # navigation li {
liste-stil: ingen;
baggrundsfarve: # 039;
kant-top: solid 1px # 039;
tekstjustering: venstre;
margen: 0;
}

Når du har indstillet det grundlæggende for listeelementerne, skal du arbejde på, hvordan menuen ser ud i linksområdet. Stil først navigationen:

UL # navigation LI A

Stil derefter følgende:

Et link
A: besøgte
A: svæv
A: aktiv

For linkene skal du gøre linkene til et blokelement (snarere end standardinline). Dette tvinger links til at tage hele pladsen i LI og fungere som et afsnit, hvilket gør det lettere at oprette links som menuknapper. Fjern derefter følgende:

understregning, tekst-dekoration: ingen; som

Dette får knapperne til at ligne mere på knapper. Dit design kan være anderledes.

ul # navigation li a {
display: blok;
tekst-dekoration: ingen;
polstring: .25em;
kant-bund: solid 1px # 39f;
border-right: solid 1px # 39f;
}

Med display: blok; angivet på linkene, kan hele boksen i menupunktet klikkes, ikke kun bogstaverne. Dette er også godt for brugervenlighed. Indstil linkfarverne (link, besøgte, svævende og aktive), hvis du ønsker, at links skal være forskellige fra standardblå, rød og lilla.

a: link, a: besøgt {color: #fff; }
a: svæver, a: aktiv {farve: # 000; }

Du kan også give svævertilstanden lidt opmærksomhed ved at ændre baggrundsfarven.

a: svæver {baggrundsfarve: #fff; }

Vandret navigationsmenu

Oprettelse af vandrette navigationsmenuer er lidt sværere end lodrette navigationsmenuer, fordi du skal udligne det faktum, at HTML-lister foretrækker at blive vist lodret. Som med den vandrette menu skal du oprette listen over navigationsmenuer:

  • Hjem
  • Produkter
  • Tjenester
  • Kontakt os

For at oprette en vandret menu skal du arbejde som du gjorde med den lodrette menu. Start med det udvendige og arbejd ind. For at starte navigationen i venstre hjørne skal du indstille den med 0 venstre margen og polstring og flyde den til venstre.

Få en vane med at indstille bredden, så din menu ikke optager mere eller mindre plads, end du har til hensigt. I vandrette menuer er dette normalt designens fulde bredde. Du kan også tilføje en baggrundsfarve til listen for at gøre det lettere at læse.

ul # navigation {
flyde: venstre;
margen: 0;
polstring: 0;
bredde: 100%;
baggrundsfarve: # 039;
}

Hemmeligheden bag den vandrette navigationsmenu findes i listen. Listeelementer er normalt blokelementer, hvilket betyder, at disse poster har en ny linje placeret før og efter hver enkelt. Ved at skifte skærm fra blok til inline tvinger du listeelementerne til at stille sig vandret ud for hinanden.

ul # navigation li {display: inline; }

Behandl linkene nøjagtigt som den lodrette navigationsmenu med de samme farver og tekstdekoration. Tilføj en øverste kant for at afgrænse knapperne, når brugeren svæver over en knap. Fjern derefter display: blok; da det sætter de nye linjer tilbage og ødelægger den vandrette menu.

Du er her Placeringsoplysninger

Et andet aspekt af HTML er denne identifikator:

du er her

Hvis du vil ændre din menu for at angive dine brugeres aktuelle placering, skal du bruge dette id til at definere en anden baggrundsfarve eller en anden stil. Flyt dette attribut-id til det korrekte menupunkt på andre sider, så den aktuelle side altid fremhæves.

Hvis du lægger disse stilarter sammen på din side, kan du oprette en vandret eller lodret menulinje, der fungerer sammen med dit websted og er hurtig at downloade og let at opdatere. Brug af XHTML + CSS gør dine lister til et kraftfuldt værktøj til design.

Hvis du vil have flere eksempler på vandrette menuer, skal du søge på internettet efter følgende:

  • En stilret vandret menu
  • En grundlæggende vandret menuskabelon
  • En stilret vandret menu med You Are Here
  • En grundlæggende vandret menuskabelon med You Are Here
instagram story viewer