Tâche
Faire menu horizontal, dont les points ont une pente arbitraire (Fig. 1).
Riz. 1. Vue du menu avec des éléments inclinés
Solution
La propriété de style transform est responsable de la transformation de l'élément ; la fonction skewX est utilisée comme valeur, qui définit la pente souhaitée. Il est plus facile de régler l'angle d'inclinaison en degrés, par exemple, 30 degrés correspond à 30 ° par rapport à la verticale. La transformation affecte également tous les éléments enfants, de sorte que le texte à l'intérieur de l'élément sera également incliné, ce qui n'est pas le cas. de la meilleure façon possible reflété dans sa lisibilité et sa beauté. Il est donc important d'appliquer à nouveau l'inclinaison au texte, mais dans l'autre sens ; pour cela, il suffit de changer le signe devant la valeur des degrés.
Les navigateurs prennent en charge la propriété transform principalement avec leurs propres préfixes, donc pour l'universalité des styles, vous devez la répéter plusieurs fois avec la même valeur, en ajoutant -moz- pour Firefox, -webkit- pour Safari et Chrome, -o- pour Opera et -ms. - pour le navigateur Internet Explorer comme le montre l'exemple 1.
Exemple 1 : inclinaison d'un élément de menu
HTML5 CSS3 IE Cr Op Sa Fx
- Joker
- Pazuzu
- Palpatine
- Docteur Fatalis
DANS dans cet exemple un menu horizontal est créé à l'aide d'une liste à puces. Pour garantir que la liste est horizontale, une propriété d'affichage avec la valeur inline-block est ajoutée à l'élément li dans les styles. Pour l'inclinaison, utilisez la propriété transform avec la fonction skewX et la valeur -30º. Cette propriété s'applique également aux liens à l'intérieur de la liste, mais avec une valeur positive de 30º, cela garantit que les lettres s'affichent correctement plutôt qu'inclinées.
Les navigateurs Chrome, Safari et Firefox utilisent la propriété transform sur les éléments de bloc ou en ligne, de sorte que les liens ont leur propriété d'affichage définie sur block .
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 en toute sécurité sur 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 menu
En général, décidons d'abord comment nous allons créer le menu lui-même. En HTML5 de manière standard Il est envisagé de 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 tout de suite à balisage HTML avec des listes imbriquées. 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 point important, c'est-à-dire 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 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 CSS
La 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écrochage
Ce 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 vertical
Bon, 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 niveaux
En 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.
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 ». Nous créons nouveau fichier appelé menu.html, par exemple, en utilisant Dreamweawer ou en utilisant un bloc-notes classique. Dans celui-ci, entre les balises body, nous plaçons notre menu. C'est normal liste à puces 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 #. En utilisant Programme Photoshop créer une image de 3x30 px, avec remplissage en dégradé comme le montre l'image ci-dessous. Le fichier sera enregistré dans Format GIF. Appelons-le bg.gif. Cette image servira d’image de fond de notre menu.
Voici le contenu du fichier menu.html :
- 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); /*set image de fond*/ background-repeat:repeat-x; /*répétez notre image horizontalement*/ list-style:none; /*supprimer les marqueurs de liste*/ background-color:#4778c3; /*définit 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*/ height:30px; /*et la hauteur du bloc*/ text-align:center; /*texte centré*/ line-height: 2.1em; /* interligne*/ text-decoration:aucun; /*supprimer le soulignement des liens*/ color:#fff; /*couleur du texte du lien - blanc*/ border-right:#fff solid 1px; /*frontière côté droit bloc (ligne blanche de 1 px)*/ ) ul a:hover ( color:#ccc; /*le lien change de couleur lorsqu'il est 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 reçu un menu horizontal entièrement multi-navigateurs qui se ressemble non seulement dans tous les navigateurs. navigateurs modernes, mais aussi dans des raretés telles que IE 5.5 et IE 6.0. Tous les éléments de menu sont représentés sous forme d'éléments de bloc et ont mêmes tailles largeur 100 px et hauteur 30px. La conception d'un élément de bloc utilisant la bordure droite est utilisée comme séparateur pour les éléments de menu. blanc 1px 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 grâce à votre imagination, propriétés CSS et supplémentaire éléments graphiques. bien et notre menu horizontalça ressemble à ça :
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
La tâche de centrer un menu horizontal peut être délicate, en particulier pour ceux qui découvrent CSS. La recherche de solutions conduit à des résultats très liste limitée méthodes, dont la plupart reposent sur des astuces CSS, JavaScript ou l'utilisation de règles non standard qui ne sont pas prises en charge par tous les navigateurs. Dans ce tutoriel, nous examinerons une méthode de centrage d'un menu horizontal qui utilise uniquement des Règles CSS et fonctionne dans tous les navigateurs.
Exemple de menu centré
Ci-dessous se trouve un menu horizontal centré dans cette colonne, dans lequel le deuxième onglet est activé. Vous pouvez essayer de redimensionner la fenêtre ou la page de votre navigateur pour vous assurer que le menu reste toujours centré et fonctionnel.
Sur la page de démonstration, vous pouvez voir plusieurs options de conception pour un menu centré horizontalement. N’importe lequel d’entre eux peut être utilisé dans vos projets.
Balisage HTML
Tous les menus présentés dans ce didacticiel utilisent une structure simple. Il s'agit d'une liste ordinaire non ordonnée de liens placés dans un élément div.
Code CSS du menu centré
Vous trouverez ci-dessous le code CSS complet utilisé pour centrer le menu. Une explication du principe de fonctionnement est donnée plus loin dans la leçon.
#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :aucun; margin:0; padding:0; position:relative; left:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( background:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( color:# fff ; arrière-plan : #000 ; poids de la police : gras ; )
Comment fonctionne la méthode de centrage ?
L'action de la méthode est basée sur positionnement relatiféléments de blocs flottants les uns dans les autres. Voyons d’abord comment la taille des éléments change avec le déplacement.
Élément div(bloc) sans déplacement est étiré sur toute la largeur dont il dispose.
Mais si nous déplaçons le div vers la gauche, il se rétrécira automatiquement pour s'adapter à son contenu. La compression est point clé en cours de mise en œuvre cette méthode centrer le menu. Cela vous aide à déplacer le menu vers la bonne position.
Menu standard aligné à gauche
Prenons un menu standard aligné à gauche et recréons-le étape par étape. Pour plus de clarté, les éléments sont colorés Couleurs différentes, donc il est immédiatement clair ce qui va où.
Veuillez noter les points suivants :
- Élément div menu centré(rectangle bleu) est décalé vers la gauche, mais a une largeur de 100 %, il reste donc étendu sur toute la page.
- Élément ul(rectangle rose) est à l'intérieur de l'élément menu centré div et se déplace vers la gauche. Cela signifie qu'il sera compressé à la largeur de son contenu, c'est-à-dire à la largeur totale de tous les signets.
- Tous les éléments li (rectangles verts) sont à l'intérieur de l'élément ul et déplacez-vous vers la gauche. Ainsi, ils sont compressés à la taille des liens qu’ils contiennent et alignés sur une ligne horizontale.
- À l'intérieur de chaque lien (rectangles orange), le texte du signet est affiché : Signet 1, Signet 2, etc.
Déplacer la position d'une liste non ordonnée
Ensuite, nous décalons l'élément ul vers la droite de 50% en utilisant la position:relative; . Lorsqu'un élément est décalé en pourcentage dans ces conditions, il est important de rappeler que la largeur totale des éléments qu'il contient n'est pas sa largeur. Dans notre cas, le décalage se produit de la moitié de la fenêtre du navigateur (ou de l'espace disponible pour l'affichage), ce qui fait que notre menu démarre au milieu de la fenêtre et s'étend partiellement au-delà de ses limites. Et passons à l'étape suivante.
Déplacer la position de tous les éléments du menu
Il ne reste plus qu'à déplacer tous les éléments li laissé de 50%. Cela représente 50% de la largeur de notre élément ul (le conteneur qui contient le menu). Ainsi, les signets sont décalés exactement au centre de la fenêtre.
Quelques remarques importantes
Lors de l’utilisation de cette méthode de centrage, il y a plusieurs points importants à retenir :
- Puisque l'élément ul s'étend partiellement au-delà de la fenêtre, cela se traduit par l'affichage de barres de défilement. Par conséquent, vous devez utiliser la règle overflow:hidden;. pour élément div menu centré. Ainsi, la partie saillante de l'élément div sera coupé.
- Puisque l'élément ul n'est pas aligné sur les signets, vous ne pouvez utiliser aucun style visuel pour cela. Laissez l'élément ul sans couleur de fond et sans bordure pour qu'il devienne complètement invisible. Et les styles de signets ne doivent être utilisés que pour les éléments li.
- Si vous devez définir des styles spéciaux pour le premier et le dernier signets, vous devez ajouter une classe pour le premier et le dernier élément. li, afin que vous puissiez les styliser individuellement.
Conclusion
La solution proposée est compatible avec tous les navigateurs, n'utilise pas JavaScript et supporte redimensionnable texte.
Si votre site Web est plus qu'une simple page Web, vous devriez alors envisager d'ajouter une barre de navigation (menu). Le menu est une section d'un site Web conçue pour aider les visiteurs à naviguer sur le site. Tout menu est une liste de liens menant à pages internes site. Le plus d'une manière simple ajouter une barre de navigation à un site, c'est créer un menu avec en utilisant CSS et HTML.
Menu vertical
La première étape de la création menu vertical créera une liste à puces. Nous devrons également pouvoir identifier la liste, nous y ajouterons donc un attribut id avec l'identifiant "navbar". Chaque élément
Notre prochaine tâche consiste à réinitialiser les styles de liste par défaut. Nous devons supprimer le remplissage externe et interne de la liste elle-même ainsi que les puces des éléments de la liste. Définissez ensuite la largeur souhaitée :
#navbar (marge : 0 ; remplissage : 0 ; type de style de liste : aucun ; largeur : 100 px ; )
Il est maintenant temps de styliser les liens eux-mêmes. Nous leur ajouterons Couleur de l'arrière plan, modifiez les paramètres du texte : couleur, taille et épaisseur de la police, supprimez le soulignement, ajoutez des petits retraits et redéfinissez l'affichage élément de l'inline au 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 blocage. Désormais, nos liens occupent tout l'espace disponible des éléments de la liste, c'est-à-dire que pour suivre le lien, nous n'avons plus besoin de passer le curseur exactement sur le texte.
#navbar a ( couleur d'arrière-plan : #949494 ; couleur : #fff ; remplissage : 5px ; décoration de texte : aucun ; poids de police : gras ; bordure gauche : 5px solide #33ADFF ; affichage : bloc ; ) #navbar li ( bordure gauche : 10 px solide #666 ; bordure inférieure : 1 px solide #666 ; )
Nous avons combiné tout le code décrit ci-dessus en un seul exemple, maintenant en cliquant sur le bouton essayer, vous pouvez accéder à la page d'exemple et voir le résultat :
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 à l'exemple de menu vertical évoqué précédemment et ajoutons la règle suivante à la feuille de style :
#navbar a:hover ( couleur d'arrière-plan : #666 ; bordure gauche : 5px solide #3333FF ; ) Essayez »
Menu horizontal
Dans l’exemple précédent, nous avons examiné la barre de navigation verticale, que l’on retrouve le plus souvent sur les sites Web à gauche ou à droite de la zone de contenu principale. Cependant, les menus contenant des liens de navigation sont également souvent situés horizontalement en haut de la page Web.
Un menu horizontal peut être créé en stylisant une liste normale. Propriété d'affichage pour les éléments
Pour placer 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 par défaut utilisé pour les listes et redéfinissons les éléments de la liste de bloc à en ligne :
#navbar (marge : 0 ; padding : 0 ; list-style-type : aucun ; ) #navbar li ( affichage : en ligne ; ) Essayez »
Il ne nous reste plus qu'à définir le style de notre menu horizontal :
#navbar (marge : 0 ; remplissage : 0 ; type de style de liste : aucun ; bordure : 2px solide #0066FF ; rayon de bordure : 20px 5px ; largeur : 550px ; alignement du texte : centre ; couleur d'arrière-plan : #33ADFF ; ) #navbar a ( couleur : #fff ; remplissage : 5px 10px ; décoration de texte : aucun ; police-weight : gras ; affichage : bloc en ligne ; largeur : 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 comportera des liens de navigation principaux situés dans la barre de navigation horizontale et des sous-éléments qui n'apparaîtront que lorsque le curseur de la souris survolera l'élément de menu auquel ces sous-éléments se rapportent.
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 l'élément
Essayer "
Maintenant, commençons écrire du CSS code. Tout d'abord, vous devez masquer la liste des sous-éléments à l'aide de la déclaration display: none; afin qu'ils ne soient pas affichés en permanence sur la page Web. Pour afficher les sous-éléments, nous en avons besoin au survol d'un élément
#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )
Nous supprimons les retraits et les marqueurs par défaut des deux listes. Nous créons 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 les uns en dessous des autres.
#navbar, #navbar ul ( marge : 0 ; remplissage : 0 ; list-style-type : aucun ; ) #navbar li ( float : gauche ; ) #navbar ul li ( float : aucun ; )
Ensuite, nous devons nous assurer que notre sous-menu déroulant ne pousse pas le contenu situé sous la barre de navigation vers le bas. Pour ce faire, nous allons définir la position des éléments de la liste : relative ; , et une liste contenant les sous-éléments position: Absolute; et ajoutez une propriété top avec une valeur de 100% pour que le sous-menu positionné de manière absolue apparaisse exactement en dessous du lien.
#navbar ul ( affichage : aucun ; position : absolue ; haut : 100 % ; ) #navbar li ( float : gauche ; position : relative ; ) #navbar ( hauteur : 30px ; ) Essayez »
La hauteur de la liste parent a été ajoutée volontairement, 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 le menu déroulant sera prêt :
#navbar ul ( affichage : aucun ; couleur d'arrière-plan : #f90 ; position : absolue ; haut : 100 % ; ) #navbar li:hover ul ( affichage : bloc ; ) #navbar, #navbar ul ( marge : 0 ; remplissage : 0 ; type de style de liste : aucun ; ) #navbar (hauteur : 30 px ; couleur d'arrière-plan : #666 ; rembourrage-gauche : 25 px ; largeur minimale : 470 px ; ) #navbar li ( float : gauche ; position : relative ; hauteur : 100 % ; ) #navbar li a ( affichage : bloc ; remplissage : 6px ; largeur : 100px ; couleur : #fff ; décoration du texte : aucun ; alignement du texte : centre ; ) #navbar ul li ( float : aucun ; ) #navbar li:hover (couleur d'arrière-plan : #f90; ) #navbar ul li:hover (couleur d'arrière-plan : #666; )