Hvordan lage og designe en navigasjonslinje i CSS?
Nå, bare å ha en navigasjonslinje er ikke viktig, snarere å ha en flink navigasjonslinje har mye mer betydning. I dette innlegget vil vi veilede hvordan du lager og designer en navigasjonslinje.
La oss komme i gang.
Type navigasjonsstenger
En navigasjonslinje kan være av to typer som er som følger.
- Horisontal navigasjonslinje
- Vertikal navigasjonslinje
La oss diskutere disse i detalj.
Horisontal navigasjonslinje
For å lage en horisontal navigasjonslinje, kan du enten bruke lister eller topnav. La oss utforske disse tilnærmingene ved hjelp av eksempler.
Opprette en navigasjonslinje ved hjelp av lister
Inline -listeelementer kan brukes til å lage en horisontal navigasjonslinje.
Eksempel
Dette eksemplet viser hvordan du lager en veldig grunnleggende navigasjonslinje ved hjelp av inline
Html
Her har vi laget noen listeartikler og nestet noen få ankerkoder inne i
CSS
ulList-stil-type: Ingen;
Margin: 0;
polstring: 0;
li
Display: Inline;
A
Farge: grønn;
tekst-align: sentrum;
polstring: 15px 18px;
Tekstdekorasjon: Ingen;
Font-størrelse: 17px;
Som standard
- Elementer skal gis en margin og polstring av 0px, og listestiltypen skal settes til ingen. Til slutt har vi designet ankerkodene etter vårt ønske.
Produksjon
En horisontal navigasjonslinje ble opprettet ved hjelp av inline listeelementer.
Opprette en navigasjonslinje ved hjelp av div
La oss utforske hvordan du lager en horisontal navigasjonslinje ved hjelp av DIV.
Html
Hjem
Om
Tjenester
Kontakt oss
I ovennevnte HTML -kode har vi opprettet en div, og vi har tildelt den Topnav klasse. Inne i den diven har vi nestet fire ankerkoder og den første ankerkoden har fått klassen aktiv som gjør at brukeren kan vite hvilken seksjon han/hun er på.
CSS
kroppMargin: 0;
.topnav
bakgrunnsfarge: grå;
overløp: skjult;
.topnav a
FLOAT: Venstre;
Farge: Hvit;
tekst-align: sentrum;
polstring: 15px 18px;
Tekstdekorasjon: Ingen;
Font-størrelse: 17px;
.topnav a: hover
Bakgrunnsfarge: Ghostwhite;
farge svart;
.topnav a.aktiv
bakgrunnsfarge: laks;
Farge: Hvit;
Topnav -klassen brukes til å legge til en bakgrunnsfarge til hele navigasjonslinjen. Vi stylet deretter koblingene som er til stede i DIV -beholderen i henhold til våre krav. Dessuten har vi lagt til stylingen for svev og aktiv effekt på navigasjonskoblingen.
Produksjon
Ved hjelp av DIV og TAG har vi laget en horisontal navigasjonslinje.
Mer om horisontal navigasjonslinje!
Det er noen morsomme ting du kan legge til navigasjonslinjen din, la oss utforske dem.
Hvordan du flyter en lenke til høyre i en navigasjonslinje
En interessant ting du kan gjøre er at du kan flyte en lenke til stede i navigasjonslinjen til høyre hvis du vil. Sett flytegenskapen til den aktuelle lenken til høyre og se endringen.
Hjem
Om
Tjenester
Kontakt oss
Her har vi satt flytegenskapen til den siste ankerkoden til høyre og dessuten tildelt den en aktiv klasse.
Produksjon
En lenke ble flyttet til høyre.
Hvordan lage en topp fast navigasjonslinje
For å fikse navigasjonslinjen til toppen, gi DIV -beholderen en fast stilling og litt bredde.
Html
Hjem
Om
Tjenester
Kontakt oss
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
Noe innhold.
For å vise til arbeidet med en fast toppnavigasjonslinje har vi laget et Palenty of Content for å demonstrere den faste navigasjonslinjen.
CSS
.topnavbakgrunnsfarge: grå;
overløp: skjult;
Posisjon: Fast;
Topp: 0;
Bredde: 100%;
.innhold
polstring: 20px;
Høyde: 1000px;
Vi tildeler navigasjonslinjen en fast stilling og en bredde 100%. Videre setter vi toppen til 0px.
Produksjon
En fast toppnavigasjonslinje ble opprettet vellykket.
Hvordan lage en fast fast navigasjonslinje
Du kan også opprette en fast bunnnavigasjonslinje. Slik gjør du det.
CSS
.topnavbakgrunnsfarge: grå;
overløp: skjult;
Posisjon: Fast;
Bunn: 0;
Bredde: 100%;
Her foruten å gi navigasjonslinjen en fast stilling, er bunnen satt til 0px.
Produksjon
Den faste bunnnavigasjonslinjen fungerer som den skal.
Hvordan lage en klissete navigasjonslinje
For å lage en klissete navigasjonslinje, bruk den klissete verdien av CSS -posisjonseiendommen.
CSS
.topnavbakgrunnsfarge: grå;
overløp: skjult;
Posisjon: klissete;
Topp: 0;
Her har vi satt posisjonen til navigasjonslinjen til Sticky.
Produksjon
En klissete navigasjonslinje ble opprettet med hell.
Vertikal navigasjonslinje
For å lage en vertikal navigasjonslinje, er alt du trenger å gjøre å stille visningen av koblingene inne i navigasjonslinjen for å blokkere ved hjelp av CSS Display Block -egenskapen.
CSS
.topnav aDisplay: Block;
Farge: Hvit;
tekst-align: sentrum;
polstring: 15px 18px;
Tekstdekorasjon: Ingen;
Font-størrelse: 17px;
Ankerkodene vises som elementer på blokknivå for å lage en vertikal navigasjonslinje.
Produksjon
En vertikal navigasjonslinje ble opprettet vellykket.
Hvordan justere den vertikale navigasjonslinjen
For å justere den vertikale navigasjonslinjen din kan du flyte den til ønsket posisjon sammen med å gi den litt bredde.
CSS
.topnavbakgrunnsfarge: grå;
Bredde: 30%;
FLOAT: HØYRE;
overløp: skjult;
Her setter vi float -egenskapen til høyre og gir div en bredde på 30%.
Produksjon
Den vertikale navigasjonslinjen ble flyttet til høyre.
Konklusjon
En navigasjonslinje spiller en viktig rolle i å øke brukeropplevelsen til et nettsted, derfor kan du lage en hyggelig navigasjonslinje ved å bruke forskjellige tilnærminger. For å lage en horisontal navigasjonslinje kan du bruke enten HTML -listeelementer eller kombinasjon av DIV og TAG i CSS. Du kan gjøre mange morsomme ting med navigasjonslinjen din, for eksempel å flyte en lenke til høyre, gjøre det til en fast navigasjonslinje, eller gjør den til en klissete i henhold til dine krav. Foruten dette, kan du også opprette en vertikal navigasjonslinje ved å vise lenker som elementer på blokknivå. Dette innlegget guider deg alt om å lage og designe en navigasjonslinje.