Ce este o bară de navigare CSS?

În CSS, o bară de navigare este, de asemenea, cunoscută ca o bară de navigare, utilizată într-o interfață pentru a oferi link-uri sau meniuri de navigare diverșilor selectori sau utilizatori ai paginilor în designul site-ului web. Utilizatorii pot naviga cu ușurință în conținutul unui site web folosindu-l ca ghid vizual.

bash elif

Cu ajutorul unei bare de navigare, putem îmbunătăți prezentarea și stilul unei pagini web și include și designul, culorile, fonturile și spațierea descrise folosind CSS. O bară de navigare CSS este dezvoltată și stilată folosind proprietățile și regulile CSS pentru a produce un aspect și o funcționalitate anume.

Caracteristicile barei de navigare CSS

Unele caracteristici ale barei de navigare sunt următoarele:

Opțiuni de aspect:În CSS, o bară de navigare poate fi poziționată fie vertical de-a lungul unei pagini web, fie o putem poziționa orizontal în partea de sus.Link-uri pentru navigare:Meniul conține link-uri către diferitele pagini și secțiuni ale site-ului. Aceste linkuri au adesea stil de buton, text sau pictogramă.Meniuri derulante:Meniurile drop-down sunt o altă caracteristică care poate fi adăugată la barele de navigare. Linkuri sau opțiuni suplimentare sunt afișate atunci când un utilizator trece cu mouse-ul peste sau selectează un element de meniu.Stil:CSS le permite designerilor să modifice elementele vizuale ale barei de navigare, cum ar fi culorile, fonturile, marginile și efectele de trecere cu mouse-ul. Acest lucru ajută la producerea unui design unificat și atrăgător din punct de vedere vizual, care se îmbină cu estetica generală a site-ului.Design receptiv:Barele de navigare moderne sunt deseori proiectate receptiv, care se adaptează la diferite dimensiuni de ecran și dispozitive. Cu ajutorul designului responsive, putem garanta că navigarea va continua să fie atractivă și plăcută pe desktop și dispozitive mobile.Interacţiune:cu ajutorul CSS, putem fi folosiți și pentru a adăuga efecte interactive elementelor de navigare, cum ar fi schimbarea culorii link-ului atunci când este făcut clic, sau poate afișa și efectul de evidențiere atunci când trece cu mouse-ul deasupra.

Cu ajutorul unei bare de navigare CSS, putem îmbunătăți experiența utilizatorului și simplifică navigarea în conținutul unui site web, astfel încât acesta este o parte crucială a designului web.

Exemplu

Să luăm un exemplu simplu despre cum putem crea o bară de navigare orizontală folosind 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> 

Ieșire:

Cinci linkuri sunt create în bara de navigare orizontală a acestui exemplu: „Acasă”, „Despre”, „Servicii”, „Portofoliu” și „Contact”. Am folosit proprietățile CSS fundamentale pentru a stila bara de navigare, linkurile și efectele de trecere cu mouse-ul. Designul dvs. preferat se poate reflecta în culori, fonturi, umplutură și alte stiluri.

Limitarea barei de navigare CSS

Există unele limitări ale barei de navigare CSS, iar unele sunt după cum urmează:

Complexitate limitată de interacțiune:În timp ce CSS poate produce efecte simple de trecere cu mouse-ul și tranziții, JavaScript poate avea nevoie să implementeze funcții interactive mai complexe, cum ar fi meniuri derulante imbricate cu mai multe niveluri.Compatibilitate între browsere:Diferitele browsere web pot interpreta în mod diferit regulile CSS, astfel încât barele de navigare să apară și să se comporte diferit. Poate fi dificil să se asigure un design uniform în toate browserele.Provocări de design receptiv:Crearea unei bare de navigare care să funcționeze bine pe diferite ecrane și dispozitive poate fi dificilă. Interogările media și regulile CSS suplimentare sunt adesea necesare pentru a modifica aspectul barei de navigare pentru diferite rezoluții de ecran.Animație limitată:CSS poate gestiona animațiile de bază, dar bibliotecile JavaScript sau CSS pot fi necesare pentru a crea animații sau efecte mai complexe, cum ar fi derularea lină.Styling complex:Crearea de modele extrem de unice și complicate pentru barele de navigare poate necesita tehnici CSS sofisticate, care pot fi dificil de actualizat.Probleme de accesibilitate:Este posibil ca barele de navigare realizate în întregime din CSS să nu adere întotdeauna la instrucțiunile pentru cititoarele de ecran și alte tehnologii de asistență. Pentru a vă asigura că navigarea este accesibilă tuturor utilizatorilor, trebuie luată o atenție sporită.

În ciuda acestor dezavantaje, versatilitatea și utilizarea pe scară largă a barelor de navigare CSS în design web persistă. Cu toate acestea, ar putea fi necesar să fie completate cu JavaScript și alte tehnologii pentru funcții mai sofisticate și o experiență de utilizator fără întreruperi.

Bara de navigare orizontală

Bara de navigare orizontală este lista orizontală de linkuri, care se află în general în partea de sus a paginii.

Să vedem cum să creați o bară de navigare orizontală folosind un exemplu.

Exemplu

În acest exemplu, adăugăm debordare: ascuns proprietate care împiedică acea elemente din afara listei, afisare: bloc proprietatea afișează legăturile ca elemente de bloc și face clic pe întreaga zonă a legăturii.

clasa de scanare java

Adăugăm, de asemenea, plutește la stânga proprietate, care folosește float pentru ca elementele bloc să le alunece unul lângă celălalt.

Dacă vrem culoarea de fundal cu lățime completă, atunci trebuie să adăugăm culoare de fundal proprietate la

matrice de șiruri în c

 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> 

Despărțitori de frontieră

Putem adăuga granița dintre legături în bara de navigare folosind granita-dreapta proprietate. Următorul exemplu explică mai clar.

Exemplu

 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> 

Bare de navigare fixe

Când derulăm pagina, barele de navigare fixe rămân în partea de jos sau de sus a paginii. Vezi un exemplu de același lucru.

Exemplu

 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>