Avec l'aide d'un bon code HTML et de règles CSS simples, vous pouvez créer un joli menu contextuel qui peut être facilement modifié et complété. En utilisant le langage de balisage et les feuilles de style en cascade, vous pouvez vous assurer que les menus fonctionnent correctement dans tous les navigateurs.
Instructions
Étape 1
Tout d'abord, construisez la structure de base de votre menu. Ouvrez un éditeur de texte et créez une liste numérotée avec un sous-menu qui agit comme un élément de liste parent. Par exemple:
-
Premier élément
- Élément de liste déroulante
- Liste déroulante2
Étape 2
Enregistrez la liste générée dans un fichier html séparé. Ensuite, créez un fichier avec une extension.css et entrez tous les paramètres de la feuille de style.
Étape 3
Supprimez tout remplissage et toutes les puces qui s'appliquent dans la liste à puces et définissez la largeur du menu à l'aide des outils CSS: ul {list-style: none;
largeur: 200px; }
Étape 4
Définissez la position relative de tous les éléments de la liste à l'aide de l'attribut position: ul li {position: relative; }
Étape 5
Ensuite, vous devez concevoir un sous-menu, dont chacun des éléments apparaîtra à droite du menu parent au moment où le pointeur de la souris se trouve sur l'élément: li ul {position: Absolute;
gauche: 199px;
haut: 0;
affichage: aucun; } L'attribut left est inférieur d'un pixel à la largeur du menu lui-même. Cela permet de positionner intelligemment les éléments contextuels sans créer de doubles bordures. L'attribut display permet de masquer le sous-menu lors de l'ouverture de la page.
Étape 6
Stylisez les liens comme vous le souhaitez en utilisant les options CSS appropriées. Inclure le paramètre display:block pour que chaque lien occupe tout l'espace qu'il lui a réservé.
Étape 7
Pour faire apparaître le menu au moment où le curseur est dessus (hover), il faut saisir le code: li: hover ul {display: block; }
Étape 8
Définissez des options supplémentaires pour afficher les liens et les éléments de liste comme vous le souhaitez.
Étape 9
Le menu contextuel est prêt. Reste maintenant à inclure l'attribut dans le fichier.html: Menu contextuel
