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:
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.