Qu'est-ce qu'une barre de navigation CSS ?

En CSS, une barre de navigation est également connue sous le nom de barre de navigation utilisée dans une interface pour fournir des liens de navigation ou des menus à divers sélecteurs ou utilisateurs de pages dans la conception de sites Web. Les utilisateurs peuvent facilement naviguer dans le contenu d'un site Web en l'utilisant comme guide visuel.

quels sont les mois du troisième trimestre

À l'aide d'une barre de navigation, nous pouvons améliorer la présentation et le style d'une page Web, et cela inclut également la conception, les couleurs, les polices et l'espacement décrits à l'aide de CSS. Une barre de navigation CSS est développée et stylisée à l'aide de propriétés et de règles CSS pour produire une apparence et une fonctionnalité particulières.

Caractéristiques de la barre de navigation CSS

Certaines caractéristiques de la barre de navigation sont les suivantes :

Options de mise en page :En CSS, une barre de navigation peut être positionnée soit verticalement sur le côté d'une page Web, soit horizontalement en haut.Liens pour la navigation :Le menu contient des liens vers les différentes pages et sections du site. Ces liens ont souvent un style de bouton, de texte ou d’icône.Menus déroulants :Les menus déroulants sont une autre fonctionnalité qui peut être ajoutée aux barres de navigation. Des liens ou des options supplémentaires sont affichés lorsqu'un utilisateur survole ou sélectionne un élément de menu.Style:CSS permet aux concepteurs de modifier les éléments visuels de la barre de navigation, tels que les couleurs, les polices, les bordures et les effets de survol. Cela aide à produire un design unifié et visuellement attrayant qui se fond dans l’esthétique globale du site Web.Conception réactive :Les barres de navigation modernes sont souvent conçues de manière réactive, et s'adaptent à différentes tailles d'écran et appareils. Grâce à un design réactif, nous pouvons garantir que la navigation continuera à être attrayante et agréable sur les ordinateurs de bureau et les appareils mobiles.Interaction:avec l'aide de CSS, nous pouvons également être utilisés pour ajouter des effets interactifs aux éléments de navigation, comme changer la couleur du lien lorsqu'on clique dessus, ou il peut également afficher l'effet de surbrillance lorsqu'il est survolé.

Avec l'aide d'une barre de navigation CSS, nous pouvons améliorer l'expérience utilisateur et simplifier la navigation des visiteurs dans le contenu d'un site Web. Il s'agit donc d'un élément crucial de la conception Web.

Exemple

Prenons un exemple simple de la façon dont nous pouvons créer une barre de navigation horizontale en utilisant 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> 

Sortir:

Cinq liens sont créés dans la barre de navigation horizontale de cet exemple : « Accueil », « À propos », « Services », « Portefeuille » et « Contact ». Nous avons utilisé des propriétés CSS fondamentales pour styliser la barre de navigation, les liens et les effets de survol. Votre design préféré peut se refléter dans les couleurs, les polices, le remplissage et d’autres styles.

Limitation de la barre de navigation CSS

Il existe certaines limitations de la barre de navigation CSS, et certaines sont les suivantes :

Complexité d'interaction limitée :Alors que CSS peut produire des effets de survol et des transitions simples, JavaScript devra peut-être implémenter des fonctionnalités interactives plus complexes telles que des menus déroulants imbriqués à plusieurs niveaux.Compatibilité entre navigateurs :Différents navigateurs Web peuvent interpréter différemment les règles CSS, de sorte que les barres de navigation peuvent apparaître et se comporter différemment. Il peut être difficile de garantir une conception uniforme sur tous les navigateurs.Défis de conception réactive :Créer une barre de navigation qui fonctionne bien sur différents écrans et appareils peut être difficile. Des requêtes multimédias et des règles CSS supplémentaires sont fréquemment nécessaires pour modifier la disposition de la barre de navigation pour différentes résolutions d'écran.Animation limitée :CSS peut gérer des animations de base, mais des bibliothèques JavaScript ou CSS peuvent être nécessaires pour créer des animations ou des effets plus complexes, tels qu'un défilement fluide.Style complexe :La création de conceptions très uniques et complexes pour les barres de navigation peut nécessiter des techniques CSS sophistiquées, qui peuvent être difficiles à mettre à jour.Problèmes d'accessibilité :Les barres de navigation entièrement constituées de CSS peuvent ne pas toujours respecter les directives relatives aux lecteurs d'écran et autres technologies d'assistance. Pour garantir que la navigation soit accessible à tous les utilisateurs, des précautions supplémentaires doivent être prises.

Malgré ces inconvénients, la polyvalence et l’utilisation généralisée des barres de navigation CSS dans la conception Web persistent. Cependant, ils devront peut-être être complétés par JavaScript et d'autres technologies pour des fonctionnalités plus sophistiquées et une expérience utilisateur transparente.

Barre de navigation horizontale

La barre de navigation horizontale est la liste horizontale de liens, qui se trouve généralement en haut de la page.

Voyons comment créer une barre de navigation horizontale à l'aide d'un exemple.

Exemple

Dans cet exemple, nous ajoutons le débordement caché propriété qui empêche le que éléments de sortir de la liste, bloc de visualisation La propriété affiche les liens en tant qu'éléments de bloc et rend toute la zone de lien cliquable.

Java lance une exception

Nous ajoutons également le flotteur : gauche propriété, qui utilise float pour faire glisser les éléments de bloc les uns à côté des autres.

Si nous voulons la couleur d'arrière-plan sur toute la largeur, nous devons ajouter le Couleur de l'arrière plan propriété à

Rakhi Sawant

 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> 

Séparateurs de frontières

Nous pouvons ajouter la bordure entre les liens dans la barre de navigation en utilisant le bordure droite propriété. L'exemple suivant l'explique plus clairement.

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 navigation fixes

Lorsque l'on fait défiler la page, les barres de navigation fixes restent en bas ou en haut de la page. Voir un exemple de la même chose.

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>