Conception de menu correcte en html5 css3. CSS - menu horizontal pour débutants
De l'auteur : Bienvenue sur notre blog de création de site Web. Il s'agit d'une série d'articles consacrés à la nouvelle spécification, et aujourd'hui, je voudrais vous dire comment créer un menu en html5 et en quoi ce processus diffère de celui des versions précédentes du langage.
Quelles sont les différences
Tout d'abord, je voudrais dire que la spécification n'est pas si nouvelle - elle a commencé sa formation en 2009. En fait, depuis lors, il y a eu un développement constant - de nouvelles fonctionnalités apparaissent dans html5, les navigateurs modernes prennent de plus en plus en charge ces mêmes fonctionnalités, nous pourrons donc bientôt parler de la prise en charge complète de cette technologie, même si ce n'est pas quelque chose d'unifié, il est plutôt un ensemble de nouvelles fonctionnalités, dont chacune est indépendante.
Eh bien, quelle est la différence entre la création de la navigation principale (menu), puisque vous lisez un article sur ce sujet, il doit certainement y avoir quelques différences. Eh bien, comment le menu a-t-il été créé avant ? Habituellement, une liste à puces était utilisée pour cela, qui était placée dans un conteneur supplémentaire pour toute la navigation - une div régulière.
Ainsi, avec l'avènement de nouvelles balises, vous pouvez désormais le faire plus correctement - au lieu de la balise div, enveloppez le menu dans nav - un nouvel élément sémantique qui a été créé spécifiquement pour collecter les liens les plus importants, les regrouper.
Vous pouvez mettre à la fois une liste et juste un ensemble de liens dans nav. Il me semble que c'est une solution encore plus simple et plus correcte, bien que dans de nombreux modèles, vous puissiez toujours voir l'implémentation du menu en utilisant les balises ul, li, a.
Fait intéressant, le conteneur de navigation est conçu spécifiquement pour les liens prioritaires sur la page. En fait, il peut y avoir plus d'un conteneur de ce type sur une page, mais cela vaut la peine d'y mettre uniquement les liens qui forment réellement la navigation principale (par exemple, le menu principal supérieur et son double dans le pied de page).
Comment faire un menu horizontal en utilisant html5
Vous n'avez même pas besoin de cadre dans la liste, tout sera initialement affiché sur une seule ligne, car 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 : couleur, taille de police, marges. Si vous souhaitez définir une couleur d'arrière-plan spécifique, créer des séparateurs et ajouter des retraits (ou déterminer la taille de chaque élément de menu), cela ne fonctionnera pas avec la chaîne.
Ici, nous devrons convertir nos éléments en éléments de bloc. Pour ce faire, ils doivent écrire une propriété :
bloc de visualisation ; |
Maintenant, ils vont de haut en bas, c'est-à-dire que notre navigation est devenue verticale. Pour le redevenir 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 définissez-les sur (flottant : gauche). En savoir plus sur ces méthodes.
Navigation verticale
Habituellement, pour faire un menu vertical en html5, une liste est utilisée, mais le balisage que je vous ai donné ci-dessus est également bon pour nous. Comme vous l'avez vu, si vous convertissez les liens en liens de bloc, ils s'aligneront automatiquement les uns après les autres de haut en bas, car deux blocs ne peuvent pas se tenir sur la même ligne.
Vous pouvez maintenant leur appliquer les règles de conception souhaitées. Les blocs ont beaucoup plus de propriétés que les éléments en ligne, vous avez donc beaucoup plus d'options. Par exemple, j'ai ajouté ceux-ci :
a( text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100 % ); largeur : 200 px ; alignement du texte : centré )
texte - décoration : aucun ; couleur : #fff; rembourrage : 5px taille de police : 22px ; bloc de visualisation ; arrière-plan : dégradé linéaire (à droite, rgba (96, 108, 136, 1) 0 %, rgba (63, 76, 107, 1) 100 % ); largeur : 200px texte - aligner : centré |
Menu horizontal est une liste de sections du site, il est donc plus logique de baliser à l'intérieur de l'élément
- puis appliquez des styles CSS à ses éléments. Cette disposition du menu est la plus courante en raison des avantages évidents de son positionnement sur une page Web.
- Élément du menu
- Élément du menu
- Élément du menu ...
- notre liste contiendra un lien :
Notre tâche suivante consiste à réinitialiser les styles de liste par défaut. Nous devons supprimer les retraits externes et internes de la liste elle-même et les marqueurs des éléments de la liste. Définissez ensuite la largeur souhaitée :
#navbar ( marge : 0 ; rembourrage : 0 ; type de style de liste : aucun ; largeur : 100 pixels ; )
Il est maintenant temps de styliser les liens eux-mêmes. Nous allons leur ajouter une couleur de fond, modifier les paramètres du texte : couleur, taille et saturation de la police, supprimer le soulignement, ajouter des petits retraits et redéfinir l'affichage élément d'en ligne à bloc. De plus, les cadres gauche et inférieur ont été ajoutés aux éléments de la liste.
La partie la plus importante de nos modifications est la redéfinition des éléments en ligne en éléments de bloc. Désormais, nos liens occupent tout l'espace disponible des éléments de la liste, ce qui signifie que nous n'avons plus besoin de survoler le texte exact pour suivre le lien.
#navbar a ( background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; ) #navbar li ( bordure gauche : solide 10 px #666 ; bordure inférieure : solide 1px #666 ; )
Nous avons combiné tout le code ci-dessus en un seul exemple, maintenant en cliquant sur le bouton essayer, vous pouvez aller à la page d'exemple et voir le résultat :
Nom du document Essayer "Lorsque vous passez votre souris sur un élément de menu, il apparence peut changer pour attirer l'attention de l'utilisateur. Vous pouvez créer un tel effet en utilisant la pseudo-classe :hover.
Revenons à notre exemple de menu vertical précédent et ajoutons la règle suivante à la feuille de style :
#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Essayer »
Menu horizontal
Dans l'exemple précédent, nous avons examiné la barre de navigation verticale, que l'on voit le plus souvent sur les sites Web à gauche ou à droite de la zone de contenu principale. Cependant, les menus avec des liens de navigation sont également souvent situés horizontalement en haut d'une page Web.
Un menu horizontal peut être créé en stylisant une liste régulière. Propriété d'affichage des éléments
- vous devez attribuer la valeur inline afin que les éléments de la liste soient situés les uns après les autres.
Pour organiser les éléments de menu horizontalement, créez d'abord une liste à puces avec des liens :
Écrivons quelques règles pour notre liste qui réinitialisent le style utilisé pour les listes par défaut et redéfinissons les éléments de la liste de bloc à en ligne :
#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Essayer »
Il ne nous reste plus qu'à définir le style de notre menu horizontal :
#navbar ( marge : 0 ; rembourrage : 0 ; type de style de liste : aucun ; bordure : 2px solid #0066FF ; border-radius : 20px 5px ; largeur : 550px ; text-align : center ; background-color : #33ADFF ; ) #navbar a ( color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; couleur d'arrière-plan : #0066FF; ) Essayez »
Menu déroulant
Le menu que nous allons créer aura des liens de navigation principaux situés dans une barre de navigation horizontale et des sous-éléments qui ne seront affichés que lorsque le curseur de la souris survolera l'élément de menu auquel ces sous-éléments appartiennent.
Nous devons d'abord créer la structure HTML de notre menu. Nous placerons les principaux liens de navigation dans une liste à puces :
Nous placerons les sous-éléments dans une liste séparée en l'imbriquant dans un élément
- , qui contient le lien parent relatif aux sous-éléments. Nous avons maintenant une structure claire pour notre future barre de navigation :
Essayer "Commençons maintenant à écrire le code CSS. La première étape consiste à masquer la liste avec les sous-éléments avec la déclaration display : none ; afin qu'ils n'apparaissent pas tout le temps sur la page Web. Pour afficher les sous-éléments, nous en avons besoin lors du survol d'un élément
- la liste a de nouveau été convertie en élément de bloc :
#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )
Nous supprimons les retraits et les marqueurs par défaut des deux listes. Nous fabriquons des éléments de liste avec des liens de navigation flottants, formant un menu horizontal, mais pour les éléments de liste contenant des sous-éléments, nous définissons float : none ; afin qu'ils apparaissent l'un en dessous de l'autre.
#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )
Ensuite, nous devons nous assurer que notre sous-menu déroulant ne pousse pas le contenu sous la barre de navigation vers le bas. Pour ce faire, nous allons définir les éléments de la liste sur la position : relative ; , mais une liste contenant les sous-éléments position : absolu ; et ajoutez une propriété top avec une valeur de 100% pour que le sous-menu en position absolue apparaisse exactement sous le lien.
#navbar ul ( display: none; position: absolute; top: 100%; ) #navbar li ( float: left; position: relative; ) #navbar ( height: 30px; ) Essayer »
La hauteur de la liste parent a été ajoutée exprès, puisque les navigateurs ne considèrent pas le contenu flottant comme un contenu d'élément, sans ajouter de hauteur, notre liste sera ignorée par le navigateur et le contenu suivant la liste s'enroulera autour de notre menu.
Il ne nous reste plus qu'à styliser nos deux listes et notre menu déroulant sera prêt :
#navbar ul ( display: none; background-color: #f90; position: absolute; top: 100%; ) #navbar li:hover ul ( display: block; ) #navbar, #navbar ul ( margin: 0; padding: 0 ; list-style-type : aucun ; ) #navbar ( hauteur : 30 px ; couleur d'arrière-plan : #666 ; padding-left : 25 px ; min-width : 470 px ; ) #navbar li ( float : gauche ; position : relative ; hauteur : 100 % ; ) #navbar li a ( affichage : bloc ; rembourrage : 6 px ; largeur : 100 px ; couleur : #fff ; décoration de texte : aucune ; alignement du texte : centre ; ) #navbar ul li ( float : aucune ; ) #navbar li:hover ( background-color: #f90; ) #navbar ul li:hover ( background-color: #666; )
La plupart des sites classiques sur le Web utilisent le menu horizontal comme élément de navigation principal. Parfois, il peut contenir diverses fonctionnalités supplémentaires - structures à plusieurs niveaux, icônes pour les sous-éléments, un bloc de recherche, des listes complexes, etc. Récemment, il y avait déjà une petite sélection sur le blog, et aujourd'hui nous allons voir 4 exemples pratiques de comment faire un menu déroulant en CSS + HTML. Les informations sont utiles pour les développeurs novices et ceux qui souhaitent modifier la navigation sur leur site.
Le premier didacticiel CSS3 Dropdown Menu est le plus récent de la collection (daté d'avril 2016). Avantages de la solution : dans ce menu déroulant horizontal pour le site, il y a des icônes dans les sous-rubriques, 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
Suppression du rembourrage supplémentaire 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 des éléments de menu, et ajouterons également des coins arrondis.
.menu, .menu ul, .menu li, .menu a ( margin : 0 ; padding : 0 ; border : none ; outline : none ; ) .menu ( height : 40px ; width : 505px ; background : #4c4e5a ; background : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; arrière-plan : -moz-linear-gradient(top , #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 : linear-gradient(haut , #4c4e5a 0% , # 2c2d33 100% ) ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; border-radius : 5px ; ) .menu li ( position : relative ; list-style : aucun ; float : gauche ; affichage : bloc ; hauteur : 40px ; ) Menu, .menu ul, .menu li, .menu a ( marge : 0 ; remplissage : 0 ; bordure : aucune ; contour : aucune ; ) .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 : linear-gradient (haut, #4c4e5a 0 %, #2c2d33 100 %) ); -webkit-border-radius : 5 px ; -moz-border-radius : 5 px ; border-radius : 5 px ; ) .menu li ( position : relative ; style de liste : aucun ; flottant : gauche ; affichage : bloc ; hauteur : 40px ; )
Étape 3 - conception du lien
En plus des fonctionnalités de base dans les styles (police, couleur, hauteur), nous utilisons et créons une transition en douceur de la couleur du texte au survol. Nous ajoutons également des séparateurs au menu, supprimant la bordure du premier élément à gauche et du dernier élément à 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 ; font -famille : 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 entrée-sortie ; -moz-transition : couleur .2s entrée-sortie ; -o-transition : couleur .2s entrée-sortie ; -ms-transition : couleur .2s entrée-sortie -out; transition : color .2s easy-in-out; ) .menu li: first-child a ( border-left : none ; ) .menu li: last-child a( border-right : none ; ) .menu li : survoler > a ( couleur : #8fde62 ; ) 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; font- famille : Helvetica, Arial, sans-serif ; font-weight : gras ; font-size : 13px ; couleur : #f3f3f3 ; text-shadow : 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : couleur .2s entrée-sortie ; -moz-transition : couleur .2s entrée-sortie ; -o-transition : couleur .2s entrée-sortie ; -ms-transition : couleur .2s entrée-sortie- out; transition: color .2s easy-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: survol > a ( couleur : #8fde62; )
Étape 4 - sous-menu
Puisque nous avons un menu de site CSS déroulant, nous devons également définir la conception de la liste imbriquée. Tout d'abord, définissez le rembourrage sur 40px en haut et 0px sur la gauche + ajoutez des coins arrondis. Pour afficher/masquer le sous-menu, nous avons initialement défini la propriété opacity sur zéro, et au survol, sur un. Pour créer l'effet d'apparence d'un sous-menu, définissez la hauteur de la liste sur zéro et survolez = 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: hover > ul ( opacité : 1 ; ) .menu ul li ( hauteur : 0 ; débordement : caché ; rembourrage : 0 ; -webkit-transition : hauteur 0,25s facilité 0,1s ; -moz-transition : hauteur 0,25s facilité 0,1s ; -o-transition : hauteur 0,25s facilité 0,1s ; -ms-transition : hauteur 0,25s facilité 0,1s ; transition : hauteur 0,25s facilité .1s ; ) .menu li: hover > ul li ( hauteur : 36px ; débordement : visible ; rembourrage : 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 : masqué ; rembourrage : 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 ; rembourrage : 0 ; )
Nous définissons la largeur des liens = 100px, en bas de tous les éléments sauf le dernier, une bordure en bas est ajoutée. De plus, si vous le souhaitez, vous pouvez placer des images pour les éléments de sous-menu (attention ! n'oubliez pas de changer les chemins d'accès aux images dans le code pour 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 ( background : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( background : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( background : url (../img/arrow.png ) no-repeat 6px center ; ) 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 ( background: url(../img/arrow.png) no-repeat 6px center; )
Personnellement, j'aime la facilité de mise en œuvre et d'utilisation des icônes. Voici le code final avec codepen :
La version de Josh Riser est visuellement similaire au menu déroulant précédent en HTML et CSS. Il n'y a pas de sélecteur enfant ">" dans le code (utile dans les conceptions en couches), mais l'auteur utilise avec succès les effets CSS3 (transition, box-shadow et text-shadow) pour un résultat plus beau. Selon le lien dans la source, il n'y a pas de description du processus de création d'un menu déroulant horizontal, je vais donc immédiatement donner le code final :
Dans cet exemple, nous verrons comment créer un menu déroulant en CSS, dans lequel, en plus des éléments, il y aura un bloc de recherche. Une implémentation similaire peut souvent être trouvée dans modern . En termes de temps de mise en œuvre et de complexité, la solution est légèrement plus compliquée que les précédentes. Il a été publié en mai 2013, vous devrez donc peut-être modifier certaines choses, bien que lors de nos tests, tout ait bien fonctionné.
Code HTML
Pour la navigation, comme toujours, une liste non ordonnée (avec la classe nav) est utilisée. Les éléments de menu réguliers sont des éléments de liste (li) et contiennent des liens (a href) sans classes ni identifiants. L'exception concerne les 3 éléments spécialisés de ce menu déroulant horizontal avec les identifiants suivants :
- paramètres - lien image ;
- rechercher - 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 pour utiliser les propriétés CSS sans préfixes. Le code HTML résultant pour le menu déroulant ressemble à ceci :
-
- Application
- Conseil
- Choix
-
- Application
- Conseil
- Choix
CSS pour le menu
1. Styles de base et éléments de menu
Tout d'abord, nous spécifions la police Montserrat, un fond gris foncé et une hauteur fixe pour les éléments de menu. Tous les éléments sont flottants : alignés à gauche et positionnés de manière relative afin que vous puissiez ajouter ultérieurement un sous-menu avec la 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 ; ) @URL d'importation (http://fonts.googleapis.com/css?family=Montserrat); * ( marge : 0 ; rembourrage : 0 ; ) .nav ( arrière-plan : #232323 ; hauteur : 60 px ; affichage : bloc en ligne ; ) .nav li ( float : gauche ; type de style de liste : aucun ; position : relative ; )
2. Formater les liens
Les éléments de menu utilisent le style de base + . La hauteur est la même que dans la classe nav. Les #paramètres du lien d'image au début du menu sont réglés sur aligner.
.nav li a ( font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2e ; font-family : 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 ; height : 24px ; taille de police : 10px ; hauteur de ligne : 24px ; ) Nav li a ( font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: 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; height: 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 de fond peut être grise.
#search ( width : 357px ; margin : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; height : 52px ; margin-right : 0 ; color : white ; outline : none ; background : #1f7f5c ; float : left ; box-sizing : border-box ; transition : all 0.15s ; ) :: -webkit-input-placeholder ( /* Navigateurs WebKit */ color : white ; ) : -moz-placeholder ( /* MozillaFirefox 4 à 18 */ couleur : blanc ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ couleur : blanc ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ couleur : blanc ; ) #search_text : focus ( background : 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 ; hauteur : 52px ; curseur : pointeur ; ) #search (largeur : 357px ; marge : 4px ; ) #search_text(largeur : 297px ; rembourrage : 15px 0 15px 20px ; taille de police : 16px ; famille de police : Montserrat, sans empattement ; bordure : 0 aucune ; hauteur : 52px ; margin-right : 0 ; couleur : blanc ; contour : aucun ; arrière-plan : #1f7f5c ; float : gauche ; box-sizing : border-box ; transition : tous les 0,15 s ; ) ::-webkit-input-placeholder ( /* Navigateurs WebKit */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 à 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) pas de répétition au centre ; largeur : 60 pixels ; flottant : gauche ; rembourrage : 0 ; alignement du texte : centré ; hauteur : 52 pixels ; curseur : pointeur ; )
4. Sous-menu déroulant
La touche finale nous permettra de créer un menu déroulant CSS qui fonctionne pour dernier point#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 les 0.1s ; 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 ; ) #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é : masqué ; position : absolue ; haut : 110 % ; droite : 0 ; largeur : 200 px ; hauteur : automatique ; opacité : 0 ; transition : tous les 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 une insertion d'une image de fond triangulaire (triangle.png) pour indiquer le sous-menu - n'oubliez pas de spécifier le chemin correct pour cette image et les autres images dans l'exemple. L'apparence du sous-menu est implémentée à l'aide de la propriété opacity. Solution finale sur codepen :
Cette option utilise principalement les techniques CSS2.1, la solution est plus ou moins nouvelle - pour mars 2015. S'il vous manque un sous-niveau dans le menu déroulant horizontal du site, cet exemple en contient trois à la fois. La pseudo-classe :only-child ajoute un symbole "+" aux éléments pour indiquer la présence de sous-menus.
En général, 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 squelette HTML, puis vous lui ajoutez progressivement des styles. Téléchargez le code final à partir du lien vers la source, vous pouvez le voir partiellement dans Codepen :
Total
Ci-dessus, nous avons examiné 4 options pour créer un menu déroulant en CSS + HTML pour , bien qu'il existe de nombreux autres exemples similaires sur le réseau. Il existe des solutions avec jQuery, mais cela n'est probablement utile que pour implémenter des effets spéciaux et des tâches non standard. Dans la plupart des cas, un tas de CSS + HTML suffit, d'autant plus que les principales exigences du menu sont désormais la commodité et la vitesse de chargement rapide.
Enfin, deux commentaires sur les codes ci-dessus. Certains des exemples de liste déroulante CSS utilisent des images, vous devrez donc regarder attentivement les chemins d'accès aux images et saisir les valeurs correctes pour votre site. Deuxièmement, certaines des solutions ont 2 à 3 ans, vous devez donc également vérifier leurs performances dans différents navigateurs.
Si vous connaissez d'autres implémentations modernes intéressantes de menus déroulants horizontaux pour le site, envoyez des liens dans les commentaires.
Comment faire un menu horizontal : exemples de balisage et de conception
Balisage HTML et styles de base pour le menu horizontal
Par défaut, tous les éléments de la liste sont situés verticalement, s'étendant sur toute la largeur de l'élément conteneur, qui à son tour s'étend sur toute la largeur de son bloc conteneur.
Balisage HTML pour la navigation horizontale
Un menu horizontal situé à l'intérieur de la balise peut également être placé à l'intérieur de l'élément et/ou
Il existe plusieurs façons de les placer horizontalement. Vous devez d'abord réinitialiser les styles de navigateur par défaut pour les éléments de navigation :
Ul ( list-style: none; /*remove the list markers*/ margin: 0; /*remove the top and bottom margins of 1em*/ padding-left: 0; /*remove the left padding of 40px*/ ) a ( text-decoration: none; /*supprime le soulignement du texte du lien*/)
Méthode 1. li (affichage : en ligne ;)
Créez des éléments de liste en ligne. En conséquence, ils sont disposés horizontalement, sur le côté droit, un espace égal à 0,4 em est ajouté entre eux (calculé par rapport à la taille de la police). Pour le supprimer, ajoutez une marge droite négative à li li (margin-right: -4px;) . Ensuite, stylisez les liens comme vous le souhaitez.
Méthode 2. li (float : gauche ;)
Nous rendons les éléments de la liste flottants. En conséquence, ils sont disposés horizontalement. La hauteur du bloc conteneur ul devient nulle. Pour résoudre ce problème, nous ajoutons (overflow: hidden;) à ul , en le développant et en lui permettant ainsi de contenir des éléments flottants. Pour les liens, ajoutez un (affichage : bloc ;) et stylisez-les comme vous le souhaitez.
Méthode 3. li (affichage : bloc en ligne ;)
Faire des éléments de liste en bloc en ligne. Ils sont disposés horizontalement, un espace est formé sur le côté droit, comme dans le premier cas. Pour les liens, ajoutez un (affichage : bloc ;) et stylisez-les comme vous le souhaitez.
Méthode 4. ul (affichage : flex ;)
Faire de la liste ul un conteneur flexible à l'aide de l'extension . En conséquence, les éléments de la liste sont disposés horizontalement. Ajoutez un (affichage : bloc ;) pour les liens et stylisez-les comme vous le souhaitez.
1. Menu réactif avec effet de soulignement lors du survol d'un lien
@importurl("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( style de liste : aucun ; marge : 40px 0 5px ; rembourrage : 25px 0 5px ; alignement du texte : centre ; arrière-plan : blanc ; ) .menu-main li (affichage : bloc en ligne ;) .menu- main li:after ( content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform : majuscule ; affichage : bloc en ligne ; transition : couleur .2s ; ) .menu-main a, .menu-main a:visited (color : #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolue; hauteur: 4px; haut: auto; droite: 50%; bas : -5px ; gauche : 50 % ; arrière-plan : #feb386 ; transition : .8s ; ) .menu-main a:hover:before, .menu-main .current:before (gauche : 0 ;) .menu-main a : hover:after, .menu-main .current:after (right : 0 ;) @media (max-width : 550px) ( .menu-main (padding-top : 0 ;) .menu-main li (display : block ; ) .menu-main li:after (contenu : aucun ;) .menu-main a ( rembourrage : 25px 0 20px ; marge : 030px ; ) )2. Menu responsive pour un site de mariage
@importurl("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position : relative ; arrière-plan : #fff ; box-shadow : inset 0 0 10px #ccc ; ) .top-menu:before, .top-menu:after ( contenu : "" ; affichage : bloc ; hauteur : 1px ; bordure supérieure : 3 px solide #575350 ; bordure inférieure : 1px solide #575350 ; marge inférieure : 2px ; ).top-menu:after ( bordure inférieure : 3px solide #575350 ; bordure supérieure : 1px solide #575350 ; box-shadow : 0 2px 7px #ccc ; margin-top : 2px ; ) .menu-main ( list-style : aucun ; padding : 0 30px ; margin : 0 ; font-size : 18px ; text-align : center ; position : relative ; ) .menu-main:before, .menu-main:after ( content : "\25C8" ; line-height : 1 ; position : absolue ; top : 50 % ; transform : translateY(-50 % ); ) .menu-main:before (gauche : 15px ;) .menu-main:after (droite : 15px ;) .menu-main li (affichage : bloc en ligne ; remplissage : 5px 0 ; ) .menu-main a ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px solide transparent ; transition : 0,3 s linéaire ; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width : 500px) ( .menu-main li (affichage : bloc ;) )3. Menu réactif avec pétoncles
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( style de liste : aucun ; rembourrage : 0 30 px ; marge : 0 ; taille de la police : 18 px ; alignement du texte : centré ; position : relative ; arrière-plan : blanc ; ) .menu-main:after ( contenu : "" ; position : absolue ; largeur : 100 % ; hauteur : 20 px ; gauche : 0 ; bas : -20 px ; arrière-plan : dégradé radial (blanc 0 %, blanc 70 %, rgba (255,255,255,0) 70 %, rgba ( 255,255,255,0) 100%) 0 -10px ; background-size : 20px 20px ; background-repeat : repeat-x ; ) .menu-main li (affichage : bloc en ligne ;) .menu-main a ( text-decoration : aucun ; affichage : bloc en ligne ; marge : 0 15 px ; rembourrage : 10 px 30 px ; famille de polices : "PT Sans Caption", sans empattement ; couleur : #777777 ; transition : 0,3 s linéaire ; position : relative ; ) .menu -main a:before, .menu-main a:after ( content : "" ; position : absolue ; haut : calc(50 % - 3px) ; largeur : 6 px ; hauteur : 6 px ; border-radius : 50 % ; arrière-plan : #F58262 ; opacité : 0 ; transition : .5s entrée-sortie ; ) .menu-main a:before (gauche : 5px ;) .menu-main a:after (droite : 5px ;) .menu-main a. current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after (opacity: 1;) .menu-main a.current, .menu- main a:hover (color: #F58262;) @media(max-width:680px) ( .menu-main li (display: block;) )4. Menu du ruban réactif
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( marge : 0 60px ; position : relative ; arrière-plan : #5A394E ; box-shadow : encart 1px 0 0 rgba(255,255,255,.1), encart -1px 0 0 rgba(255,255,255,.1), encart 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); ) ; z-index : 2 ; gauche : 0 ; largeur : 100 % ; hauteur : 3px; ) . top-menu:before ( haut : 0 ; border-bottom : 1px dashed rgba(255,255,255,.2); ) .top-menu:after ( bottom : 0 ; border-top : 1px dashed rgba(255,255,255,.2); ) .menu-main ( style de liste : aucun ; rembourrage : 0 ; marge : 0 ; alignement du texte : centre ; ) . menu-main : avant, .menu-main : après ( contenu : "" ; position : absolue ; largeur : 50 pixels ; hauteur : 0 ; haut : 8 px ; bordure supérieure : 18 px solide #5A394E ; bordure inférieure : 18px solide # 5A394E ; transformation : rotation (360 degrés); z-index : -1 ; ) .menu-main : avant (gauche : -30px ; bordure gauche : 12px solide rgba(255, 255, 255, 0);) , 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif ; couleur : blanc ; transition : .3s linéaire ; ) .menu-main a.current, .menu-main a:hover (arrière-plan : rgba(0,0,0,.2);) @media (max-width : 680px) ( .top-menu (margin : 0 ;) .menu-main li ( display : block ; margin-right : 0 ; ) .menu-main:before, .menu-main:after (contenu : aucun ;) .menu-main a (affichage : bloc ;) )5. Menu réactif avec un logo au milieu
@importurl("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( position : relative ; arrière-plan : rgba(34,34,34,.2); ) .menu-main ( style de liste : aucun ; marge : 0 ; rembourrage : 0 ; ) .menu-main:after ( contenu : "" ; affichage : tableau ; effacer : les deux ; ) .left-item (flottant : gauche ;) .right-item (flottant : droite ;) : 50 % ; transformation : traduction (-50 %, -50 %); ) .menu-main a ( décoration de texte : aucune ; affichage : bloc ; hauteur de ligne : 80 pixels ; rembourrage : 0 20 pixels ; taille de la police : 18 pixels ; espacement des lettres : 2 px ; famille de polices : "Arimo", sans empattement ; poids de la police : gras ; couleur : blanc ; transition : 0,3 s linéaire ; ) .menu-main a:hover (arrière-plan : rgba(0, 0,0,.3);) @media (max-width : 830px) ( .menu-main ( padding-top : 90px ; text-align : center ; ) .navbar-logo ( position : absolue ; gauche : 50 % ;top : 10px ; transform : translateX(-50 %); ) .menu-main li ( float : aucun ; display : inline-block ; ) .menu-main a ( line-height : normal ; padding : 20px 15px; font -taille : 16 px ; ) ) @media (largeur maximale : 630 px) ( .menu-main li (affichage : bloc ;) )6. Menu responsive avec logo à gauche
@importurl("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( arrière-plan : rgba(255,255,255,.5); box-shadow : 3px 0 7px rgba(0,0,0,.3); rembourrage : 20px; ) .top-menu:after ( contenu : "" ;affichage : table ; effacer : les deux ; ) .navbar-logo (affichage : bloc en ligne ;) .menu-main ( style de liste : aucun ; marge : 0 ; rembourrage : 0 ; flotteur : droite ; ) .menu-main li (display : inline-block ;) .menu-main a ( text-decoration : none ; display : block ; position : relative ; line-height : 61px ; padding-left : 20px ; font-size : 18px ; letter-spacing : 2px ; font-family : "Arimo", sans-serif ; font-weight : gras ; couleur : #F73E24 ; transition : .3s linear ; ) .menu-main a:before ( contenu : "" ; largeur : 9px ; hauteur : 9 pixels ; arrière-plan : #F73E24 ; position : absolue ; gauche : 50 % ; transformation : rotation (45 degrés) traduction X (6,5 px) ; opacité : 0 ; transition : 0,3 s linéaire ; ) .menu-main a:hover:before (opacité : 1 ;) @media (largeur maximale : 660 px) ( .menu-main ( float : aucun ; padding-top : 20px ; ) .top-menu ( text-align : center ; padding : 20px 0 0 0 ; ) .menu-main a (padding : 0 10px ;) .menu-main a:before (transform : rotate(45deg) translateX(-6px);) ) @media (max-width : 600px) ( .menu-main li (bloc de visualisation;) )Tout d'abord, voyons à quoi sert le menu et de quoi il s'agit.
menu du site- il s'agit d'une liste de pages ou de rubriques du site, placées en évidence, et destinées à l'accès des utilisateurs à ces pages ou rubriques. Les menus sont de deux types : principaux et supplémentaires. Généralement, le menu principal contient des liens vers des sections clés du site. Les menus supplémentaires contiennent généralement des liens vers des sous-sections ou des pages spécifiques. De plus, les menus peuvent avoir une structure hiérarchique de 3 types : liste déroulante, liste déroulante et liste développée (peut avoir une structure arborescente).
Ainsi, nous avons découvert que le menu est une liste à un ou plusieurs niveaux. En conséquence, nous le ferons à l'aide d'un élément représentant une liste. En HTML, ces éléments sont définis par des balises ul Et ol, désignant respectivement les listes à puces et numérotées. Chaque élément de la liste est délimité par une balise li.
Dans notre document web, à l'endroit prévu pour le code du menu horizontal, écrivez le code HTML suivant :
Cette liste sera le menu principal de notre site. Il n'est pas nécessaire de créer le menu principal sous forme de signets. Vous pouvez même utiliser un menu extensible ou déroulant à plusieurs niveaux, ou autre, mais lors de la conception d'un menu, faites attention à la facilité de navigation. En règle générale, plus l'imbrication d'un menu est petite, plus il est pratique. Ainsi, un menu qui a plus d'un niveau d'imbrication n'est pas le meilleur choix. Dans ce cas, il est préférable d'envisager la possibilité d'introduire un menu supplémentaire ou un autre mode de navigation.
Le premier élément du menu principal a pour attribut classe avec un sens choisi, donc en utilisant la règle CSS donnée par le sélecteur avec ce nom de classe, nous pouvons mettre en surbrillance l'onglet de menu défini par cet élément. Dans cet exemple, nous ne mettrons en aucun cas en surbrillance l'élément sélectionné. Cependant, c'est ainsi que les menus sont créés avec l'onglet actuellement sélectionné. De plus, ici tous les liens mènent à la page actuelle. Dans un vrai menu, les liens menant à eux-mêmes ne devraient pas l'être, sauf peut-être pour un lien vers la page principale. De plus, tous les liens sont entourés d'une balise portée, nous en aurons besoin pour centrer verticalement le texte.
Les listes en HTML sont des éléments de bloc. Si vous ouvrez maintenant notre page Web dans un navigateur, vous verrez que les liens de notre menu sont placés les uns en dessous des autres. Par conséquent, en plus du style de chaque élément qui définit un onglet, nous devons définir le style de son affichage.
Ajoutez les règles suivantes au fichier de style :
#hmenu(
marge gauche : 160px ; /* sert à aligner le menu pour qu'il commence au-dessus de la zone de contenu */
}
/* stylise l'onglet */
#hmenu li (
/* définir la police */
famille de polices : Calibri ;
taille de police : 14 px ;
/* rembourrage du haut */
marge supérieure : 5px ;
/* espacement entre les tabulations */
marge-gauche : 0,5 em
marge droite : 0,5 em
/* pointeur de la souris */
curseur : pointeur ;
/* Arrière-plan */
image de fond : url("mm_button.png");
répétition d'arrière-plan : pas de répétition ;
/* dimensions de l'onglet */
largeur : 100px
hauteur : 40px ;
/* rend l'élément à la fois inline et block en même temps */
affichage : bloc en ligne
}
/* style d'onglet actif */
.selected( /* ... */)
/* onglet au survol */
#hmenu li:survoler(
image d'arrière-plan : url("mm_button_hover.png");
}
/* style de texte des liens */
#hmenu li a (
la couleur verte;
décoration de texte : aucune ; /* désactiver le soulignement des liens */
}
/* centre le texte verticalement */
#hmenu li a span (
bloc de visualisation; /* crée le bloc d'élément */
rembourrage supérieur : 0,8 em ;
rembourrage en bas : 0,8 em
}
Tout est décrit ici à l'intérieur du code, je noterai juste qu'en utilisant le code CSS ci-dessus, seuls les navigateurs modernes afficheront correctement la page. C'est dedans Internet Explorer en dessous de la version 8, la page sera rendue de manière incorrecte. En effet, les navigateurs plus anciens tels qu'Internet Explorer 6 et 7 ne prennent pas en charge les valeurs inline et inline-block pour les listes. Remplacement de l'affichage : ligne de bloc en ligne dans la deuxième règle par
/* pour les versions inférieures de Firefox */
affichage : -moz-inline-stack ;
/* pour tous sauf IE 7- et Firefox */
affichage : bloc en ligne
/* Pour IE 7 et inférieur */
*affichage : en ligne ;
_débordement caché;
zoom : 1 ;
De même, nous allons créer un menu sur la gauche.
Stylisons-le avec CSS.
#vmenu li a (
la couleur verte;
décoration de texte : aucune ;
}
#vmenu li(
famille de polices : Calibri ;
taille de police : 14 px ;
style de police : normal ;
largeur : 115 px ;
bloc de visualisation;
débordement caché; /* masquer les éléments contextuels */
rembourrage : 0,5 em 0 em 0,5 em 0 ;
/* faire ressembler l'élément à un bouton en définissant l'arrière-plan approprié */
background-image:url("sm_button.png");
position d'arrière-plan : centre ;
répétition d'arrière-plan : pas de répétition ;
}
#vmenu li a span(
largeur : 100 px ;
rembourrage-gauche : 1 em ;
rembourrage à droite : 100 px ;
bloc de visualisation;
}
#vmenu li:hover (
background-image:url("sm_button_hover.png");
}
De plus, comme dans le cas précédent, une erreur d'affichage se produira dans les versions inférieures d'Internet Explorer. Il est lié au doublement des retraits des éléments dans ce navigateur.
Dans la prochaine leçon, nous compléterons notre mise en page en plaçant le logo, le contenu et le pied de page de notre site Web.
Si votre site Web ne se limite pas à une seule page Web, vous devriez envisager d'ajouter une barre de navigation (menu). Un menu est une section d'un site Web conçue pour aider le visiteur à naviguer sur le site. Tout menu est une liste de liens menant aux pages internes du site. Le moyen le plus simple d'ajouter une barre de navigation à votre site consiste à créer un menu en utilisant CSS et HTML.
Menu vertical
La première étape de la création d'un menu vertical consiste à créer une liste à puces. Nous devons également être en mesure d'identifier la liste, nous allons donc lui ajouter un attribut id avec l'id "navbar". Chaque élément
