Kas ir CSS navigācijas josla?

CSS sistēmā navigācijas josla ir pazīstama arī kā navigācijas josla, ko izmanto saskarnē, lai nodrošinātu navigācijas saites vai izvēlnes dažādiem atlasītājiem vai lapu lietotājiem vietnes dizainā. Lietotāji var viegli pārvietoties vietnes saturā, izmantojot to kā vizuālu ceļvedi.

python konstruktors

Ar navigācijas joslas palīdzību mēs varam uzlabot tīmekļa lapas prezentāciju un stilu, kā arī tajā ir iekļauts dizains, krāsas, fonti un atstarpes, kas aprakstītas, izmantojot CSS. CSS navigācijas josla ir izstrādāta un veidota, izmantojot CSS rekvizītus un noteikumus, lai radītu īpašu izskatu un funkcionalitāti.

CSS navigācijas joslas raksturojums

Dažas navigācijas joslas īpašības ir šādas:

Izkārtojuma opcijas:CSS navigācijas joslu var novietot vai nu vertikāli gar tīmekļa lapas malu, vai arī mēs varam novietot horizontāli augšpusē.Saites navigācijai:Izvēlnē ir saites uz dažādām vietnes lapām un sadaļām. Šīm saitēm bieži ir pogas, teksts vai ikonas.Nolaižamās izvēlnes:Nolaižamās izvēlnes ir vēl viena funkcija, ko var pievienot navigācijas joslām. Papildu saites vai opcijas tiek parādītas, kad lietotājs virza kursoru virs izvēlnes vienuma vai atlasa to.Stils:CSS ļauj dizaineriem mainīt navigācijas joslas vizuālos elementus, piemēram, krāsas, fontus, apmales un kursora efektus. Tas palīdz izveidot vienotu un vizuāli pievilcīgu dizainu, kas saplūst ar vietnes vispārējo estētiku.Atsaucīgs dizains:Mūsdienu navigācijas joslas bieži tiek veidotas atsaucīgi, pielāgojoties dažādiem ekrāna izmēriem un ierīcēm. Ar responsīvā dizaina palīdzību varam garantēt, ka navigācija arī turpmāk būs pievilcīga un patīkama gan galddatorā, gan mobilajās ierīcēs.Mijiedarbība:ar CSS palīdzību mūs var izmantot arī, lai navigācijas elementiem pievienotu interaktīvus efektus, piemēram, mainot saites krāsu, noklikšķinot uz tās, vai arī var parādīt izcelšanas efektu, kad tiek virzīts kursors virs tās.

Ar CSS navigācijas joslas palīdzību mēs varam uzlabot lietotāja pieredzi un atvieglot apmeklētājiem navigāciju vietnes saturā, tāpēc tā ir būtiska tīmekļa dizaina sastāvdaļa.

Piemērs

Ņemsim vienkāršu piemēru, kā mēs varam izveidot horizontālu navigācijas joslu, izmantojot 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> 

Izvade:

Šī piemēra horizontālajā navigācijas joslā tiek izveidotas piecas saites: 'Sākums', 'Par', 'Pakalpojumi', 'Portfelis' un 'Kontaktpersona'. Mēs esam izmantojuši pamata CSS rekvizītus, lai veidotu navigācijas joslu, saites un kursora novietošanas efektus. Jūsu izvēlētais dizains var tikt atspoguļots krāsās, fontos, polsterējumos un citos stilos.

CSS navigācijas joslas ierobežojums

CSS navigācijas joslai ir daži ierobežojumi, un daži no tiem ir šādi:

Ierobežota mijiedarbības sarežģītība:Lai gan CSS var radīt vienkāršus pārvietošanas efektus un pārejas, JavaScript var būt nepieciešams ieviest sarežģītākas interaktīvas funkcijas, piemēram, ligzdotas nolaižamās izvēlnes ar vairākiem līmeņiem.Saderība starp pārlūkprogrammām:Dažādas tīmekļa pārlūkprogrammas var atšķirīgi interpretēt CSS noteikumus, tādējādi navigācijas joslas var parādīties un darboties atšķirīgi. Var būt sarežģīti nodrošināt vienotu dizainu visās pārlūkprogrammās.Adaptīva dizaina izaicinājumi:Var būt grūti izveidot navigācijas joslu, kas labi darbotos dažādos ekrānos un ierīcēs. Lai mainītu navigācijas joslas izkārtojumu dažādām ekrāna izšķirtspējām, bieži ir nepieciešami multivides vaicājumi un papildu CSS kārtulas.Ierobežota animācija:CSS var apstrādāt pamata animācijas, bet JavaScript vai CSS bibliotēkas var būt nepieciešamas, lai izveidotu sarežģītākas animācijas vai efektus, piemēram, vienmērīgu ritināšanu.Sarežģīts stils:Lai izveidotu ļoti unikālus un sarežģītus navigācijas joslu dizainus, var būt nepieciešamas sarežģītas CSS metodes, kuras var būt grūti atjaunināt.Pieejamības problēmas:Navigācijas joslas, kas pilnībā izgatavotas no CSS, ne vienmēr var atbilst ekrāna lasītāju un citu palīgtehnoloģiju vadlīnijām. Lai nodrošinātu, ka navigācija ir pieejama visiem lietotājiem, ir jābūt īpaši uzmanīgiem.

Neskatoties uz šiem trūkumiem, CSS navigācijas joslu daudzpusība un plaši izplatīta izmantošana tīmekļa dizainā joprojām pastāv. Tomēr tie, iespējams, būs jāpapildina ar JavaScript un citām tehnoloģijām, lai iegūtu sarežģītākas funkcijas un nevainojamu lietotāja pieredzi.

Horizontālā navigācijas josla

Horizontālā navigācijas josla ir horizontāls saišu saraksts, kas parasti atrodas lapas augšdaļā.

Apskatīsim, kā izveidot horizontālu navigācijas joslu, izmantojot piemēru.

Piemērs

Šajā piemērā mēs pievienojam pārplūde: paslēpta īpašums, kas novērš ka elementi, kas neietilpst sarakstā, displejs: bloks rekvizīts parāda saites kā bloka elementus un padara visu saites apgabalu klikšķināmu.

mašīnrakstā foreach cilpa

Mēs arī pievienojam pludiņš: pa kreisi īpašība, kas izmanto pludiņu, lai panāktu, ka bloka elementi tiek bīdīti blakus.

Ja mēs vēlamies pilna platuma fona krāsu, mums ir jāpievieno fona krāsa īpašumu uz

javascript window.open

 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> 

Robežu dalītāji

Mēs varam pievienot robežu starp saitēm navigācijas joslā, izmantojot robeža-labā īpašums. Nākamais piemērs to izskaidro skaidrāk.

Piemērs

 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> 

Fiksētas navigācijas joslas

Kad mēs ritinām lapu, fiksētas navigācijas joslas paliek lapas apakšā vai augšpusē. Skatiet to pašu piemēru.

Piemērs

 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>