Comment Flexbox peut-il être utilisé pour créer une barre de navigation?
Le Flexbox est le meilleur choix pour créer une barre de navigation, surtout en ce qui concerne la réactivité. Le Flexbox rend les éléments faciles à aligner dans le conteneur, fournit l'espacement et permet automatiquement aux articles d'adopter des modifications en fonction de l'espace disponible. En raison de sa compatibilité entre les navigateurs, le style reste le même sur plusieurs versions de navigateurs.
Cet article montre comment créer une barre de navigation à l'aide de la disposition Flexbox qui comprendra:
- Structure de la barre de navigation
- Style de Navbar et du logo
- Style des éléments de menu
- Style du bouton et du bouton de recherche
Comment Flexbox peut-il être utilisé pour créer une barre de navigation?
La barre de navigation permet à l'utilisateur de traverser plusieurs pages Web sur le site Web. Il contient une barre de recherche, des icônes sociales et bien d'autres. Suivez les étapes détaillées ci-dessous pour créer une barre de navigation à l'aide de la disposition Flexbox:
Étape 1: Structure de la barre de navigation
La première étape consiste à créer une structure pour la barre de navigation à l'aide de HTML. Par exemple, le Navbar contient «logo »,« éléments de menu »et« barre de recherche"Avec une soumission"bouton»:
L'explication du code ci-dessus est la suivante:
- Tout d'abord, créez un «”Tag à l'intérieur du«" étiqueter. Il détient tous les éléments qui font partie de la barre de navigation.
- Pour tenir le «logo«De l'entreprise / du site Web, créez un«"Tag et attribuez-le une classe de"logos". Plus tard, cette classe est utilisée pour ajouter du style au logo.
- Après cela, utilisez la liste non ordonnée "
- En fin de compte, créez le «saisir"Champ ayant un type"texte», Et utilisez un«bouton"C'est enveloppé à l'intérieur du""Tag de la classe"recherche".
Après avoir exécuté le code ci-dessus, la page Web apparaît comme ceci:
La sortie montre que la structure Navbar a été affichée à l'écran.
Étape 2: Style de Navbar et du logo
Tout d'abord, sélectionnez le "navigation de navigation»Sélecteur d'éléments qui sélectionne le«”Tag à partir du fichier HTML. Après cela, sélectionnez l'image du logo et div en y accédant via le «logos«Classe et appliquez les propriétés CSS comme ci-dessous:
navAffichage: flex;
justifier-contenu: espace-intermédiaire;
Align-Items: Centre;
Color en arrière-plan: # 333;
rembourrage: 10px;
.Logos
marge droite: auto;
.Logos img
Largeur: 100px;
L'explication de l'extrait de code ci-dessus est:
- Premièrement la "fléchir" et "l'espace entre«Les valeurs sont définies sur«afficher" et "justifier" propriétés. Ces propriétés alignent la div côte à côte et définissent le «navigation de navigation"Tag comme un"fléchir" mise en page.
- Ensuite, les valeurs du «centre», «# 333" et "10px«Sont affectés au«align-items","Couleur de l'arrière plan", et "rembourrage»Propriétés, respectivement. Ces propriétés CSS sont utilisées pour un meilleur processus de visualisation.
- En fin de compte, sélectionnez l'image du logo et donnez-lui un «largeur«De 100px et définissez le«auto«Valeur pour le«marge à droite" propriété.
Après exécution du code ci-dessus, la page Web ressemble à ceci:
La sortie ci-dessus affiche que la disposition Flex est définie sur le «navigation de navigation”Tag, et l'image du logo est définie sur le côté gauche.
Étape 3: Style des éléments de menu
Pour appliquer des styles sur les boutons de menu, sélectionnez les classes DIV correspondantes et appliquez les propriétés CSS suivantes:
.menuAffichage: flex;
Style de liste: Aucun; marge: 0;
rembourrage: 0;
.élément du menu
marge: 0 10px;
.MenuiUtem a
Couleur: #FFF;
Décoration du texte: aucune;
L'explication du code ci-dessus est:
- Tout d'abord, définissez les éléments du menu en tant qu'éléments flexibles en fournissant les valeurs de «fléchir" et "aucun" au "afficher" et "style de liste" propriétés.
- Ensuite, attribuez zéro en valeur au CSS "rembourrage" et "marge" propriétés. Cela supprime toutes les marges et le rembourrage prédéfinis appliqués aux éléments de la liste.
- Après cela, sélectionnez le «élément du menu"Classe et"ancre”Element résidant dedans. De plus, définissez la couleur de l'élément sur «#fff".
- En fin de compte, fournir «aucun"Comme valeur pour éliminer les styles prédéfinis au CSS"textaine-décoration" propriété.
Après avoir ajouté le code ci-dessus, la page Web apparaît maintenant comme ceci:
La sortie affiche que les éléments de menu sont désormais stylés.
Étape 4: Style du bouton et du bouton de recherche
À l'aide de sélecteurs d'éléments directs, sélectionnez le «saisir" et "bouton”Éléments HTML dans le fichier CSS. Et appliquer les propriétés CSS suivantes pour améliorer la visibilité de l'utilisateur:
saisirrembourrage: 5px;
Border: aucun;
Border-Radius: 3px 0 0 3px;
bouton
Color en arrière-plan: # 555;
Couleur: #FFF;
Border: aucun;
rembourrage: 5px 10px;
Border-Radius: 0 3px 3px 0;
curseur: pointeur;
L'explication du code ci-dessus est donnée ci-dessous:
- Utilisez le «rembourrage","frontière", et "rayon frontalier”Pour appliquer le style au champ de saisie.
- Définir la valeur de "# 555" et "#fff" au "arrière-plan" et "couleur de texte»Propriétés de l'élément bouton.
- Après cela, définissez le «aiguille" et "aucun"Comme valeur pour le"le curseur" et "frontière" propriétés.
- D'autres propriétés CSS peuvent également être utilisées pour rendre la conception plus réactive et accrocheuse.
Après avoir exécuté l'extrait de code ci-dessus, la sortie ressemble à ceci:
La sortie affiche que la barre de navigation est désormais créée avec succès à l'aide de Flexbox.
Conclusion
Pour créer une barre de navigation à l'aide de Flexbox, définissez le «fléchir" et "l'espace entre«Valeurs au«afficher"Et les propriétés« justifier-contenu »à l'intérieur du«" étiqueter. Après cela, fournissez «fléchir"Comme valeur pour la propriété d'affichage de la liste non ordonnée"". En fin de compte, les propriétés CSS sont appliquées pour style les éléments HTML résidant à l'intérieur du «" étiqueter. Cet article a expliqué l'utilisation de Flexbox pour créer une barre de navigation.