Comment créer et concevoir une barre de navigation dans CSS?

Html

• Maison


• À propos


• Prestations de service


• Contactez-nous

Ici, nous avons créé des éléments de liste et imbriqué quelques balises d'ancrage à l'intérieur du

CSS

Par défaut

Les éléments doivent recevoir une marge et un rembourrage de 0px, et le type de style de liste doit être défini sur aucun. Enfin, nous avons conçu les étiquettes d'ancrage en fonction de notre désir.

Sortir

Une barre de navigation horizontale a été créée à l'aide d'éléments de liste en ligne.

Création d'une barre de navigation à l'aide de div

Explorons comment faire une barre de navigation horizontale à l'aide de div.

Html


Maison
À propos
Prestations de service
Contactez-nous


Dans le code HTML ci-dessus, nous avons créé une div et nous l'avons attribué le topnav classe. À l'intérieur de cette div, nous avons imbriqué quatre balises d'ancrage et la première balise d'ancrage a été donnée à la classe active qui permet à l'utilisateur de savoir quelle section il / elle se trouve.

CSS

corps
marge: 0;

.topnav
Color en arrière-plan: gris;
débordement caché;

.topnav a
flottant: à gauche;
Couleur blanche;
Texte-aligne: Centre;
rembourrage: 15px 18px;
Décoration du texte: aucune;
taille de police: 17px;

.topnav a: hover
Color en arrière-plan: Ghostwhite;
la couleur noire;

.topnav a.actif
Color en arrière-plan: saumon;
Couleur blanche;


La classe topnav est utilisée pour ajouter une couleur d'arrière-plan à toute la barre de navigation. Nous avons ensuite stylé les liens présents à l'intérieur du conteneur Div selon nos exigences. De plus, nous avons ajouté le style de survol et d'effet actif sur le lien de navigation.

Sortir

En utilisant le div et la balise, nous avons réussi à créer une barre de navigation horizontale.

En savoir plus sur la barre de navigation horizontale!

Il y a quelques autres choses amusantes que vous pouvez ajouter à votre barre de navigation, explorons-les.

Comment faire flotter un lien vers la droite dans une barre de navigation

Une chose intéressante que vous pouvez faire est que vous pouvez faire flotter un lien présent à l'intérieur de la barre de navigation à droite si vous voulez. Définissez la propriété flottante de ce lien particulier vers la droite et voyez le changement.


Maison
À propos
Prestations de service
Contactez-nous


Ici, nous avons défini la propriété flottante de la dernière balise d'ancrage à droite et lui a ensuite attribué une classe active.

Sortir

Un lien a été flotté avec succès à droite.

Comment créer une barre de navigation fixe supérieure

Afin de réparer la barre de navigation vers le haut, donnez au conteneur DIV une position fixe et une certaine largeur.

Html


Maison
À propos
Prestations de service
Contactez-nous




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Un contenu.




Pour montrer au fonctionnement d'une barre de navigation supérieure fixe, nous avons créé un palenty de contenu pour démontrer la barre de navigation fixe.

CSS

.topnav
Color en arrière-plan: gris;
débordement caché;
Position: fixe;
en haut: 0;
Largeur: 100%;

.contenu
rembourrage: 20px;
Hauteur: 1000px;


Nous attribuons à la barre de navigation une position fixe et une largeur à 100%. De plus, nous définissons le haut sur 0px.

Sortir

Une barre de navigation supérieure fixe a été créée avec succès.

Comment créer une barre de navigation fixe inférieure

Vous pouvez également créer une barre de navigation à fond fixe. Voici comment tu fais.

CSS

.topnav
Color en arrière-plan: gris;
débordement caché;
Position: fixe;
en bas: 0;
Largeur: 100%;


Ici en plus de donner à la barre de navigation une position fixe, le bas a été réglé sur 0px.

Sortir

La barre de navigation à fond fixe fonctionne correctement.

Comment créer une barre de navigation collante

Aux fins de la création d'une barre de navigation collante, utilisez la valeur collante de la propriété de position CSS.

CSS

.topnav
Color en arrière-plan: gris;
débordement caché;
Position: collante;
en haut: 0;


Ici, nous avons défini la position de la barre de navigation sur Sticky.

Sortir

Une barre de navigation collante a été créée avec succès.

Barre de navigation verticale

Aux fins de la création d'une barre de navigation verticale, il vous suffit de définir l'affichage des liens à l'intérieur de la barre de navigation pour bloquer à l'aide de la propriété CSS Affichage Block.

CSS

.topnav a
bloc de visualisation;
Couleur blanche;
Texte-aligne: Centre;
rembourrage: 15px 18px;
Décoration du texte: aucune;
taille de police: 17px;


Les balises d'ancrage sont affichées sous forme d'éléments au niveau du bloc pour créer une barre de navigation verticale.

Sortir

Une barre de navigation verticale a été créée avec succès.

Comment aligner la barre de navigation verticale

Pour aligner votre barre de navigation verticale, vous pouvez le faire flotter à votre position souhaitée tout en lui donnant une largeur.

CSS

.topnav
Color en arrière-plan: gris;
Largeur: 30%;
Flotter à droite;
débordement caché;


Ici, nous définissons la propriété flottante du droit et donnant à la div une largeur de 30%.

Sortir

La barre de navigation verticale a été flottée vers la droite.

Conclusion

Une barre de navigation joue un rôle vital pour augmenter l'expérience utilisateur d'un site Web, vous pouvez donc faire une barre de navigation agréable en utilisant diverses approches. Pour créer une barre de navigation horizontale, vous pouvez utiliser des éléments de liste HTML ou une combinaison de div et d'étiquette dans CSS. Vous pouvez faire beaucoup de choses amusantes avec votre barre de navigation telle que faire flotter un lien vers la droite, en faire une barre de navigation fixe ou en faire un collante selon vos exigences. En plus de cela, vous pouvez également créer une barre de navigation verticale en affichant des liens en tant qu'éléments au niveau des blocs. Ce message vous guide tous sur la création et la conception d'une barre de navigation.