Comment créer des menus Drop Down CSS?
Les feuilles de style en cascade (CSS) sont un nom utilisé pour décrire la façon dont un document de langage de balisage hyper texte (HTML) ou de langage de balisage extensible (XML) est formaté.Il peut être utilisé pour tout type de document XML, mais il est le plus souvent utilisé avec des pages Web écrites en HTML.CSS peut être utilisé pour créer des menus déroulants sur les pages Web.Les menus CSS déroulants ont un seul élément de texte indiqué jusqu'à ce que le visiteur utilise la souris pour survoler le menu, à quel point la liste complète des éléments est affichée.Le menu est créé à l'aide de l'identification CSS et des balises de classe.
Les menus CSS abaissent avec le sélecteur d'ID.Ce sélecteur ressemble à # 35;.Il est suivi du nom de l'ID.Vous pouvez nommer n'importe quoi ID, mais il doit être descriptif pour que les autres puissent lire votre code.Par exemple, un menu déroulant peut utiliser le code # 35; drop1.
Créez la classe pour le premier élément dans le menu Drop Down CSS en utilisant le sélecteur de classe, qui ressemble à une période.La classe fera partie de l'élément de liste HTML.L'élément de liste est désigné par les personnages li.Créez la classe de niveau supérieur en tapant li.top.La description de la classe est contenue entre deux accolades bouclées.
L'exemple suivant montre l'intégralité du code CSS pour le premier élément de la liste:
# 35; drop1 li.top # 123; Font-Family # 58;Verdana, Genève, San-Serif # 59;
Font-Size # 58;100% # 59;
Color # 58; # 35; FF00FF # 59; # 125;
Ensuite, créez une classe pour les éléments qui seront cachés sous le premier élément du menu CSS.La classe décrira la liste HTML non ordonnée, qui est désignée avec les personnages UL.La description sera essentiellement la même que l'élément de menu de niveau supérieur, avec l'ajout de l'affichage des mots # 58; aucun # 59 au début de la description.Cela indique que les éléments de la liste non ordonnés seront masqués jusqu'à ce que le pointeur oscille sur le menu CSS déroulant.
Ce qui suit est un exemple de cette partie du code CSS # 58;
# 35; drop1 ul.link # 123;
affichage # 58; Aucun # 59
Font-Family # 58;Verdana, Genève, San-Serif # 59;
Font-Size # 58;100% # 59;
Color # 58; # 35; FF00FF # 59; # 125;
Vous voudrez que le menu Drop Down CSS apparaisse sur le reste du document HMTL.Sinon, lorsque le visiteur oscille sur le menu, il poussera le reste du document dans la page pour faire de la place pour la liste.Définir l'élément de position sur Absolute, le fera.
Le code pour définir la position est # 58;
# 35; drop1 # 123; position # 58; Absolute # 59; # 125;
C'est tout ce qui est nécessaire pour la partie CSS de la liste déroulantemenu.Le reste du menu Drop Down CSS est créé dans le document HTML à l'aide des éléments Div, Id, Class, Li et UL.La balise Div sépare la partie menu du document.Type # 60; div id ' drop1 # 62;Pour créer la partie du menu déroulant.Démarrez ensuite la liste non ordonnée à l'aide de l'élément HTML UL.
Ajoutez la classe supérieure à l'élément de la première liste et la classe de liaison pour le reste des éléments.Le code HTML doit ressembler à:
# 60; div id ' drop1 # 62;
# 60; li class ' top # 62; top item # 60; # 47; li # 62;
# 60; li class ' link # 62; # 60; a href ' # # 62; item # 60; # 47; a # 62; # 60; # 47; li # 62;
# 60; li class ' link # 62; # 60; a href ' # # 62; item # 60; # 47; a # 62; # 60; # 47; li # 62;
# 60; li class ' link # 62; # 60; a href ' # # 62; item # 60; # 47; a # 62; # 60; # 47; li # 62;
# 60; # 47; ul # 62; # 60; # 47; div # 62;
Lorsque vous ouvrez le document dans un navigateur Web, le menu Drop Down CSS apparaîtra comme un seul élément sur la page.Lorsque vous déplacez votre souris sur l'élément supérieur, le reste du menu apparaîtra.Le reste du texte sur la page ne bougera pas, mais une partie sera cachée par le menu.