Comment créer des menus déroulants CSS?
CSS (Cascading Style Sheets) est un nom utilisé pour décrire la manière dont un document HTML (Hyper Text Markup Language) ou XML (Extensible Markup Language) 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 des pages Web. Les menus CSS déroulants ont un seul élément de texte affiché jusqu'à ce que le visiteur utilise la souris pour survoler le menu. La liste complète des éléments est alors affichée. Le menu est créé en utilisant l'identification CSS et les balises de classe.
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 quel ID, mais il doit être descriptif pour que d'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 du menu CSS déroulant à l'aide du sélecteur de classe, qui ressemble à un point. La classe fera partie de l'élément de liste HTML. L'élément de liste est désigné par les caractères "li". Créez la classe de niveau supérieur en tapant "li.top". La description de la classe est contenue entre deux accolades.
L'exemple suivant montre le code CSS complet pour le premier élément de la liste:
# drop1 li.top {font-family: 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 du menu CSS. La classe décrira la liste non ordonnée HTML, désignée par les caractères "ul". La description ressemblera essentiellement à l'élément de menu de niveau supérieur, avec l'ajout des mots "display: none # 59" au début de la description. Cela indique que les éléments de la liste non ordonnée seront masqués jusqu'à ce que le pointeur survole le menu déroulant CSS.
Voici un exemple de cette partie du code CSS:
# drop1 ul.link {
afficher: aucun # 59
font-family: Verdana, Genève, san-serif;
taille de police: 100%;
couleur: # FF00FF;}
Vous souhaiterez que le menu CSS déroulant apparaisse sur le reste du document HMTL. Sinon, lorsque le visiteur survole le menu, il place le reste du document en bas de la page pour faire de la place pour la liste. Définir l'élément de position en absolu le fera.
Le code pour définir la position est:
# drop1 {position: absolute;}
C'est tout ce qui est nécessaire pour la partie CSS du menu déroulant. Le reste du menu CSS déroulant 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 <div id = "drop1"> pour créer la partie du menu déroulant. Puis démarrez la liste non ordonnée en utilisant l’élément HTML "ul".
Ajoutez la classe supérieure au premier élément de liste et la classe de liaison pour le reste des éléments. Le code HTML devrait ressembler à:
<div id = "drop1">
<li class = "top"> Élément supérieur </ li>
<li class = "link"> <a href="#"> Élément </a> </ li>
<li class = "link"> <a href="#"> Élément </a> </ li>
<li class = "link"> <a href="#"> Élément </a> </ li>
</ ul> </ div>
Lorsque vous ouvrez le document dans un navigateur Web, le menu CSS déroulant apparaît sous la forme d'un élément unique sur la page. Lorsque vous déplacez votre souris sur l'élément du haut, le reste du menu apparaît. Le reste du texte sur la page ne bougera pas, mais une partie sera cachée par le menu.