L'un des aspects les plus importants du développement de logiciels et de sites Web est la création de menus. Microsoft et son idée originale la plus célèbre, le système d'exploitation Windows, devraient être pris comme un excellent exemple. Malgré le fait que ce produit soit utilisé par l'écrasante majorité des utilisateurs de PC dans le monde, les critiques non seulement ne diminuent pas, mais ne cessent de croître. Fondamentalement, il s'agit de l'inconvénient de l'emplacement des éléments de menu. Ce qui suit est une description de la façon de créer des menus dans CSS et Expression Web.
Instructions
Étape 1
Pour commencer à créer un menu horizontal, accédez à Gérer le style, puis cliquez sur le bouton Nouveau style. Nommez le nouveau Sélecteur de style ul li. Important! Assurez-vous que le fichier généré a l'extension dropdown.css. Pour faire un menu horizontal, indiquez à l'élément créé qu'il sera exactement horizontal. Ensuite, déterminez la largeur de chaque élément de menu et supprimez tous les points inutiles placés devant tous les éléments de la liste.
Étape 2
Accédez à l'option Disposition, définissez l'attribut Affichage sur Inline pour effectuer un alignement horizontal. Ensuite, définissez la valeur Left sur l'attribut Float et cliquez sur le bouton Appliquer. Définissez tous les éléments de la liste sur une seule ligne. Pour qu'ils soient bien placés et ne rampent pas les uns sur les autres, dans l'attribut Largeur, définissez la valeur Position sur 150 px. Vérifiez que tous les éléments de la liste ont la même taille. Ensuite, supprimez les points devant tous les éléments - pour cela, accédez à l'attribut List et définissez le paramètre None dans l'élément de type List Style. Cliquez sur OK pour que toutes les modifications soient acceptées et appliquées.
Étape 3
Ajustez la taille et le style de la police pour le ul li. Pour ce faire, allez dans Gérer les styles et faites un clic droit sur le ul li, puis sélectionnez Modifier le style. La boîte de dialogue familière apparaîtra. Accédez à Police, sélectionnez l'attribut Font-family et définissez-le sur Sans-serif, Arial, Helvetica. Ensuite, ajustez la taille de la police en la définissant sur 0, 9. Après cela, définissez l'attribut Text-transform sur Majuscules. Ajustez la hauteur des éléments de menu dans l'attribut Hauteur - Position, en définissant la valeur sur 30 px.
Étape 4
Après avoir terminé toutes les actions correctives, enregistrez le fichier sous le nom menu.html. Ensuite, testez le menu créé dans différents navigateurs pour vous assurer qu'il fonctionne correctement. Comme vous pouvez le voir, la conception du menu horizontal est assez simple.
