454 Shares 4015 views

Comment faire un menu déroulant de CSS

Aujourd'hui, nous examinerons la question «Comment créer un menu déroulant de CSS?». Il faut immédiatement dire que cet élément sera réalisé sans connexion de moyens supplémentaires. C'est-à-dire que le menu sera créé uniquement avec CSS et HTML.

Préparation de

Pour bien comprendre ce qui se passe dans l'article, vous avez besoin d'au moins une petite connaissance du matériel théorique. Mais si vous connaissez les pseudo-classes, vous pouvez ignorer ce paragraphe. Donc, pour créer un menu déroulant CSS vertical, nous avons besoin d'un élément tel que ": flotter". Une pseudo-classe ": hover" peut être affectée à n'importe quelle balise HTML. Il vous permet de déterminer quand un curseur de la souris pointe sur un élément. Par exemple, nous avons attribué une propriété: "a: hover {color: red;}". Cette entrée signifie que lorsque vous passez sur n'importe quelle étiquette , son contenu devient rouge. Il convient de noter que cette pseudo-classe signifie encore un élément non activé. Soit dit en passant, ": hover" a associé des éléments similaires. Mais c'est avec l'aide de cette pseudo-classe que nous allons créer un menu déroulant CSS.

Instructions

Tout d'abord, il vaut la peine de comprendre ce qu'est le menu déroulant. Dans cette définition, il existe de nombreuses méthodes différentes pour la construction de différentes maquettes. Dans ce cas, nous allons démonter la construction composée de plusieurs objets constamment visibles et de plusieurs autres (cachés). Terminons avec la théorie et passons à la pratique.

  • Créez une présentation de notre menu. Pour ce faire, nous allons faire le balisage HTML. Créez une liste imbriquée:
. Cela devrait ressembler à votre menu déroulant. CSS entrera en action un peu plus tard. Dans ce cas, la liste principale se compose de trois éléments principaux et de deux éléments imbriqués.
  • Cacher le menu supplémentaire. Pour ce faire, nous utilisons des feuilles de style, définissons la propriété suivante: ul ul {display: none;} Cela supprime les éléments de la deuxième liste de l'écran.
  • Créez un menu dans le CSS, sorti de la liste principale. Dans les feuilles de style en cascade, nous écrivons la règle suivante: ul li: hover ul {display: block;}. Cette entrée signifie que lorsque vous placez la souris sur l'élément li qui se trouve dans la liste ul, ul (imbriqué) apparaît sur l'écran. À première vue, un tel schéma peut sembler trop compliqué et confus. Mais en fait, tout est très simple.
  • Utilisez cette mise en page, insérez votre contenu entre les balises
  • . Vous pouvez modifier le nombre d'éléments dans la liste.
  • Changements décoratifs

    Dès que la disposition du menu principal est prête, vous pouvez procéder à sa conception. Probablement, beaucoup, en premier lieu, veulent se débarrasser des marqueurs, qui désignent l'élément de la liste. Ceci se fait avec une seule propriété CSS, à savoir, type liste-style. Vous devez ajouter cette entrée: li {list-style-type: none;}. Ensuite, vous pouvez insérer un cadre et créer un arrière – plan. Les propriétés de bordure et de fond vous aideront. Peut-être, certains n'aiment pas que le menu déroulant apparaît comme une liste supplémentaire, tout en élargissant les éléments principaux. Pour résoudre ce problème, vous pouvez le positionner. Pour ce faire, dans les feuilles de style en cascade, écrivez l'entrée suivante: ul ul {position: absolue; À gauche: 15px; Droite: 15px; Top: 15px; Bas: 15px;}. Naturellement, les valeurs que vous utiliserez vous-même. Selon l'endroit où vous voulez voir le menu déroulant, CSS offrira beaucoup plus de propriétés qui peuvent ajouter différents effets et décorer nos listes.

    Conclusion

    Encore une fois, il convient de noter la conception de la disposition du menu. Pour attribuer des règles CSS dans ce cas, vous utilisez des valeurs imbriquées, par exemple, ul ul. Si vous avez d'autres modèles similaires dans le document, il peut y avoir de gros problèmes. Dans ces situations, vous devez utiliser un but plus spécifique, par exemple, les sélecteurs ou les identifiants d'identification. La disposition du menu déroulant figurant dans l'article est destinée à être connue avec le design général. Le reste du travail est sur vos épaules.