À l'aide d'un code HTML compétent et de règles CSS simples, vous pouvez créer un menu contextuel, le compléter et le modifier. En utilisant les tables en cascade et les outils de langage de balisage, vous pouvez vous assurer que le menu lui-même fonctionne correctement dans tous les navigateurs.
Instructions
Étape 1
Tenez-vous d'abord à la barre de menu de base. Créez une liste numérotée spéciale avec un sous-menu dans un éditeur de texte. Habituellement, "Notepad" est utilisé à ces fins. Le sous-menu agit comme un élément de la liste parent. Par exemple: Premier élémentFlood ElementFlood Element2Field Element3Field Element4Field Element5
Étape 2
Enregistrez cette liste dans un fichier html séparé. Créez ensuite un fichier.css. Saisissez tous les paramètres de feuille de style requis. Faites-le très soigneusement, car une erreur et le menu contextuel ne s'afficheront pas correctement ou ne fonctionneront pas du tout.
Étape 3
Supprimez toutes les puces et le remplissage appliqués dans la liste à puces. Définissez la largeur du menu à l'aide des outils CSS: ul -style: none; width: 200px; }
Étape 4
Marquez la position relative de tous les éléments de la liste avec un attribut appelé position: ul li: relative; }
Étape 5
Disposez ensuite le sous-menu dont les éléments apparaîtront à partir du menu parent vers la droite lorsque le curseur de la souris est sur l'élément: li ul: absolu; gauche: 199px; haut: 0; affichage: aucun; }
Étape 6
L'attribut de gauche est inférieur d'un pixel à la largeur du menu lui-même. Cela permet de positionner correctement 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 7
Stylisez les liens selon vos besoins en utilisant les options CSS appropriées. Inclure le paramètre display:block afin que les liens occupent tout l'espace qui leur est réservé. Pour faire apparaître le menu au survol de la souris, saisissez le code suivant: li: hover ul: block; }
Étape 8
Définissez des options supplémentaires pour afficher les éléments de liste et les liens comme vous le souhaitez. Incluez un attribut dans le fichier.html. Le menu contextuel est prêt à l'emploi.
