Un joli menu déroulant peut être créé non seulement en JavaScript, mais également en utilisant des balises HTML standard. Cette méthode de création d'un menu déroulant sera utile pour ceux qui commencent tout juste leurs premiers pas dans la création de sites et souhaitent simplifier le travail de création de menus sur les pages.
Instructions
Étape 1
En code HTML, un tel menu est une liste non ordonnée avec des listes imbriquées à l'intérieur. Pour commencer, créez un fichier style.css et copiez-y le code CSS suivant pour styliser et formater le menu:
#nav, #nav ul {
style de liste: aucun;
marge: 0;
remplissage: 0;
bordure: 1px solide # 000;
arrière-plan: 515151;
flotteur: gauche;
largeur: 100 %;
}
#nav li {
flotteur: gauche;
position: relative;
couleur de fond: # 003366;
arrière / sol: aucun;
}
#nav li ul {
affichage: aucun;
position: absolue;
couleur de fond: # 003366;
remplissage: 8px 0;
largeur: 138px;
}
Étape 2
Maintenant, nous devons ajouter de la décoration aux éléments du menu. Définissez leur largeur et leur hauteur, supprimez les lignes de soulignement, définissez une largeur claire pour chaque lien et spécifiez les couleurs d'arrière-plan souhaitées.
Étape 3
Pour toutes ces modifications, ajoutez le code suivant au fichier:
#nav a {
couleur: #fff;
texte-décoration: aucun;
bloc de visualisation;
largeur: 120px;
rembourrage: 4px 10px;
background-color: # 003366 répétition-y à droite;
}
#nav a: survolez {
couleur: # 000;
couleur d'arrière-plan: # 0033FF;
}
#nav li: survolez {
couleur d'arrière-plan: # 333333;
}
Ajoutez ensuite le morceau de code suivant pour finaliser le menu:
#nav li: survolez li ul {
affichage: aucun;
largeur: 138px;
haut: -9px;
gauche: 133px;
}
#nav li: survolez li: survolez ul {
bloc de visualisation;
}
Étape 4
Dans la version HTML, la liste générale des menus non ordonnés ressemble à ceci - sur sa base, le menu est créé, ce qui a été mentionné dans l'article.
- Domicile
-
Catalogue
-
Tous les produits
- Par date
- Fabricants
- Autre
-
