Il est rare de voir des menus horizontaux sur un site Web qui se déroulent lorsque vous passez la souris, mais ils sont très beaux et fonctionnels. Ou comme on dit - utilisable. Aujourd'hui, nous allons créer un menu déroulant horizontal utilisable en utilisant du code CSS pur. J'ai souvent remarqué que les gens utilisent javascript pour obtenir cet effet. En fait, tout ne peut être fait qu’avec CSS. Examinons deux options pour les menus horizontaux déroulants utilisant CSS. C'est bien d'avoir le choix, je pense que vous êtes d'accord.
Si vous avez besoin d’un menu horizontal simple. Lecture de l'article sur la création. Une fois que vous maîtrisez les bases, commencez à créer un menu déroulant.
Option 1 – Menu horizontal déroulantPour plus de clarté, voir la capture d'écran ci-dessous. Vous connaissez probablement cette structure de menu horizontale.
Pour encore plus de clarté, regardons la structure HTML du menu. Vérifions ce qui a exactement permis la position horizontale du menu et sa validité. Structure CSS des menus :
L'affichage et le masquage des enfants du menu se font en utilisant CSS : ul > li:hover ul. C'est très simple. Ce commutateur vous permet de définir le comportement de tous les menus enfants. Lors de la création d'un menu horizontal normal, en plus du display:block, nous ajoutons d'autres styles, tels que la couleur d'arrière-plan, etc. La seule différence entre un menu normal et un menu déroulant est que nous ne stylisons pas les UL imbriquées. Vous devez le placer sur l'élément LI dépendant, qui est survolé (UL > LI : survol).
Regardons le code CSS :
#header (hauteur: 120px; position: relative; arrière-plan: url transparent (header_bkg.png) répétition-x défilement en haut au centre;) #nav ( marge: 0px; remplissage: 0px; position: absolu; haut: 70px; affichage: bloc ;) #nav > li ( list-style-type:aucun; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;) #nav > li:hover ul ( display :block; ) #nav > li:hover ( background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; ) #nav li ul ( margin:0px; padding:0px; display:aucun;) #nav li ul li ( list-style-type:aucun; margin:10px 0 0 0;) #nav li ul li a ( display:block; padding:5px 10px; color:#A2E200; text- decoration:none;) #nav li ul li:survolez un ( background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;) #nav li span ( curseur:pointeur; marge :0px 10px; font-weight:bold; )
Voici comment procéder en utilisant du code CSS pur. Je n'arrive toujours pas à comprendre pourquoi je devrais utiliser JavaScript, sauf peut-être pour .
Option 2 - menu horizontal + solution pour IE6Veuillez noter que l'option 1 ne fonctionnera pas dans IE6. La solution à la compatibilité du menu avec IE6 sera un morceau de code js. Plus précisément, créons un menu. Ci-dessous une capture d'écran du futur menu :
La conception du menu est similaire à celle de la première version, passons donc au code lui-même.
#menu ( remplissage : 0 ; marge : 0 ; taille de police : 100 % ; famille de polices : Géorgie ; ) #menu li ( style de liste : aucun ; flotteur : gauche ; hauteur : 33px ; remplissage : 0 ; marge : 0 ; largeur : 150 px ; alignement du texte : centre ; arrière-plan : #171717 ; position : relative ; remplissage en haut : 12 px ; ) #menu li ul ( style de liste : aucun ; remplissage : 0 ; marge : 0 ; largeur : 150 px ; affichage : aucun ; position : absolue ; gauche : 0 ; haut : 45px ; ) #menu li ul li ( float : aucun ; hauteur : 33px ; marge : 0 ; largeur : 150px ; alignement du texte : centre ; arrière-plan : #7F7F7F ; ) #menu li a ( affichage : bloc ; largeur : 150 px ; hauteur : 33 px ; couleur : #fff ; décoration de texte : aucune ; ) #menu li:hover ul, #menu li.jshover ul ( affichage : bloc ; ) # menu li:hover, #menu li.jshover ( arrière-plan : #424242 ; )
JS-solution pour IE6
jsHover = function() ( var hEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0, len=hEls.length; i a ( color: #9fde63; )
Étape 4 - Menu déroulantTout d’abord, supprimons cette ligne de code que nous avons ajoutée lors de la deuxième étape.
Menu ul ( affichage : aucun ; )
Nous allons maintenant modifier le style du sous-menu. Ajoutons un positionnement de sous-menu de 40 px en haut et 0 px à gauche de l'élément de menu et ajoutons des coins arrondis en bas. Fixons l'opacité à zéro et changeons-la à 1 au survol pour créer un effet de fondu entrant/sortant. Pour l'effet de glissement haut/bas, nous devons définir la hauteur de la liste sur 0px lorsque la liste déroulante est masquée et 36px lorsque vous survolez la liste déroulante.
Menu ul ( position : absolue ; haut : 40px ; gauche : 0 ; opacité : 0 ; arrière-plan : #2f3035 ; -webkit-border-radius : 0 0 4px 4px ; -moz-border-radius : 0 0 4px 4px ; border- rayon : 0 0 4px 4px ; -webkit-transition : opacité .3s facilité .1s ; -moz-transition : opacité .3s facilité .1s ; -o-transition : opacité .3s facilité .1s ; -ms-transition : opacité . 3s facilité .1s ; transition : opacité .3s facilité .1s ; ) .menu li:hover > ul ( opacité : 1 ; ) .menu ul li ( hauteur : 0 ; débordement : caché ; remplissage : 0 ; -webkit-transition : hauteur .3s facilité .1s ; -moz-transition : hauteur .3s facilité .1s ; -o-transition : hauteur .3s facilité .1s ; -ms-transition : hauteur .3s facilité .1s ; transition : hauteur .3s facilité . 1s; ) .menu li:hover > ul li ( hauteur : 36px ; débordement : visible ; remplissage : 0; )
Définissez la largeur du menu déroulant cliquable sur 100 px. Après chaque lien j'ai ajouté une bordure pour les séparer. Nous supprimerons la bordure dans le dernier lien.
Menu ul li a ( largeur : 100px ; remplissage : 4px 0 4px 40px ; marge : 0 ; bordure : aucune ; bordure inférieure : 1px solide #464649 ; ) .menu ul li:dernier enfant a ( bordure : aucune ; )
Pour compléter un menu CSS horizontal, vous devez ajouter une icône pour chaque sous-menu déroulant. Pour ce faire, nous allons créer une classe personnalisée pour chacun des sous-menus et ajouter une image d'arrière-plan.
Menu a.d ( arrière-plan : url(docs.png) centre 6px sans répétition ; ) .menu a.m ( arrière-plan : url(bubble.png) centre 6px sans répétition ; ) .menu a.s ( arrière-plan : url(flèche.png) non -répétez le centre 6px; )
Nous avons réussi à créer un menu déroulant horizontal en utilisant les styles CSS3 et sans l'utiliser, même si cela était également possible. Si vous avez des questions, faites-le moi savoir dans les commentaires.
(téléchargements : 398)
De l'auteur : Bonjour à tous. Pour une raison quelconque, les webmasters associent les menus déroulants aux scripts, mais pendant longtemps, une telle navigation peut être effectuée de manière absolument simple en utilisant du CSS pur. De plus, un tel menu ne sera pas pire. Aujourd'hui, je vais vous montrer comment créer un menu déroulant en CSS. Je partagerai, pour ainsi dire, la recette.
Plan de cours et disposition de notre menuEn général, décidons d'abord comment nous allons créer le menu lui-même. En HTML5, la méthode standard consiste à le créer dans le conteneur de navigation à l'aide d'une liste à puces. Faisons exactement cela. Nous supprimerons les marqueurs plus tard en utilisant du CSS ; nous n’en avons pas du tout besoin dans le menu.
En fait, j'écrirai immédiatement un balisage avec des listes imbriquées en HTML. Autrement dit, notre liste sera à deux niveaux - elle contiendra d'autres listes. À savoir, pour chaque élément, il existe 1 liste, qui formera un menu déroulant.
Il y a un point important ici, c'est que vous n'aurez peut-être pas besoin de créer une liste déroulante pour tous les éléments, mais seulement pour certains. Pas de problème, dans les éléments sans listes déroulantes, nous ne créons tout simplement pas de listes imbriquées.
En fait, voici tout le balisage :
< nav id = "nav" > < 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 donné à l'ensemble de la navigation un identifiant de nav, et à toutes les listes imbriquées une classe de style de seconde pour comprendre qu'elles sont imbriquées.
Super, nous avons le balisage prêt, vous pouvez regarder le résultat :
Ouais, ça a l'air terrible. Mais maintenant nous allons activer le CSS et dans quelques minutes 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'il s'agit d'éléments de bloc. Je leur ai également donné une largeur explicite et un 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 en plus 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. Dans le cas d'un 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.
Bonjour chers visiteurs de mon blog ! Aujourd'hui, nous allons parler du menu horizontal principal du site, à savoir comment aligner le menu horizontal au centre. Oui, à première vue, qu'est-ce qui est si compliqué là-dedans - j'ai défini les retraits nécessaires, je les ai ajustés et c'est tout. Mais il y a ici quelques nuances. Un site est avant tout dynamique, c'est-à-dire Du nouveau contenu apparaît constamment sur le site, de nouveaux blocs d'informations apparaissent, etc. C'est ainsi que certains éléments peuvent apparaître/disparaître dans le menu principal. En tenant compte de tout cela, nous devons nous assurer que lorsque nous ajoutons ou supprimons un élément de menu, le menu reste au centre. Bien entendu, il n'est pas toujours nécessaire de le centrer, tout dépend de la conception. Mais si vous avez toujours l'intention de placer le menu horizontal au centre, alors en utilisant quelques astuces simples en CSS, nous pouvons obtenir le résultat souhaité.
Structure des articles
Menu horizontal au centre sans éléments déroulantsTout d'abord, regardons l'exemple d'un menu horizontal qui ne comporte pas d'éléments déroulants.
Code HTML- Paragraphe 1
- Point 2
- Point 3
- Point 4
- Point 5
Regardons tout dans l'ordre, tout est simple ici. Nous créons un conteneur « menu principal » dans lequel nous plaçons notre menu sous la forme d'une liste non ordonnée.
Il s’agit maintenant des styles CSS. Nous réinitialisons d’abord toutes les marges et le remplissage à zéro pour tous les navigateurs. Ensuite, en utilisant la propriété « float:left », nous décalons notre liste non ordonnée vers la gauche puis, en utilisant le positionnement relatif, nous la décalons de 50 % vers la droite. La largeur de la liste "ul" sera égale à la somme des longueurs de tous les éléments "li" qui s'y trouvent. Ainsi, si nous divisons mentalement la fenêtre du navigateur en deux, notre menu se déplacera vers la droite de la ligne de démarcation. Pour aligner, nous appliquerons également un positionnement relatif aux éléments « li » et les déplacerons vers la gauche de 50 %, en spécifiant la propriété « left:-50% ». Et aussi, j'ai presque oublié, notre conteneur « mainmenu » doit spécifier la propriété « overflow:hidden », sinon nous obtiendrons une barre de défilement horizontale.
Ça y est, maintenant notre menu est aligné au centre. Vous pouvez maintenant ajouter ou soustraire des points, cela n'affectera pas le positionnement. Vous pouvez également utiliser ce menu sur vos sites Web en modifiant simplement les styles en fonction de votre conception.
Menu horizontal au centre avec éléments déroulantsExaminons maintenant les sous-éléments déroulants. Ici, la situation est quelque peu différente et un peu plus compliquée, car dans le premier cas, nos sous-éléments n'apparaîtront pas, car nous avons spécifié la propriété « overflow: Hidden » au bloc « mainmenu ». Cela signifie que les éléments en dehors de ce bloc ne seront pas affichés. Mais il existe une issue.
J'ai donc modifié le code précédent et supprimé la propriété "overflow:hidden".
Code HTML- Paragraphe 1
- paragraphe 1.1
- paragraphe 1.1.1
- paragraphe 1.1.2
- paragraphe 1.1.3
- paragraphe 1.2
- paragraphe 1.2.1
- paragraphe 1.2.2
- paragraphe 1.2.3
- paragraphe 1.3
- paragraphe 1.4
- paragraphe 1.5
- paragraphe 1.1
- Point 2
- paragraphe 2.1
- paragraphe 2.2
- paragraphe 2.3
- paragraphe 2.3.1
- paragraphe 2.3.2
- paragraphe 2.3.3
- paragraphe 2.4
- Sous-élément long, sous-élément long
- Élément de menu long 3
- paragraphe 3.1
- paragraphe 3.2
- paragraphe 3.3
- paragraphe 3.4
- paragraphe 3.5
- Point 4
- paragraphe 4.1
- paragraphe 4.2
- paragraphe 4.3
- paragraphe 4.4
- paragraphe 4.5
- Point 5
- paragraphe 5.1
- paragraphe 5.2
- paragraphe 5.3
- paragraphe 5.4
- paragraphe 5.5
Désormais, notre menu est placé au centre et des sous-éléments apparaissent lorsque vous le survolez.
Centrage des menus avec flexboxVous pouvez également centrer le menu en appliquant une nouvelle règle en CSS – flexbox. En général, je souhaite consacrer un article séparé aux astuces avec flexbox, ça vaut le coup, cela simplifie grandement la vie d'un maquettiste. En général, nous n'irons pas plus loin ici... Je fournirai ici uniquement le code CSS du menu avec les éléments déroulants. Le code HTML est le même que ci-dessus.
Code CSS *, *::after, *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms- dimensionnement de la boîte : bordure-boîte ; dimensionnement de la boîte : bordure-boîte ; marge : 0 ; remplissage : 0 ; ) #mainmenu ( position : relative ; arrière-plan : #444444 ; hauteur : 40px ; marge : 30px 0 ; remplissage : 0 ; largeur : 100 % ; z-index : 10 ) #mainmenu ul ( affichage : -webkit-box ; affichage : -webkit-flex ; affichage : -ms-flexbox ; affichage : flex ; -webkit-box-orient : horizontal ; - webkit-box-direction : normal ; -webkit-flex-direction : ligne ; -ms-flex-direction : ligne ; flex-direction : ligne ; hauteur : 40 px ; alignement du texte : centre ; police : 15px Arial, Helvetica, sans -serif ; style de liste : aucun ; remplissage : 0 ; marge : 0 ; -webkit-box-pack : centre ; -webkit-justify-content : centre ; -ms-flex-pack : centre ; justifier-contenu : centre ; ) /** Points principaux **/ #mainmenu > ul > li ( position : relative ; hauteur : 40px ; remplissage : 0 ; marge : 0 ) #mainmenu > ul > li > a ( bordure gauche : 1px solide #666 ; affichage : bloc ; couleur : #fff ; décoration de texte : aucune ; remplissage : 0 20px ; hauteur de ligne : 40 px ; ) #mainmenu > ul > li:first-child > a ( border : none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( couleur : #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( arrière-plan : #666 ) /* Sous-éléments déroulants */ #mainmenu ul li ul ( position : absolue ; gauche : 0 ; haut : 40px ; affichage : aucun ; style de liste : aucun ; visibilité : caché ; remplissage : 0 ; marge : 0 ; largeur : 200px ) #mainmenu > ul > li ul li ( couleur d'arrière-plan : #666 ; position : relative ; gauche : 0 ; affichage : élément de liste ; float : aucun ; hauteur : auto ; marge : 0 ; alignement du texte : gauche ; ) #mainmenu ul li ul li a ( border -bas : 1px solide #999 ; affichage : bloc ; couleur : #fff ; remplissage : 10px 15px ; décoration de texte : aucun ; ) #mainmenu ul li ul li.parent a ( position : relative ; ) #mainmenu ul li ul > li.parent > a::before ( border-top : 1px solid #fff ; border-right : 1px solid #fff ; contenu : " " ; affichage : bloc ; position : absolue ; droite : 15px ; haut : 50 % ; transformation : translationY(- 50%) rotation(45deg); hauteur : 6px ; largeur : 6px ; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Drop- éléments vers le bas deuxième niveau */ #mainmenu ul li:hover > ul ( opacité : 1 ; visibilité : visible ; marge : 0 ; ) #mainmenu ul li ul li ul ( haut : 0 ; gauche : 200px ; marge : 0 0 0 20px ; largeur : 180px )Comme vous pouvez le constater, les règles n'ont changé que pour la liste parent - #mainmenu ul. La seule chose était que nous devions ajouter des préfixes pour les versions précédentes des navigateurs. Je note que seuls les navigateurs modernes comprennent correctement la règle flexbox. Si vous ciblez des navigateurs plus anciens, l’option flex devra alors être reportée. Vous pouvez voir quels navigateurs comprennent bien flexbox
Créons un menu de navigation horizontal simple pour le site. Pour ce faire, nous utiliserons des techniques simples qui permettront d'afficher correctement notre menu dans tous les navigateurs.
Alors, commençons. Créons une liste avec les noms de notre menu. Laissez les noms des éléments être : « Accueil », « Actualités », « Produits », « Services », « Partenaires », « Contacts ». Créez un nouveau fichier appelé menu.html, par exemple à l'aide du programme Dreamweawer ou d'un bloc-notes classique. Dans celui-ci, entre les balises body, nous plaçons notre menu. Il s'agit d'une liste à puces régulière d'ul avec des éléments li. Bien sûr, nous faisons de chaque élément de menu un lien, où au lieu de l'URL, nous insérons le hachage #. À l'aide de Photoshop, créez une image de 3 x 30 px, avec un remplissage dégradé, comme indiqué dans la figure ci-dessous. Nous enregistrerons le fichier au format GIF. Appelons-le bg.gif. Cette image servira d’image de fond de notre menu.
Voici le contenu du fichier menu.html :
Menu horizontal simple multi-navigateur
- maison
- Nouvelles
- Des produits
- Prestations de service
- Les partenaires
- Contacts
Créons maintenant séparément un fichier de style appelé main.css. Sa liste est présentée dans son intégralité ci-dessous.
Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*aligner la liste à gauche*/ width:auto;/*définir la largeur de l'auto en fonction de le type et le contenu de la liste */ background-image: url(bg.gif); /*définir l'image d'arrière-plan*/ background-repeat:repeat-x; /*répéter notre image horizontalement*/ list-style:none; /*supprimer les marqueurs de liste*/ background-color:#4778c3; /*définir la couleur d'arrière-plan de l'image*/ font-size:13px; /*définir la taille de la police*/ font-family:Arial, Helvetica, sans-serif ; /*définir la police*/ ) ul li ( float:left; /*aligner les éléments de la liste à gauche*/ ) ul a ( display:block; /*représenter les liens de menu sous forme d'éléments de bloc*/ width:100px; /* définir la taille du bloc*/hauteur:30px; /* et la hauteur du bloc*/text-align:center; /*inscription centrée*/hauteur de la ligne: 2,1em; /*espacement des lignes*/text-decoration:none; /* supprimer le soulignement des liens*/ color:#fff; /*couleur du texte du lien - blanc*/ border-right:#fff solid 1px; /*bordure sur le côté droit du bloc (ligne blanche 1px)*/ ) ul a: survolez ( couleur:#ccc; /*le lien change de couleur au survol*/ )
Je pense qu'il ne devrait y avoir aucune question sur le contenu du fichier main.css, j'ai écrit les conseils dans les commentaires de manière suffisamment détaillée et claire, donc je ne me répéterai pas. N'oubliez pas de le connecter à notre page menu.html en utilisant
Résumer. En conséquence, nous avons obtenu un menu horizontal entièrement multi-navigateurs qui se ressemble non seulement dans tous les navigateurs modernes, mais également dans des raretés telles que IE 5.5 et IE 6.0. Tous les éléments de menu sont présentés sous forme d'éléments de bloc et ont les mêmes dimensions de 100 px de largeur et 30 px de hauteur. En tant que séparateur pour les éléments de menu, une conception d'élément de bloc est utilisée en utilisant une bordure blanche droite de 1 px d'épaisseur. C'est pratiquement la manière la plus simple de mettre en œuvre un menu horizontal. Bien sûr, si vous le souhaitez, vous pouvez le modifier, le rendre plus beau et fonctionnel en utilisant votre imagination, les propriétés CSS et des éléments graphiques supplémentaires. Eh bien, notre menu horizontal ressemble à ceci :
Avantages de cette solution :
Facile à faire
Code simple
Pas de tableaux ni de javascript
Compatibilité multi-navigateurs : le menu est le même dans tous les navigateurs
Un seul dessin est utilisé
Code minimum sur la page menu.html
Code minimum pour implémenter les styles dans main.css
Les fichiers utilisés dans cet exemple peuvent être téléchargés dans l'archive