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 langage de balisage hyper texte (HTML) ou un document 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 des balises d'identification et de classe CSS.
Les menus CSS déroulants commencent par le sélecteur d'ID. Ce sélecteur ressemble à #. 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 # 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:
# drop1 li.top {font-famille: Verdana, Genève, San-Serif;
taille de police: 100%;
Couleur: # ff00ff;}
Ensuite, créez une classe pour les éléments qui seront cachés sous le premier élément dans le 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 des mots "Affichage: 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 suitest un exemple de cette partie du code CSS:
# drop1 ul.link {
Affichage: aucun # 59
Font-Family: Verdana, Genève, San-Serif;
taille de police: 100%;
Couleur: # ff00ff;}
Vous voudrez que le menu Drop Down CSS apparaisse dans 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:
# drop1 {position: absolu;}
C'est tout ce qui est nécessaire pour la partie CSS du menu déroulant. 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. Tapez
Ajoutez la classe supérieure à l'élément de première liste et la classe de liaison pour le reste des éléments. Le code HTML doit ressembler à:
Lorsque vous ouvrez le document dans un navigateur Web, le menu CSS déroulant 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.