La création de menus est probablement l'un des points principaux dans le développement de sites et de programmes. De plus, une bonne élaboration et conception logique d'un tel menu est le visage d'un site ou de tout programme. Prenons par exemple Microsoft et le système d'exploitation Windows 7. Après la sortie de Windows 7, Microsoft a entendu beaucoup de critiques qui n'étaient pas flatteuses pour lui-même. Il y a eu de nombreuses critiques, mais le plus souvent des éléments de menu mal positionnés. Lisez attentivement ce tutoriel sur la façon de créer un menu déroulant horizontal avec CSS et Expression Web. Les styles de balises changeront pour créer le menu
Instructions
Étape 1
Accédez à Gérer les styles, puis cliquez sur le bouton Nouveau style. Donnez le nom Selector ul li au nouveau style que vous venez de créer. N'oubliez pas non plus de vous assurer que le nouveau style doit être défini dans le fichier drop-down.css.
Étape 2
Pour étirer un menu horizontal, vous devez indiquer aux éléments de menu qu'il sera horizontal. Ensuite, vous devez déterminer la largeur de chaque élément de menu et supprimer tous les points inutiles devant tous les éléments de la liste.
Étape 3
Pour un alignement horizontal, accédez à Disposition et définissez l'attribut d'affichage sur en ligne. Définissez l'attribut float à gauche. Cliquez sur le bouton Appliquer. Tous les éléments de la liste doivent être définis sur une seule ligne. Pour qu'ils ne se chevauchent pas, vous devez procéder comme suit: définissez la valeur Position de l'attribut width sur 150px. Vérifiez maintenant. Tous les éléments de la liste doivent avoir la même taille.
Étape 4
Maintenant, nous devons essayer de supprimer les points devant les éléments de la liste. Pour ce faire, accédez à List et définissez l'attribut list-style –type sur none.
Étape 5
Cliquez sur OK pour accepter toutes les modifications.
Étape 6
Pour ajuster la taille de la police pour le style ul li, vous devez procéder comme suit. Dans Gérer les styles, faites un clic droit sur le style ul li dont vous avez besoin pour sélectionner Modifier le style. La boîte de dialogue familière pour ajouter ou modifier des attributs s'ouvrira. Accédez à la catégorie Police et définissez l'attribut font-family sur Arial, Helvetica, sans-serif. Ensuite, accédez à l'attribut font-size et définissez-le sur 0.9em. Après cela, configurez l'attribut text-transform, définissez sa valeur en majuscules.
Étape 7
La hauteur des éléments du menu créé peut être ajustée dans la catégorie Position. Définissez l'attribut de hauteur sur 30px.
Étape 8
Ensuite, vous devez enregistrer le fichier menu.html. Pour ce faire, Expression Web ouvrira la fenêtre Enregistrer les fichiers incorporés requise pour enregistrer le fichier. Enregistrez dans le fichier drop-down.css. Cliquez sur OK pour enregistrer.
Étape 9
Vérifiez maintenant votre résultat. Pour plus de fiabilité, il vaut mieux le tester dans différents navigateurs. Pour vérifier le résultat obtenu dans le navigateur par défaut, vous devez appuyer sur la touche F12 de votre clavier.
