Les éléments et le lien connexe seront spécifiés dans la balise. Html
Navigation verticale En conséquence, la structure du menu de navigation ressemblera à ceci:
Le CSS peut être utilisé pour transformer les menus HTML simples en barres de navigation visuellement attrayantes. Alors, appliquons les propriétés CSS aux éléments HTML ajoutés.
Style tous les éléments
* Tous les éléments du fichier HTML sont fournis avec les propriétés de marge et de rembourrage avec la valeur définie comme 0px.
Style Vertical-Nav Div
.Vertical-Nav Le ".nave verticale ”Est utilisé pour accéder à la classe DIV Vertical-Nav. Voici les propriétés qui lui sont appliquées:
"Couleur de l'arrière plan »Spécifie la couleur de l'arrière-plan de l'élément. "largeur »La propriété ajuste la largeur de l'élément. "hauteur »La propriété ajuste la hauteur de l'élément. "rembourrage à gauche »La propriété définit de l'espace à gauche du contenu de l'élément. "padding »La propriété définit de l'espace en haut du contenu de l'élément. "famille de polices »La propriété applique un style de police au texte de l'élément. La liste est fournie pour s'assurer que si le navigateur ne prend pas en charge le premier style, l'autre sera appliqué à la police. Style H1 élément de la div-nav vertical
.Vertical-Nav H1 Les propriétés suivantes sont appliquées à l'élément H1 de titre:
"marge-fond »La propriété définit l'espace en bas de la tête. "couleur »La propriété définit la couleur de police spécifiée. Jusqu'à présent, les propriétés appliquées afficheront le menu de navigation comme indiqué dans l'image ci-dessous:
Maintenant, supprimons les balles de la liste.
Élément de style «UL» de la div-nav vertical
.Vertical-nav ul Le "style de liste »Propriété avec la valeur définie comme«aucun »Supprimera les balles de la liste.
Élément de style «A» de l'élément Li
.vertical-nav ul li a Le ".vertical-nav ul li a »Définit le chemin de la balise. Les propriétés suivantes y sont appliquées:
"textaine-décoration "Avec la valeur"aucun »Supprime la décoration soulignée de la liste. "afficher »Propriété avec la valeur définie comme«bloc »Définira chaque élément de liste en une seule ligne. "largeur ”La propriété est utilisée pour le réglage de la largeur de l'élément. "arrière-plan «La propriété est utilisée pour ajouter des effets à l'arrière-plan de l'élément. "couleur »La propriété spécifie la couleur de la police. "boîte ombre ”La propriété spécifie les décalages X et Y, le rayon de flou et de propagation et la couleur de l'ombre. "rayon frontalier ”La propriété rend les bords de l'élément. "marge »La propriété définit l'espace autour de l'élément. "rembourrage »La propriété spécifie l'espace autour du contenu de l'élément. En conséquence, la barre de navigation sera comme suit:
Appliquons quelques effets de transition aux menus de navigation créés ci-dessus.
Conseil bonus: appliquez une transition au menu de navigation verticale
Maintenant, nous appliquerons la transition au «un " Élément:
transition: tout 0.3s facilité; Voici la description du bloc de code donné ci-dessus:
La propriété de transition est spécifiée comme «tous «Ce qui signifie la transition appliquée à toutes les propriétés. La durée de transition est spécifiée comme «0.3s ". La fonction du temps de transition est spécifiée comme «faciliter », Ce qui entraîne une augmentation de la vitesse au milieu de la transition, puis ralentit à la fin. STYLE "A" Element sur volant
.vertical-nav ul li a: hover Les propriétés ci-dessus appliquées à l'élément «A» de la navigation verticale sont décrites ci-dessous:
"Couleur de l'arrière plan »La propriété spécifie la couleur de l'arrière-plan de l'élément. "couleur »La propriété spécifie la couleur de la police de l'élément. "transformer »La propriété est appliquée avec la valeur en tant qu'échelle (1.1, 1.5). Cette fonction Scale () définit une transformation du plan 2D. Enregistrez le code susmentionné et ouvrez-le dans le navigateur. La barre de menu de navigation ressemblera à ceci:
Nous avons réussi à créer un menu de navigation verticale avec CSS.
Conclusion
La barre de navigation joue un rôle vital dans la création de tout site Web convivial. Il se compose d'une liste de liens vers différentes sections de l'application. En html, le
et Les éléments sont utilisés pour faire la liste des liens, en particulier dans la barre de navigation. Pour les rendre interactifs, différentes propriétés de style leur sont appliquées à l'aide de CSS. Cette étude a expliqué la procédure pour créer et animer un menu de navigation verticale avec CSS.
