Què és una barra de navegació CSS?

En CSS, una barra de navegació és, també coneguda com a barra de navegació, utilitzada en una interfície per proporcionar enllaços de navegació o menús a diversos selectors o usuaris de pàgines en el disseny de llocs web. Els usuaris poden navegar fàcilment pel contingut d'un lloc web utilitzant-lo com a guia visual.

afegir a la matriu java

Amb l'ajuda d'una barra de navegació, podem millorar la presentació i l'estil d'una pàgina web, i també inclou el disseny, els colors, els tipus de lletra i l'espaiat descrits amb CSS. Es desenvolupa i dissenya una barra de navegació CSS ​​utilitzant propietats i regles CSS per produir una aparença i una funcionalitat particulars.

Característiques de la barra de navegació CSS

Algunes característiques de la barra de navegació són les següents:

Opcions de disseny:En CSS, una barra de navegació es pot col·locar verticalment al costat d'una pàgina web o bé podem situar-nos horitzontalment a la part superior.Enllaços per a la navegació:El menú conté enllaços a les diferents pàgines i seccions del lloc. Aquests enllaços solen tenir un estil de botó, text o icona.Menús desplegables:Els menús desplegables són una altra característica que es pot afegir a les barres de navegació. Es mostren enllaços o opcions addicionals quan un usuari passa el cursor per sobre o selecciona un element del menú.Estil:CSS permet als dissenyadors alterar els elements visuals de la barra de navegació, com ara els colors, els tipus de lletra, les vores i els efectes del ratolí. Això ajuda a produir un disseny unificat i visualment atractiu que es combina amb l'estètica general del lloc web.Disseny responsive:Les barres de navegació modernes solen ser dissenyades de manera sensible, que s'ajusten a diferents mides de pantalla i dispositius. Amb l'ajuda del disseny responsive, podem garantir que la navegació continuarà sent atractiva i agradable en dispositius d'escriptori i mòbils.Interacció:amb l'ajuda de CSS, també ens podem utilitzar per afegir efectes interactius als elements de navegació, com ara canviar el color de l'enllaç quan es fa clic, o també pot mostrar l'efecte de ressaltat quan es passa el cursor per sobre.

Amb l'ajuda d'una barra de navegació CSS, podem millorar l'experiència de l'usuari i facilitar que els visitants naveguin pel contingut d'un lloc web, de manera que és una part crucial del disseny web.

Exemple

Prenguem un exemple senzill de com podem crear una barra de navegació horitzontal mitjançant 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> 

Sortida:

S'estan creant cinc enllaços a la barra de navegació horitzontal d'aquest exemple: 'Inici', 'Quant a', 'Serveis', 'Cartera' i 'Contacte'. Hem utilitzat propietats CSS fonamentals per dissenyar la barra de navegació, els enllaços i els efectes del cursor. El vostre disseny preferit es pot reflectir en els colors, els tipus de lletra, el farciment i altres estils.

Limitació de la barra de navegació CSS

Hi ha algunes limitacions de la barra de navegació CSS, i algunes són les següents:

Complexitat d'interacció limitada:Tot i que CSS pot produir efectes i transicions senzills, JavaScript pot necessitar implementar funcions interactives més complexes, com ara menús desplegables imbricats amb diversos nivells.Compatibilitat entre navegadors:Diferents navegadors web poden interpretar les regles CSS de manera diferent, de manera que les barres de navegació poden aparèixer i comportar-se de manera diferent. Pot ser un repte garantir un disseny uniforme en tots els navegadors.Reptes de disseny responsive:Fer una barra de navegació que funcioni bé en diverses pantalles i dispositius pot ser difícil. Sovint es requereixen consultes multimèdia i regles CSS addicionals per modificar la disposició de la barra de navegació per a diferents resolucions de pantalla.Animació limitada:CSS pot gestionar animacions bàsiques, però és possible que es necessitin biblioteques JavaScript o CSS per crear animacions o efectes més complexos, com ara un desplaçament suau.Estil complex:La creació de dissenys molt únics i complexos per a barres de navegació pot requerir tècniques CSS sofisticades, que poden ser difícils d'actualitzar.Problemes d'accessibilitat:És possible que les barres de navegació fetes completament de CSS no sempre compleixin les directrius per als lectors de pantalla i altres tecnologies d'assistència. Per garantir que la navegació sigui accessible per a tots els usuaris, s'ha de tenir molta cura.

Malgrat aquests inconvenients, persisteix la versatilitat i l'ús generalitzat de les barres de navegació CSS ​​en el disseny web. Tanmateix, és possible que s'hagin de complementar amb JavaScript i altres tecnologies per obtenir funcions més sofisticades i una experiència d'usuari perfecta.

Barra de navegació horitzontal

La barra de navegació horitzontal és la llista horitzontal d'enllaços, que generalment es troba a la part superior de la pàgina.

Vegem com crear una barra de navegació horitzontal utilitzant un exemple.

Exemple

En aquest exemple, estem afegint el desbordament: amagat propietat que impedeix la això elements de sortir fora de la llista, pantalla: bloc La propietat mostra els enllaços com a elements de bloc i fa que es pugui fer clic a tota l'àrea d'enllaç.

llistes java

També estem afegint el flotar: esquerra propietat, que utilitza float per aconseguir que els elements del bloc els llisquin l'un al costat de l'altre.

Si volem el color de fons d'amplada completa, hem d'afegir el color de fons propietat a

àlgebra relacional en rdbms

 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> 

Separadors de fronteres

Podem afegir la vora entre els enllaços a la barra de navegació utilitzant el frontera-dreta propietat. L'exemple següent ho explica amb més claredat.

Exemple

 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> 

Barres de navegació fixes

Quan ens desplacem per la pàgina, les barres de navegació fixes es mantenen a la part inferior o superior de la pàgina. Vegeu un exemple del mateix.

Exemple

 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>