Le menu est utilisé pour faciliter la navigation de l'utilisateur dans les sections du site. Pour attirer l'attention du visiteur, le menu doit être fonctionnel, facile à utiliser et en même temps être combiné avec la conception de l'ensemble de la ressource.
Instructions
Étape 1
Avant de créer un menu, décidez de son type. Vous pouvez créer une zone de liste déroulante horizontale ou verticale qui s'affichera à l'utilisateur lorsque celui-ci la survolera avec le curseur de la souris. Lors du choix d'un menu particulier, vous pouvez être guidé par la façon dont il sera pratique pour les visiteurs de l'utiliser et comment il sera combiné avec le design.
Étape 2
Après avoir choisi un type de menu, ouvrez votre fichier de page à l'aide de l'éditeur de texte que vous utilisez pour modifier le code HTML. Accédez à la section de code souhaitée dans laquelle vous souhaitez insérer votre élément d'interface.
Étape 3
Après cela, faites une liste d'options en créant un bloc et en créant une liste numérotée avec un identifiant qui lui est attribué. Par exemple:
- Lien 1
- Lien 2
- Lien 3
Dans cet exemple, j'ai créé une liste à puces de trois éléments et l'ai placée dans un calque div avec l'ID du panneau d'identification.
Étape 4
Accédez au bloc de section de votre page et créez le menu de feuille de style en cascade approprié. Si vous souhaitez créer un menu horizontal, vous pouvez inclure l'attribut en ligne pour la liste résultante:
#panel ul li {affichage: en ligne; }
Étape 5
Pour créer une ligne horizontale sur toute la longueur de la page, vous pouvez utiliser le code suivant:
#panel ul {marge-gauche: 0; remplissage: 2px 0; }
Étape 6
Ensuite, vous pouvez effectuer la division visuelle en rectangles:
#panel ul li a {margin-left: 3px; bordure: 1px; remplissage: 2px 3px; fond: bleu; }
Ce code définit les retraits de texte des éléments de bordure via les attributs margin-left et padding, et définit également une couleur d'arrière-plan pour chacun des éléments de la liste. Dans cet exemple, la couleur est bleue, mais vous pouvez la modifier à votre guise.
Étape 7
Pour pointer vers l'élément de la page en cours qui est sélectionné dans l'onglet, définissez les paramètres appropriés sur la classe ouverte:
#menu ul li a # open {background: red; bordure inférieure: 1px; }
La page actuelle sélectionnée dans le panneau sera maintenant affichée en rouge.
Étape 8
Enregistrez les modifications apportées au fichier et vérifiez la fonctionnalité du code écrit en ouvrant votre page via un navigateur. Pour définir des options d'affichage supplémentaires, vous pouvez toujours ajouter du CSS ou du HTML pour améliorer l'apparence de l'objet.
