Kaj je navigacijska vrstica CSS?

V CSS je navigacijska vrstica, znana tudi kot navbar, ki se uporablja v vmesniku za zagotavljanje navigacijskih povezav ali menijev različnim izbirnikom ali uporabnikom strani pri oblikovanju spletnega mesta. Uporabniki lahko enostavno krmarijo po vsebini spletne strani, ki jo uporabljajo kot vizualni vodnik.

uml diagram java

S pomočjo navigacijske vrstice lahko izboljšamo predstavitev in slog spletne strani, vključuje pa tudi dizajn, barve, pisave in razmike, opisane s CSS. Navigacijska vrstica CSS je razvita in oblikovana z uporabo lastnosti in pravil CSS za ustvarjanje posebnega videza in funkcionalnosti.

Značilnosti navigacijske vrstice CSS

Nekatere značilnosti navigacijske vrstice so naslednje:

Možnosti postavitve:V CSS je navigacijska vrstica lahko nameščena bodisi navpično vzdolž strani spletne strani ali pa vodoravno na vrhu.Povezave za navigacijo:Meni vsebuje povezave do različnih strani in razdelkov spletnega mesta. Te povezave imajo pogosto slog gumba, besedila ali ikone.Spustni meniji:Spustni meniji so še ena funkcija, ki jo lahko dodate v navigacijske vrstice. Dodatne povezave ali možnosti so prikazane, ko uporabnik premakne miškin kazalec nad element menija ali ga izbere.slog:CSS oblikovalcem omogoča spreminjanje vizualnih elementov navigacijske vrstice, kot so barve, pisave, obrobe in učinki lebdenja. To pomaga pri ustvarjanju enotnega in vizualno privlačnega dizajna, ki se zlije s celotno estetiko spletnega mesta.Odziven dizajn:Sodobne navigacijske vrstice so pogosto odzivno oblikovane, ki se prilagajajo različnim velikostim zaslona in napravam. S pomočjo odzivnega dizajna lahko zagotovimo, da bo navigacija še naprej privlačna in všečna na namiznih in mobilnih napravah.Interakcija:s pomočjo CSS-ja lahko uporabimo tudi za dodajanje interaktivnih učinkov navigacijskim elementom, kot je spreminjanje barve povezave, ko nanjo kliknemo, lahko pa tudi prikaže učinek osvetlitve, ko se nanjo pomaknemo.

S pomočjo navigacijske vrstice CSS lahko izboljšamo uporabniško izkušnjo in obiskovalcem poenostavimo krmarjenje po vsebini spletne strani, zato je ključen del spletnega oblikovanja.

Primer

Vzemimo preprost primer, kako lahko ustvarimo vodoravno navigacijsko vrstico s pomočjo CSS:

 /* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> 

Izhod:

V vodoravni navigacijski vrstici tega primera je ustvarjenih pet povezav: »Domov«, »Vizitka«, »Storitve«, »Portfelj« in »Stik«. Uporabili smo temeljne lastnosti CSS za oblikovanje navigacijske vrstice, povezav in učinkov lebdenja. Vaš želeni dizajn se lahko odraža v barvah, pisavah, oblazinjenju in drugih slogih.

Omejitev navigacijske vrstice CSS

Obstaja nekaj omejitev navigacijske vrstice CSS, nekatere pa so naslednje:

Omejena zapletenost interakcije:Medtem ko lahko CSS ustvari preproste učinke lebdenja in prehode, bo JavaScript morda moral implementirati bolj zapletene interaktivne funkcije, kot so ugnezdeni spustni meniji z več nivoji.Združljivost med brskalniki:Različni spletni brskalniki lahko različno razlagajo pravila CSS, tako da se navigacijske vrstice lahko prikažejo in obnašajo drugače. Zagotoviti enotno zasnovo v vseh brskalnikih je lahko izziv.Izzivi odzivnega oblikovanja:Izdelava navigacijske vrstice, ki dobro deluje na različnih zaslonih in napravah, je lahko težavna. Za spreminjanje postavitve navigacijske vrstice za različne ločljivosti zaslona so pogosto potrebne medijske poizvedbe in dodatna pravila CSS.Omejena animacija:CSS lahko obravnava osnovne animacije, vendar bodo morda potrebne knjižnice JavaScript ali CSS za ustvarjanje kompleksnejših animacij ali učinkov, kot je gladko drsenje.Kompleksen stil:Ustvarjanje zelo edinstvenih in zapletenih modelov za navigacijske vrstice lahko zahteva sofisticirane tehnike CSS, ki jih je lahko težko posodobiti.Težave z dostopnostjo:Navigacijske vrstice, ki so v celoti izdelane iz CSS, morda ne bodo vedno v skladu s smernicami za bralnike zaslona in druge podporne tehnologije. Da bo navigacija dostopna vsem uporabnikom, je potrebna posebna pozornost.

Kljub tem pomanjkljivostim ostaja vsestranskost in široka uporaba navigacijskih vrstic CSS v spletnem oblikovanju. Vendar jih bo morda treba dopolniti z JavaScriptom in drugimi tehnologijami za bolj izpopolnjene funkcije in brezhibno uporabniško izkušnjo.

Vodoravna vrstica za krmarjenje

Vodoravna navigacijska vrstica je vodoravni seznam povezav, ki je običajno na vrhu strani.

Oglejmo si, kako ustvariti vodoravno navigacijsko vrstico na primeru.

Primer

V tem primeru dodajamo overflow: skrito premoženje, ki preprečuje to elementi izven seznama, prikaz: blok lastnost prikaže povezave kot blokovne elemente in omogoča klikanje celotnega območja povezave.

višina kat timpf

Dodajamo tudi lebdi: levo lastnost, ki uporablja float za doseganje elementov bloka, da jih drsi drug poleg drugega.

Če želimo barvo ozadja polne širine, moramo dodati Barva ozadja premoženje do

git blagajna

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Mejni delilniki

Obrobo med povezavami v navigacijski vrstici lahko dodamo z uporabo meja-desna premoženje. Naslednji primer to pojasni bolj jasno.

Primer

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Popravljene navigacijske vrstice

Ko se pomikamo po strani, fiksne navigacijske vrstice ostanejo na dnu ali vrhu strani. Glej primer istega.

Primer

 ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3>