Les gens utilisent souvent JavaScript pour créer un menu déroulant. Mais en fait, cela peut être fait avec CSS pur. Et dans ce tutoriel, vous apprendrez comment procéder.
Principe d'opérationPour commencer, afin que vous compreniez le principe de fonctionnement des éléments déroulants, regardons un exemple simple. Prenons un simple code HTML avec lequel travailler :
Passez la souris sur moi > Je suis la partie cachée
et appliquez les styles suivants à ce code :
Exemple_shown ( display:inline-block; ) .example_hidden ( display:none; ) .example_shown:hover .example_hidden ( display:inline-block; )
En CSS, nous avons masqué la partie souhaitée du texte en changeant son affichage en display:none;. Lorsque vous survolez (:hover) l'élément parent.example_shown, l'enfant element.example_hidden change son type d'affichage en visible. Les menus déroulants sont construits selon ce principe.
Création d'un menu déroulantPassons maintenant à l'implémentation du menu lui-même. Pour l'organiser, nous utiliserons les balises de liste ul et li
Comme vous pouvez le voir dans le code, la liste principale avec id = « menu » sera responsable de sections visibles menu. Dans les sections, nous mettons une autre liste ul contenant des liens déroulants lorsque vous survolez le titre de la section du menu. Appliquez maintenant les styles suivants à cet ensemble d'éléments :
/*Réinitialiser le remplissage*/ ul, li ( margin:0; padding:0; list-style-type:none; ) /*Définir les paramètres du bloc contenant le menu principal*/ #menu ( display:block; position: absolu; top :100px; left:50px; ) /*Définir les styles pour les sections de notre menu*/ #menu > li ( display:inline-block; height:20px; position:relative; ) /*Styles pour le drop- caché down menu*/ #menu > li > ul ( position:absolute; top:20px; display:none; ) /*Rendre la partie cachée visible*/ #menu > li:hover > ul ( display:block; )
Dans ces styles, je veux me concentrer sur quatre choses :
De cette façon, nous pouvons lier les listes déroulantes non pas à une coordonnée relative à la fenêtre, mais à une coordonnée relative à la section du menu principal. En fait, top:20px spécifie le décalage vertical par rapport à la bordure supérieure de la section principale.
Les listes déroulantes sont jolies moyen pratique poste grand menu dans un petit espace. Mais cette méthode présente un énorme inconvénient : elle ne fonctionnera pas sur appareils mobiles. Pourquoi? Parce qu’ils n’ont fondamentalement aucune notion du vol stationnaire. Ils ont des clics, des traînées. Mais il n'y a pas de survol du curseur. N'oubliez donc pas ces utilisateurs et créez une implémentation de menu distincte pour eux.
La plupart des sites classiques sur Internet utilisent menu horizontal comme élément de navigation principal. Parfois, il peut contenir diverses fonctionnalités supplémentaires - des structures à plusieurs niveaux, des icônes pour les sous-éléments, un bloc de recherche, listes complexes et ainsi de suite. J'étais récemment sur le blog petite sélection, et aujourd'hui, nous examinerons 4 exemples pratiques de création d'un menu déroulant en utilisant CSS + HTML. Les informations seront utiles aux développeurs novices et à ceux qui souhaitent modifier la navigation sur leur site Web.
Le premier didacticiel CSS3 Dropdown Menu est le plus récent de la collection (d'avril 2016). Avantages de la solution : dans ce menu déroulant horizontal du site, les sous-éléments contiennent des icônes, la mise en œuvre et le code CSS lui-même sont assez simples à comprendre et à mettre en œuvre.
Étape 1 : balisage HTML
La première étape consiste à créer une liste non ordonnée en HTML avec des liens d'ancrage (#) pour ses éléments. Là, dans l'un des éléments, nous ajoutons une autre liste imbriquée, qui sera responsable du sous-menu.
Étape 2 - Afficher le menu
Nous supprimons les retraits inutiles en CSS pour les éléments du menu déroulant horizontal du site. Au même stade, nous définirons une largeur et une hauteur fixes pour les éléments de menu, et ajouterons également des coins arrondis.
| .menu, .menu ul, .menu li, .menu a ( marge : 0 ; remplissage : 0 ; bordure : aucun ; contour : aucun ; ) .menu ( hauteur : 40px ; largeur : 505px ; arrière-plan : #4c4e5a ; arrière-plan : -webkit-linear-gradient(haut, #4c4e5a 0%, #2c2d33 100%) ; arrière-plan : -moz-linear-gradient(haut, #4c4e5a 0%, #2c2d33 100%) ; arrière-plan : -o-linear-gradient (haut , #4c4e5a 0% , #2c2d33 100% ) ; arrière-plan : -ms-linear-gradient(haut , #4c4e5a 0% , #2c2d33 100% ) ; arrière-plan : gradient-linéaire (haut , #4c4e5a 0% , # 2c2d33 100% ) ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; border-radius : 5px ; ) .menu li ( position : relative ; style de liste : aucun ; float : gauche ; affichage : bloc ; hauteur : 40px ; ) |
Menu, .menu ul, .menu li, .menu a ( marge : 0 ; remplissage : 0 ; bordure : aucun ; contour : aucun ; ) .menu ( hauteur : 40px ; largeur : 505px ; arrière-plan : #4c4e5a ; arrière-plan : - webkit-linear-gradient (en haut, #4c4e5a 0%,#2c2d33 100%); arrière-plan : -moz-linear-gradient(en haut, #4c4e5a 0%,#2c2d33 100 %); arrière-plan : -o-linear-gradient( haut, #4c4e5a 0%,#2c2d33 100%); arrière-plan : -ms-linear-gradient (haut, #4c4e5a 0%,#2c2d33 100%) ; arrière-plan : dégradé linéaire (haut, #4c4e5a 0%,#2c2d33 100 % ); -webkit-border-radius : 5px ; -moz-border-radius : 5px ; border-radius : 5px ; ) .menu li ( position : relative ; style de liste : aucun ; float : gauche ; affichage : bloc ; hauteur : 40px; )
Étape 3 - liaison
En plus des fonctionnalités de base des styles (police, couleur, hauteur), nous utilisons et créons une transition fluide de la couleur du texte lors du survol. Nous ajoutons également des séparateurs au menu, en supprimant la bordure du premier élément à gauche et du dernier à droite.
| .menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; police -family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; color : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit- transition : couleur .2s facilité d'entrée-sortie ; -moz-transition : couleur .2s facilité d'entrée-sortie ; -o-transition : couleur .2s facilité d'entrée-sortie ; -ms-transition : couleur .2s facilité d'entrée -out; transition : couleur .2s facilité d'entrée-sortie; ) .menu li : premier-enfant a ( bordure-gauche : aucune ; ) .menu li : dernier-enfant a( bordure-droite : aucune ; ) .menu li : survolez > a ( couleur : #8fde62 ; ) |
Menu li a ( affichage : bloc ; remplissage : 0 14px ; marge : 6px 0 ; hauteur de ligne : 28px ; décoration de texte : aucune ; bordure gauche : 1px solide #393942 ; bordure droite : 1px solide #4f5058 ; police- famille : Helvetica, Arial, sans-serif ; poids de la police : gras ; taille de la police : 13 px ; couleur : #f3f3f3 ; ombre du texte : 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : couleur .2s facilité d'entrée-sortie ; -moz-transition : couleur .2s facilité d'entrée-sortie ; -o-transition : couleur .2s facilité d'entrée-sortie ; -ms-transition : couleur .2s facilité d'entrée-sortie sortie ; transition : couleur .2s facilité d'entrée-sortie ; ) .menu li:premier enfant a ( bordure gauche : aucune ; ) .menu li:dernier enfant a( bordure droite : aucune ; ) .menu li : survolez > a ( couleur : #8fde62 ; )
Étape 4 - sous-menu
Puisque nous avons un menu de site déroulant utilisant CSS, nous devons également définir une conception pour la liste imbriquée. Tout d'abord, définissez une marge de 40 px en haut et de 0 px à gauche + ajoutez des coins arrondis. Pour afficher/masquer le sous-menu, définissez initialement la propriété d'opacité sur zéro et lorsque vous la survolez, sur un. Pour créer l'effet d'apparition d'un sous-menu, définissez la valeur de la hauteur de la liste sur zéro, et avec hover = 36px.
| .menu ul ( position : absolue ; haut : 40px ; gauche : 0 ; opacité : 0 ; arrière-plan : #1f2024 ; -webkit-border-radius : 0 0 5px 5px ; -moz-border-radius : 0 0 5px 5px ; border -radius : 0 0 5px 5px ; -webkit-transition : opacité .25s facilité .1s ; -moz-transition : opacité .25s facilité .1s ; -o-transition : opacité .25s facilité .1s ; -ms-transition : opacité .25s facilité .1s ; transition : opacité .25s facilité .1s ; ) .menu li : survol > ul ( opacité : 1 ; ) .menu ul li ( hauteur : 0 ; débordement : caché ; remplissage : 0 ; -webkit-transition : hauteur .25s facilité .1s ; -moz-transition : hauteur .25s facilité .1s ; -o-transition : hauteur .25s facilité .1s ; -ms-transition : hauteur .25s facilité .1s ; transition : hauteur .25s facilité .1s ; ) .menu li : survol > ul li ( hauteur : 36px ; débordement : visible ; remplissage : 0 ; ) |
Menu ul ( position : absolue ; haut : 40px ; gauche : 0 ; opacité : 0 ; arrière-plan : #1f2024 ; -webkit-border-radius : 0 0 5px 5px ; -moz-border-radius : 0 0 5px 5px ; border- rayon : 0 0 5px 5px ; -webkit-transition : opacité .25s facilité .1s ; -moz-transition : opacité .25s facilité .1s ; -o-transition : opacité .25s facilité .1s ; -ms-transition : opacité . 25s facilité .1s ; transition : opacité .25s facilité .1s ; ) .menu li:hover > ul ( opacité : 1 ; ) .menu ul li ( hauteur : 0 ; débordement : caché ; remplissage : 0 ; -webkit-transition : hauteur 0,25 s facilité 0,1 s ; -moz-transition : hauteur 0,25 s facilité 0,1 s ; -o-transition : hauteur 0,25 s facilité 0,1 s ; -ms-transition : hauteur 0,25 s facilité 0,1 s ; transition : hauteur 0,25 s facilité . 1s; ) .menu li:hover > ul li ( hauteur : 36px ; débordement : visible ; remplissage : 0; )
On fixe la largeur des liens = 100px, une bordure border-bottom est ajoutée en bas de tous les éléments sauf le dernier. De plus, si vous le souhaitez, vous pouvez placer des images pour les éléments du sous-menu (attention ! n'oubliez pas de remplacer les chemins d'accès aux images dans le code par ceux que vous utilisez).
| .menu ul li a ( width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li : last-child a ( border : none ; ) .menu a.documents ( arrière-plan : url (../img/docs.png ) centre 6px sans répétition ; ) .menu a.messages ( arrière-plan : url (../img/bubble.png ) centre 6px sans répétition ; ) .menu a.signout ( arrière-plan : url (../img/arrow.png ) centre 6px sans répétition ; ) |
Menu ul li a ( largeur : 100px ; remplissage : 4px 0 4px 40px ; marge : 0 ; bordure : aucune ; bordure inférieure : 1px solide #353539 ; ) .menu ul li:dernier enfant a ( bordure : aucune ; ) . menu a.documents (arrière-plan : url(../img/docs.png) centre 6px sans répétition ; ) .menu a.messages (arrière-plan : url(../img/bubble.png) centre 6px sans répétition ; ) .menu a.signout ( arrière-plan : url(../img/arrow.png) centre 6px sans répétition ; )
Personnellement, j'aime la facilité de mise en œuvre et l'utilisation d'icônes. Voici le code final de codepen :
L'option de Josh Riser est visuellement similaire au menu déroulant HTML et CSS précédent. Le code n'a pas de sélecteur enfant ">" (utile dans les conceptions multi-niveaux), mais l'auteur fait bon usage des effets CSS3 (transition, box-shadow et text-shadow) pour un plus beau résultat. Le lien dans la source ne décrit pas le processus de création d'un menu déroulant horizontal, je fournirai donc immédiatement le code final :
DANS dans cet exemple Nous verrons comment créer un menu déroulant en utilisant CSS, qui, en plus des éléments, contiendra un bloc de recherche. Une implémentation similaire peut souvent être trouvée dans les versions modernes . En termes de temps de mise en œuvre et de complexité, la solution est un peu plus compliquée que les précédentes. Il a été publié en mai 2013, vous devrez donc peut-être modifier certaines choses, même si cela a bien fonctionné lors de nos tests.
Code HTML
Pour la navigation, comme toujours, une liste non ordonnée (avec la classe nav) est utilisée. Les éléments de menu normaux sont des éléments de liste (li) et contiennent des liens (a href) sans classes ni identifiants. L'exception concerne 3 éléments spécialisés de ce menu déroulant horizontal avec les ID suivants :
- paramètres — image de lien ;
- recherche — un bloc avec une recherche et un bouton correspondant ;
- options - contient un sous-menu (implémenté via une liste avec la classe subnav).
Également dans le code, vous verrez le script prefixfree à utiliser Propriétés CSS sans préfixes. Le code HTML final du menu déroulant ressemble à ceci :
|
-
- Application
- Conseil
- Possibilités
Menu CSS
1. Styles de base et éléments de menu
Tout d'abord, nous spécifions la police Montserrat, sombre Fond gris et hauteur fixe pour les éléments de menu. Tous les éléments ont un alignement float: left et un positionnement relatif afin que vous puissiez ultérieurement ajouter un sous-menu avec position: absolue;
| @import url (http://fonts.googleapis.com/css?family= Montserrat) ; * ( margin : 0 ; padding : 0 ; ) .nav ( background : #232323 ; height : 60px ; display : inline-block ; ) .nav li ( float : left ; list-style-type : none ; position : relative ; ) |
@import url(http://fonts.googleapis.com/css?family=Montserrat) ; * ( marge : 0 ; remplissage : 0 ; ) .nav ( arrière-plan : #232323 ; hauteur : 60px ; affichage : bloc en ligne ; ) .nav li ( float : gauche ; type de style de liste : aucun ; position : relative ; )
2. Formatage des liens
Les éléments de menu utilisent la conception de base + . La hauteur est la même que dans la classe nav. Pour #settings le lien de l'image au début du menu, l'alignement est défini.
| .nav li a ( taille de police : 16px ; couleur : blanc ; affichage : bloc ; hauteur de ligne : 60px ; remplissage : 0 26px ; décoration de texte : aucune ; bordure gauche : 1px solid #2e2e2e ; famille de polices : Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; hauteur : 24px ; taille de police : 10px ; hauteur de ligne : 24px ; ) |
Nav li a (taille de police : 16 px ; couleur : blanc ; affichage : bloc ; hauteur de ligne : 60 px ; remplissage : 0 26 px ; décoration de texte : aucune ; bordure gauche : 1 px solide #2e2e2e ; famille de polices : Montserrat, sans-serif ; text-shadow : 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; hauteur : 24px; taille de police : 10 px ; hauteur de ligne : 24 px ; )
3. Bloc de recherche
Cet élément a une largeur fixe et se compose de plusieurs parties : un champ de saisie (#search_text) avec un fond vert et un bouton de recherche (#search_button). Dans certains navigateurs, la couleur d'arrière-plan peut être grise.
| #search ( largeur : 357px ; marge : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; hauteur : 52px ; marge-droite : 0 ; couleur : blanc ; contour : aucun ; arrière-plan : #1f7f5c ; float : gauche ; dimensionnement de la boîte : bordure-boîte ; transition : toutes les 0,15 s ; ) :: -webkit-input-placeholder ( /* Navigateurs WebKit */ couleur : blanc ; ) : -moz-placeholder ( /* Mozilla Firefox 4 à 18 */ couleur : blanc ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ couleur : blanc ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ couleur : blanc ; ) #search_text : focus ( arrière-plan : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; background : #1f7f5c url (search.png ) center no-repeat ; width : 60px ; float : left ; padding : 0 ; text-align : center ; height : 52px ; curseur : pointeur ; ) |
#search ( largeur : 357px ; marge : 4px ; ) #search_text( largeur : 297px ; remplissage : 15px 0 15px 20px ; taille de police : 16px ; famille de polices : Montserrat, sans-serif ; bordure : 0 aucun ; hauteur : 52px ; marge droite : 0 ; couleur : blanc ; contour : aucun ; arrière-plan : #1f7f5c ; float : gauche ; dimensionnement de la boîte : bordure-boîte ; transition : toutes les 0,15 s ; ) ::-webkit-input-placeholder ( /* Navigateurs WebKit */ couleur : blanc ; ) :-moz-placeholder ( /* Mozilla Firefox 4 à 18 */ couleur : blanc ; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ couleur : blanc ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ couleur : blanc ; ) #search_text:focus ( arrière-plan : rgb(64, 151, 119) ; ) #search_button ( bordure : 0 aucun ; arrière-plan : #1f7f5c url (search.png) centre sans répétition ; largeur : 60 px ; flottant : gauche ; remplissage : 0 ; alignement du texte : centre ; hauteur : 52 px ; curseur : pointeur ; )
4. Sous-menu déroulant
La touche finale nous permettra de créer un menu déroulant en CSS qui se déclenche pour le dernier élément #options.
| #options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( visibilité : caché ; position : absolue ; haut : 110% ; droite : 0 ; largeur : 200px ; hauteur : auto ; opacité : 0 ; transition : tous 0,1 s ; arrière-plan : #232323 ; ) .subnav li ( float : aucun ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : survol .subnav ( visibilité : visible ; haut : 100% ; opacité : 1 ; ) |
#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( visibilité : caché ; position : absolue ; haut : 110 % ; droite : 0 ; largeur : 200 px ; hauteur : auto ; opacité : 0 ; transition : tous 0,1 s ; arrière-plan : #232323 ; ) .subnav li ( float : aucun; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options:hover .subnav ( visibilité : visible ; haut : 100 % ; opacité : 1 ; )
Dans les styles vous trouverez un insert image de fond triangle (triangle.png) pour indiquer un sous-menu - n'oubliez pas d'indiquer le chemin correct pour cette image et les autres images dans l'exemple. L'apparence d'un sous-menu est implémentée à l'aide de la propriété opacity. Solution finale sur codepen :
DANS cette option Les techniques CSS2.1 sont principalement utilisées, la solution plus ou moins est nouvelle - pour mars 2015. S'il vous manque un sous-niveau dans le menu déroulant horizontal d'un site, alors cet exemple en contient trois à la fois. En utilisant la pseudo-classe : only-child, un symbole « + » est ajouté aux éléments pour indiquer la présence d'un sous-menu.
Dans l’ensemble, un bon et simple exemple. Nous ne décrirons pas le processus de mise en œuvre en détail, car... il est similaire aux précédents - vous créez d'abord un framework HTML, puis vous y ajoutez progressivement des styles. Téléchargez le code final en utilisant le lien vers la source ; vous pouvez le visualiser partiellement dans Codepen :
Total
Ci-dessus, nous avons examiné 4 options pour créer un menu déroulant en utilisant CSS + HTML, bien qu'il existe de nombreux autres exemples similaires sur Internet. Il existe des solutions avec jQuery, mais cela n'est probablement utile que pour implémenter certains effets spéciaux et tâches non standard. Dans la plupart des cas, une combinaison CSS + HTML suffira, d'autant plus que désormais les principales exigences d'un menu sont la commodité et la vitesse de chargement rapide.
Enfin, deux remarques sur les codes ci-dessus. Certains exemples utilisent des images dans le CSS pour le menu déroulant, vous devrez donc examiner attentivement les chemins des images et fournir les valeurs correctes pour votre site. Deuxièmement, certaines solutions datent de 2 à 3 ans, vous devez donc à nouveau vérifier leurs performances dans différents navigateurs.
Si vous connaissez d'autres implémentations modernes intéressantes de menus déroulants horizontaux pour un site Web, envoyez des liens dans les commentaires.
De l'auteur : Je vous souhaite la bienvenue sur notre blog sur la création de sites Web. Il s'agit d'une série d'articles dédiés à la nouvelle spécification et aujourd'hui je voudrais vous expliquer comment créer un menu en html5 et en quoi ce processus diffère du même en Versions précédentes langue.
Quelles sont les différencesTout d'abord, je voudrais dire que la spécification n'est pas si nouvelle - elle a commencé son développement en 2009. En fait, depuis lors, il y a eu un développement constant - de nouvelles opportunités apparaissent dans HTML5, navigateurs modernes de plus en plus de support pour ces mêmes capacités, de sorte qu'il sera bientôt possible de parler de support complet pour cette technologie, même s'il ne s'agit pas d'un tout, il s'agit plutôt d'un ensemble de nouvelles capacités, chacune étant indépendante.
Bon, d'accord, mais qu'est-ce qui est différent dans la création de la navigation principale (menu), puisque vous lisez un article sur ce sujet, alors il devrait certainement y avoir quelques différences. Eh bien, comment le menu était-il créé auparavant ? Généralement utilisé pour cela liste à puces, qui a été placé dans un conteneur supplémentaire pour toute navigation - un div régulier.
Ainsi, avec l'avènement de nouvelles balises, vous pouvez désormais faire quelque chose de plus correct - au lieu d'une balise div, enveloppez le menu dans nav - un nouvel élément sémantique créé spécifiquement pour collecter les liens les plus importants et les regrouper.
Vous pouvez mettre soit une liste, soit simplement un ensemble de liens dans la navigation. Il me semble que c'est une solution encore plus simple et correcte, même si dans de nombreux modèles, vous pouvez toujours voir l'implémentation du menu à l'aide des balises ul, li, a.
Fait intéressant, le conteneur de navigation a été créé spécifiquement pour les liens prioritaires sur la page. En fait, il peut y avoir plusieurs conteneurs de ce type sur une page, mais vous ne devez y placer que les liens qui forment réellement la navigation principale (par exemple, le menu principal supérieur et sa copie dans le pied de page).
Comment créer un menu horizontal en utilisant HTML5maison Prestations de service Contacts Commentaires
Vous n’avez même pas besoin de cadrage dans la liste : tout sera initialement affiché sur une seule ligne, puisque les liens sont des éléments en ligne.
Une autre chose est qu'ils sont très limités dans leur conception en raison de leurs propriétés en ligne. Vous ne pourrez opérer qu'avec des propriétés telles que : la couleur, la taille de la police, les marges. Si vous souhaitez définir un Couleur de l'arrière plan, créez des séparateurs et ajoutez un remplissage interne (ou déterminez la taille de chaque élément de menu), mais vous ne pourrez pas le faire avec une ligne.
Ici, nous devrons convertir nos éléments en éléments de bloc. Pour ce faire, ils doivent écrire la propriété :
bloc de visualisation; |
Maintenant, ils vont de haut en bas, c'est-à-dire que notre navigation est devenue verticale. Pour le remettre en horizontal, vous devez ajouter certaines propriétés. Par exemple, au lieu d'un type de bloc, définissez-leur un type de ligne de bloc ou attribuez-leur (float: left). En savoir plus sur ces méthodes.
Navigation verticaleHabituellement, pour faire un menu vertical en html5, ils utilisent une liste, mais le balisage que je vous ai donné ci-dessus nous convient également. Comme vous l'avez vu, si vous convertissez des liens en liens de bloc, ils s'aligneront automatiquement l'un après l'autre de haut en bas, car deux blocs ne peuvent pas être sur la même ligne.
Vous pouvez désormais postuler auprès d'eux règles nécessaires inscription Les blocs ont beaucoup plus de propriétés qu'un élément en ligne, vous disposez donc de beaucoup plus d'options. Par exemple, j'ai ajouté ceci :
a( décoration de texte : aucune ; couleur : #fff ; remplissage : 5px ; taille de police : 22px ; affichage : bloc ; arrière-plan : dégradé linéaire (à droite, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100 %); largeur : 200 px ; alignement du texte : centre)
texte - décoration : aucun ; couleur : #fff; remplissage : 5 px ; taille de police : 22 px ; bloc de visualisation; arrière-plan : linéaire - dégradé (à droite, rgba (96, 108, 136, 1) 0 %, rgba (63, 76, 107, 1) 100 %) ; largeur : 200 px ; texte - aligner : centrer |
Quiconque décide de créer son propre site Web est confronté à la nécessité de créer un joli site Web. menu pour votre site web. Dans cet article, je vais vous expliquer comment, en utilisant du code HTML standard et des règles CSS simples, vous pouvez créer un excellent menu déroulant facile à modifier et à développer. Et nous n’avons besoin d’aucun code JavaScript pour cela !
La première et la plus importante étape lors de la création d’un menu déroulant consiste à créer sa structure. Il est préférable d'utiliser des listes non numérotées. Créons un menu simple comme celui-ci :
- maison
- Des articles
- HTML
- CSS
- PHP
- MySQL
- Livres
- Promotion et promotion
- Affaires électroniques
- Création de sites web
- Systèmes de paiement
- À propos de nous
Le code HTML s'est avéré assez simple et pas compliqué. Cette liste ressemblera à ceci.
Dans la prochaine étape, nous apporterons notre menu à plus belle vue. Cela peut être facilement fait en utilisant CSS.
Tout d'abord, supprimons les marqueurs dans la liste non numérotée, les retraits, et définissons également la largeur de notre menu.
#nav ul ( marge : 0px ; remplissage : 0px ; style de liste : aucun ; largeur : 200px ; )
Nous devons maintenant définir la position des éléments de la liste. Puisque notre menu sera vertical, cela facilite notre travail. Cependant, nous devons définir une valeur pour la propriété "position", Comment "relatif". Ceci est nécessaire pour positionner absolument le sous-menu par rapport au menu principal. Nous fixerons également souligner pour les éléments de menu.
#nav ul li ( position : relative ; border-bottom:1px solid #ccc; )
Nous devons maintenant corriger notre sous-menu. Puisque nous voulons que notre menu apparaisse à droite du menu principal au moment où le curseur est sur cet élément, nous avons besoin d'une propriété de liste imbriquée "position" valeur définie "absolu". Nous devons également définir sa position. Cela se fait comme suit
#nav li ul ( position : absolue ; gauche : 200px ; haut : 0 ; affichage : aucun ; )
Utilisation des attributs gauche Et haut nous définissons le positionnement absolu de notre sous-menu par rapport à l'élément de menu parent. J'ai également attribué l'attribut "afficher" signification "aucun", puisque nous ne voulons pas voir le sous-menu lors de l'ouverture de la page.
Alors maintenant, notre menu ressemble à ceci.
Jetons maintenant un coup d'œil à nos liens. Tout d'abord, pour que chaque lien occupe tout l'espace qui lui est alloué à l'intérieur de l'élément de liste le contenant, on attribue l'attribut "afficher" signification "bloc". Nous supprimerons également le trait de soulignement et définirons la couleur d’arrière-plan et la couleur du texte des liens.
#nav ul li a ( affichage : bloc ; décoration de texte : aucune ; couleur : #777 ; arrière-plan : #fff ; remplissage : 5px ; )
#nav li:hover ul ( display: block; )
Maintenant, notre menu fonctionne déjà et ressemble à ceci.
Il ne reste plus qu'à lui donner un look plus attractif.
Tout d’abord, assurons-nous que lorsque vous survolez nos éléments de menu, la couleur de l’arrière-plan et du texte change. Pour ce faire, ajoutez le code suivant
#nav li:survolez un ( couleur:#FFFFFF; arrière-plan: url(img/fone-tr.png); )
Ici, j'utilise cette image comme arrière-plan, mais vous pouvez utiliser le remplissage avec n'importe quelle autre couleur (par exemple : couleur d'arrière-plan : #0000ff ; ).
#nav li:hover ul a:hover ( background-color:#cccccc; background-image:none; color:#FFFFFF; )
OK, c'est fini maintenant ! Est notre menu déroulant en html et css prêt. Vous pouvez voir ce que nous avons trouvé.
Il semblerait que cela puisse être la fin, mais non. Malheureusement tôt Versions Internet L'explorateur comprend la pseudo-classe :flotter seulement pour l'étiquette - Donc li: survoler, qui est responsable de l'apparition des sous-menus et du changement de la couleur du fond, ne lui dit rien.
Pour résoudre ce problème, ajoutons un petit code JavaScript :
Assurons-nous maintenant que lorsque vous survolez un élément de sous-menu, la couleur de son arrière-plan change également. Pour ce faire nous utilisons le code suivant :
jsHover = function() ( var hEls = document.getElementById("nav").getElementsByTagName("LI"); pour (var i=0, len=hEls.length; i
< ul >
< li > < a href = "#" >Paragraphe 1< / a >
< ul class = "second" >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Point 2< / a >
< ul class = "second" >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Point 3< / a >
< ul class = "second" >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Point 4< / a >
< ul class = "second" >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< li > < a href = "#" >Sous-clause< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
Je comprends que c'est énorme. C’est le problème des listes imbriquées, car vous devez écrire beaucoup de code. Mais gardez à l’esprit que nous soulignons 4 points principaux et pour chacun il y aura un menu déroulant.
En fait, j'ai défini l'identifiant de navigation sur toutes les navigations et sur toutes les listes imbriquées - cours de style deuxièmement, comprendre qu’ils sont imbriqués.
Super, nous avons le balisage prêt, vous pouvez regarder le résultat :
Ouais, ça a l'air terrible. Mais maintenant nous allons inclure dans travail CSS et en quelques minutes seulement, notre navigation sera transformée. Allons travailler.
Écrire des styles CSSLa première chose que je ferai est de réinitialiser tout le remplissage par défaut pour tous les éléments. Ils ne feront que nous gêner, il est préférable de définir les retraits nous-mêmes plus tard, là où c'est nécessaire.
*( marge : 0 ; remplissage : 0 ; )
marge : 0 ; remplissage : 0 ; |
#nav( hauteur : 70px; ) #nav ul( style de liste : aucun; )
#nav( hauteur : 70px ; #navul( style de liste : aucun ; |
Nous devons maintenant décider quel sera notre menu. Horizontal ou vertical ? Je suggère de faire d'abord l'horizontale et de tout voir dans son exemple. Pour ce faire, vous devez écrire les styles suivants :
#nav > ul > li( float : gauche ; largeur : 180px ; position : relative ; )
#nav > ul > li( flotteur : gauche ; largeur : 180 px ; position : relative ; |
Notez qu'en utilisant le signe >, nous faisons référence aux éléments de liste directement imbriqués dans ul, qui sont directement imbriqués dans nav. Ceci est très important car cela empêche l’application du style aux éléments de liste imbriqués. Le fait est que, selon mon idée, les éléments de la liste principale seront situés horizontalement et ceux imbriqués verticalement.
Mais vous pouvez bien sûr le faire différemment, selon votre idée. Vous pouvez vous assurer que tous les points sont sur une seule ligne.
Quoi qu'il en soit, j'espère que vous pourrez comprendre le code ci-dessus. Cela force les éléments de la liste principale à être poussés vers la gauche afin qu'ils apparaissent tous sur la même ligne, même s'ils sont éléments de bloc. Je leur ai également donné une largeur explicite et positionnement relatif.
Pourquoi un positionnement ? C'est nécessaire pour pouvoir ensuite positionner absolument les listes imbriquées. Si vous avez étudié le positionnement en CSS, vous savez probablement que si vous donnez un positionnement relatif à un bloc, alors tous les éléments qu'il contient peuvent être positionnés absolument à l'intérieur de ce bloc particulier, et non dans la fenêtre entière du navigateur.
En attendant, voici ce que nous avons jusqu'à présent :
A partir de cette capture d'écran, vous pouvez déjà imaginer le résultat approximatif. Bien sûr, nous devons encore concevoir les objets de manière magnifique afin que les yeux ne demandent pas pitié lors de la visualisation de la navigation.
#nav li a( affichage : bloc ; arrière-plan : #90DA93 ; bordure : 1px solide #060A13 ; couleur : #060A13 ; remplissage : 8px ; alignement du texte : centre ; décoration du texte : aucun ; ) #nav li a:hover( arrière-plan : #2F718E ; )
#navli un( bloc de visualisation; fond : #90DA93; bordure : 1px solide #060A13 ; couleur : #060A13; remplissage : 8 px ; texte - aligner : centrer ; texte - décoration : aucun ; #nav li a:hover( arrière-plan : #2F718E ; |
Tout d’abord, les liens eux-mêmes doivent être bloqués. Ceci est nécessaire pour que le remplissage fonctionne et que toutes les propriétés soient appliquées correctement. Ensuite, je précise les couleurs de l'arrière-plan, du texte, les paramètres du cadre, le remplissage interne et l'alignement du texte centré. Enfin, j'annule le soulignement des liens.
Tous ces paramètres ne doivent pas être spécifiés comme je l'ai fait. Vous pouvez choisir les couleurs arbitrairement, créer un cadre différent ou ne pas l'utiliser du tout, les retraits peuvent être réduits ou augmentés.
Veuillez noter que dans ce cas, nous n'avons pas utilisé le signe >, les règles ci-dessus s'appliqueront donc à tous les liens, y compris ceux des paragraphes imbriqués. Nous avons donc maintenant ce qui suit :
Super, mais vous comprenez que les sous-éléments ne doivent pas être visibles, ils doivent s'ouvrir lorsque vous survolez l'élément souhaité. Sans cela, notre menu ressemble à une table. Eh bien, il est temps de masquer les éléments imbriqués.
#nav li .second( affichage : aucun ; position : absolue ; haut : 100 % ; )
#nav li .seconde( affichage : aucun ; position : absolue ; Top 100%; |
Premièrement, nous masquons les listes complètement imbriquées. Deuxièmement, nous leur donnons un positionnement absolu et une coordonnée supérieure : 100 %. Cela signifie que le menu déroulant apparaîtra clairement sous l'élément principal auquel il appartient, clairement à 100 % de la hauteur de cet élément.
Maintenant, nous ne voyons que le menu principal sur la page Web, ce dont nous avons besoin.
Implémentons le décrochageCe qu’il nous reste à faire est la chose la plus importante : réaliser la chute elle-même. Il n'y a rien de compliqué là-dedans, regardez ce code :
#nav li:hover .second( display: block; )
#nav li:survolez .seconde( bloc de visualisation; |
Ce code fonctionnera parfaitement. Lorsque vous survolez un élément du menu principal, la sous-liste deviendra visible. De plus, seule la liste imbriquée dans l’élément survolé par le curseur.
Il n'y a qu'un seul problème mineur : la largeur des éléments imbriqués ne correspond pas à la largeur des éléments principaux. Mais cela peut être très facilement résolu en ajoutant les styles appropriés :
#nav li li( largeur : 180px; )
#navlili( largeur : 180 px ; |
Voilà, problème résolu :
Tout fonctionne parfaitement. Lorsque vous survolez l'élément principal, un menu déroulant correspondant à celui-ci apparaît. Si vous déplacez le curseur sur le côté, il disparaît. Si vous déplacez le curseur vers les éléments imbriqués eux-mêmes, vous pouvez cliquer dessus et accéder à la section souhaitée du site. Ainsi, nous avons créé pour vous un menu déroulant très simple et léger, sans aucun script.
Conversion du menu en verticalBon, d'accord, nous avons complètement compris la navigation horizontale, mais à côté de cela, la navigation verticale se retrouve très souvent sur les sites Web et elle peut aussi être déroulante. En fait, changer le menu d'horizontal à vertical est très simple ; il suffit de changer quelques lignes de code.
Tout d’abord, vous devrez supprimer le float:left des éléments de la liste principale. C'est cette propriété qui garantit que nos éléments sont affichés sur une seule ligne, mais pourquoi en avons-nous besoin si la navigation doit être verticale ?
Il ne reste plus qu'à modifier les règles du sélecteur #nav li .second, c'est-à-dire pour les listes imbriquées, à savoir qu'elles doivent être positionnées un peu différemment. Comme ça:
#nav li .second( affichage : aucun ; position : absolue ; gauche : 100 % ; haut : 0 ; )
#nav li .seconde( affichage : aucun ; position : absolue ; gauche : 100 % ; haut : 0 ; |
Autrement dit, il est nécessaire d'enregistrer deux coordonnées au lieu d'une. Premièrement, dans le cas de la navigation horizontale, j'ai dit que, comme prévu, les éléments de sous-menu devaient être affichés sous les éléments principaux. En cas de menu vertical Cela ne convient pas - les éléments doivent être affichés sur le côté.
On change donc de haut : 100% à gauche : 100%. De plus, nous avons également besoin de la coordonnée supérieure. Nous le mettons à 0 pour que le sous-menu soit au même niveau que l'élément auquel il correspond.
Voilà, maintenant tout fonctionne comme il se doit. Vous pouvez le tester. Comme vous pouvez le constater, je n’ai pas menti en disant que je n’aurais qu’à réécrire quelques lignes de code.
Menu horizontal à plusieurs niveauxEn utilisant à peu près la même approche, vous pouvez créer davantage de niveaux de menu si nécessaire. Par exemple, créons une liste pour le quatrième élément du menu principal, qui sera imbriquée dans l'un des sous-éléments.