elementer og den relaterte lenken vil bli spesifisert i taggen. Html
Vertikal navigasjon Som et resultat vil strukturen i navigasjonsmenyen se slik ut:
CSS kan brukes til å transformere vanlige HTML -menyer til visuelt tiltalende navigasjonsstenger. Så la oss bruke CSS -egenskaper på de ekstra HTML -elementene.
Stil alle elementer
* Alle elementene i HTML -filen er utstyrt med margin- og polstringsegenskapene med verdien som er 0px.
Stil vertikal-nav
.vertikal-nav “.vertikal-nav ”Brukes til å få tilgang til div-klassen vertikal-nav. Følgende er egenskapene som brukes på det:
“bakgrunnsfarge ”Angir fargen på elementets bakgrunn. “bredde ”Eiendom justerer elementets bredde. “høyde ”Eiendom justerer elementets høyde. “Padding-venstre ”Eiendom setter plass til venstre for elementets innhold. “Padding-top ”Eiendom setter plass på toppen av elementets innhold. “Font-familie ”Eiendom bruker skriftstil på elementets tekst. Listen er gitt for å sikre at om nettleseren ikke støtter den første stilen, vil den andre bli brukt på skriften. Stil H1-element i vertikal-NAV DIV
.vertikal-nav h1 Følgende egenskaper brukes på overskriften H1 -elementet:
“marginbunn ”Eiendom setter plassen nederst på overskriften. “farge ”Egenskaper angir den spesifiserte skriftfargen. Så langt vil de anvendte egenskapene vise navigasjonsmenyen som vist i bildet nedenfor:
La oss nå fjerne kulene fra listen.
Stil “ul” element i vertikal-nav Div
.vertikal-nav ul “Listestil ”Eiendom med verdien som“ingen ”Vil fjerne kulene fra listen.
Stil “et” element av Li -elementet
.vertikal-nav ul li a “.vertikal-nav ul li a a ”Definerer banen til taggen. Følgende egenskaper brukes på det:
“tekstdekorasjon ”Med verdien”ingen ”Fjerner understreket dekorasjon fra listen. “vise ”Eiendom med verdien som“blokkere ”Vil angi hvert listeelement i en linje. “bredde ”Eiendom brukes til innstilling av elementets bredde. “bakgrunn ”Eiendom brukes til å legge til effekter på elementets bakgrunn. “farge ”Eiendom spesifiserer skriftfargen. “Bokseskygge ”Eiendom spesifiserer x- og y -forskyvningene, uskarpe og spredte radius og farge på skyggen. “Border-Radius ”Eiendom gjør elementets kanter rundt. “margin ”Eiendom setter plassen rundt elementet. “polstring ”Eiendom spesifiserer plass rundt elementets innhold. Som et resultat vil navigasjonslinjen se ut som følger:
La oss bruke noen overgangseffekter på navigasjonsmenyene som er opprettet ovenfor.
Bonustips: Bruk overgang på den vertikale navigasjonsmenyen
Nå vil vi bruke overgangen til “en ”Element:
Overgang: alle 0.3s letthet; Her er beskrivelsen av den ovennevnte kodeblokken:
Overgangseiendom er spesifisert som "alle ”Som betyr overgangen som brukes på alle egenskapene. Overgangsforsyning er spesifisert som "0.3s ”. Overgangstiming-funksjon er spesifisert som "letthet ”, Noe som resulterer i en økning i hastigheten til midten av overgangen og deretter bremser ned igjen på slutten. Stil “et” element på svevet
.vertikal-nav ul li a: hover Ovennevnte egenskaper som brukes på "A" -elementet i den vertikale naven er beskrevet nedenfor:
“bakgrunnsfarge ”Eiendom spesifiserer fargen på elementets bakgrunn. “farge ”Eiendom spesifiserer fargen på elementets skrift. “forvandle ”Eiendom brukes med verdien som skala (1.1, 1.5). Denne skalaen () -funksjonen definerer en 2D -plan -transformasjon. Lagre den ovennevnte koden og åpne den i nettleseren. Navigasjonsmenylinjen vil se slik ut:
Vi har lært å lage en vertikal navigasjonsmeny med CSS.
Konklusjon
Navigasjonslinjen spiller en viktig rolle i å lage enhver brukervennlig nettsted. Den består av en liste over lenker til forskjellige deler av applikasjonen. I HTML, The
og Elementer brukes til å lage listen over lenker, spesielt i navigasjonslinjen. For å gjøre dem interaktive, blir forskjellige stylingegenskaper brukt på dem ved hjelp av CSS. Denne studien har forklart prosedyren for å lage og animere en vertikal navigasjonsmeny med CSS.
