Što je CSS navigacijska traka?

U CSS-u, navigacijska traka je također poznata kao navigacijska traka koja se koristi u sučelju za pružanje navigacijskih veza ili izbornika raznim biračima ili korisnicima stranice u dizajnu web stranice. Korisnici se mogu jednostavno kretati sadržajem web stranice koristeći ga kao vizualni vodič.

java povezivost

Uz pomoć navigacijske trake možemo poboljšati prezentaciju i stil web stranice, a ona također uključuje dizajn, boje, fontove i razmake opisane pomoću CSS-a. CSS navigacijska traka razvijena je i stilizirana korištenjem CSS svojstava i pravila za stvaranje određenog izgleda i funkcionalnosti.

Karakteristike CSS navigacijske trake

Neke karakteristike navigacijske trake su sljedeće:

Mogućnosti izgleda:U CSS-u, navigacijska traka može biti postavljena okomito uz rub web-stranice ili se može postaviti vodoravno preko vrha.Veze za navigaciju:Izbornik sadrži poveznice na različite stranice i odjeljke stranice. Ove veze često imaju stil gumba, teksta ili ikona.Padajući izbornici:Padajući izbornici još su jedna značajka koja se može dodati navigacijskim trakama. Dodatne veze ili opcije prikazuju se kada korisnik zadrži pokazivač iznad ili odabere stavku izbornika.Stil:CSS dizajnerima omogućuje promjenu vizualnih elemenata navigacijske trake, kao što su boje, fontovi, obrubi i efekti lebdenja. To pomaže u stvaranju jedinstvenog i vizualno privlačnog dizajna koji se stapa s cjelokupnom estetikom web stranice.Responzivni dizajn:Moderne navigacijske trake često su responzivno dizajnirane, koje se prilagođavaju različitim veličinama zaslona i uređajima. Uz pomoć responzivnog dizajna možemo jamčiti da će navigacija i dalje biti atraktivna i ugodna na stolnim i mobilnim uređajima.Interakcija:uz pomoć CSS-a, također se možemo koristiti za dodavanje interaktivnih efekata navigacijskim elementima, kao što je promjena boje veze kada se na nju klikne, ili također može pokazati efekt isticanja kada se iznad nje zadrži pokazivač.

Uz pomoć CSS navigacijske trake možemo poboljšati korisničko iskustvo i posjetiteljima olakšati navigaciju sadržajem web stranice, stoga je to ključni dio web dizajna.

Primjer

Uzmimo jednostavan primjer kako možemo stvoriti horizontalnu navigacijsku traku koristeći 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> 

Izlaz:

Na vodoravnoj navigacijskoj traci ovog primjera stvara se pet veza: 'Početna', 'O', 'Usluge', 'Portfelj' i 'Kontakt'. Koristili smo temeljna CSS svojstva za stiliziranje navigacijske trake, veza i efekata lebdenja. Vaš željeni dizajn može se odražavati u bojama, fontovima, ispunama i drugim stilovima.

Ograničenje CSS navigacijske trake

Postoje neka ograničenja CSS navigacijske trake, a neka su sljedeća:

Ograničena složenost interakcije:Dok CSS može proizvesti jednostavne efekte lebdenja i prijelaze, JavaScript će možda trebati implementirati složenije interaktivne značajke poput ugniježđenih padajućih izbornika s više razina.Kompatibilnost s više preglednika:Različiti web preglednici mogu različito tumačiti CSS pravila tako da se navigacijske trake mogu pojaviti i ponašati drugačije. Može biti izazovno osigurati jedinstven dizajn u svim preglednicima.Izazovi responzivnog dizajna:Izrada navigacijske trake koja dobro funkcionira na različitim zaslonima i uređajima može biti teška. Medijski upiti i dodatna CSS pravila često su potrebni za izmjenu izgleda navigacijske trake za različite rezolucije zaslona.Ograničena animacija:CSS može rukovati osnovnim animacijama, ali JavaScript ili CSS biblioteke mogu biti potrebne za stvaranje složenijih animacija ili efekata, kao što je glatko pomicanje.Složeni stil:Stvaranje vrlo jedinstvenog i zamršenog dizajna za navigacijske trake može zahtijevati sofisticirane CSS tehnike, čije ažuriranje može biti izazovno.Problemi s pristupačnošću:Navigacijske trake izrađene u potpunosti od CSS-a možda se neće uvijek pridržavati smjernica za čitače zaslona i druge pomoćne tehnologije. Kako biste bili sigurni da je navigacija dostupna svim korisnicima, potrebno je posvetiti dodatnu pozornost.

Unatoč ovim nedostacima, svestranost i široka uporaba CSS navigacijskih traka u web dizajnu i dalje su prisutni. Međutim, možda će ih trebati nadopuniti JavaScriptom i drugim tehnologijama za sofisticiranije značajke i besprijekorno korisničko iskustvo.

Vodoravna navigacijska traka

Vodoravna navigacijska traka vodoravni je popis poveznica, koji se obično nalazi na vrhu stranice.

Pogledajmo kako stvoriti vodoravnu navigacijsku traku pomoću primjera.

Primjer

U ovom primjeru dodajemo preljev: skriven svojstvo koje sprječava da elementi izvan popisa, prikaz: blok svojstvo prikazuje veze kao elemente bloka i omogućuje klikanje na cijelo područje veze.

java učiniti dok

Također dodajemo i plovak: lijevo svojstvo, koje koristi float da bi blok elementi klizali jedan pored drugog.

Ako želimo pozadinsku boju pune širine, tada moramo dodati boja pozadine vlasništvo na

rukovanje java iznimkama

 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> 

Razdjelnici granica

Možemo dodati granicu između veza u navigacijskoj traci pomoću granica-desno vlasništvo. Sljedeći primjer to jasnije objašnjava.

Primjer

 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 trake

Kada se pomičemo po stranici, fiksne navigacijske trake ostaju pri dnu ili vrhu stranice. Pogledajte primjer istog.

Primjer

 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>