Une tâche
Afficher une liste à puces horizontalement sans puces.
Décision
Balise de liste à puces
- affiche les éléments par défaut
- verticalement les uns sur les autres. Pour créer des éléments de navigation, dans certains cas, il est pratique d'afficher la liste horizontalement. Il existe plusieurs façons d'obtenir cette vue de liste.
Vous devez déjà savoir que HTML contient des éléments de bloc et des éléments en ligne. Les éléments en ligne ne créent pas leurs propres blocs, un exemple de tels éléments est les balises ou . Les éléments de bloc sont rendus avec nouvelle ligne et créer un bloc rectangulaire, un exemple de telles balises
ou alorsAlors, taguez
- est également un élément de bloc.
Taguer
- ne s'est pas comporté comme un élément de bloc, vous pouvez Aide CSS faites-le en ligne.
Responsable de la façon dont l'élément sera affiché dans le document Propriété CSS affichage. Considérez trois de ses valeurs (bien qu'il y en ait plus):
- bloc - l'élément est rendu comme un élément de bloc.
- inline - l'élément est rendu en ligne.
- inline-block - élément block-line, en savoir plus sur ce type d'éléments ci-dessous, nous l'utiliserons.
Commençons par créer une liste horizontale en transformant ses puces en éléments en ligne. Dans le style CSS, écrivons une règle dans laquelle le sélecteur li est défini sur la propriété display avec la valeur inline .
Lister horizontalement
Ainsi, ce style a fonctionné et a obtenu la disposition horizontale des éléments de la liste :
Figure 1. Exemple de travail #1.
Cette méthode présente des inconvénients. Le fait est que les éléments en ligne ont certaines restrictions, par rapport aux éléments de bloc. Par exemple, on ne peut pas leur donner une largeur et une hauteur, mais les blocs peuvent le faire.
Par exemple, nous voulons que l'élément de menu que nous créons ait une largeur de 150px et une hauteur de 40px . Essayons de changer le style comme suit, c'est-à-dire d'ajouter deux règles qui définissent la taille de l'élément de menu :
Ces modifications n'entraîneront aucun changement. Pour que les éléments de menu soient disposés horizontalement et pour pouvoir définir leur largeur et leur hauteur, ils doivent être définis sur le type inline-block . Changeons notre exemple de code :
Lister horizontalement
Ce code fonctionne et les changements sont visibles :
Figure 2. Exemple de travail #2. Mais il peut y avoir différentes variantes, par exemple, nous devons afficher des listes imbriquées dans le menu :
liste imbriquée.
Voici la sortie de ce code :
Figure 3. Exemple de travail #3. On voit que les blocs ne sont pas alignés en hauteur comme on le voudrait. Bien sûr, vous pouvez spécifier la même hauteur pour tous les blocs, mais nous ne connaissons pas toujours sa valeur exacte à l'avance, et elle peut changer.
Et au fait, pourquoi cela se produit-il ?
Nos blocs ont une propriété display de inline-block . Cela signifie qu'ils ont les qualités des éléments de niveau bloc (la possibilité de spécifier une largeur et une hauteur) et des éléments en ligne. Ce que nous voyons, c'est la qualité des éléments en ligne.
Considérons une chaîne avec des caractères "A" de tailles différentes :
A A A A A A A
Nous voyons que toutes les lettres sont alignées verticalement avec la ligne du bas. Plus précisément, le long de la ligne de base, mais maintenant nous n'irons pas dans la nature. Donc, la même chose s'est produite avec nos blocs.
La propriété vertical-align est utilisée pour aligner le texte verticalement. Dans notre exemple n ° 3, nous utiliserions top , ce qui alignera la bordure supérieure de l'élément sur le haut de l'élément le plus haut de la ligne.
Pour l'instant, appliquez-le à une chaîne avec des caractères "A" de différentes tailles :
A A A A A A A
Il semble que les lettres « sautent » un peu. J'ai défini la bordure CSS sur la lettre la plus haute afin que vous puissiez voir qu'il n'y a en fait aucun saut, il y a un espace vide entre la bordure supérieure (qui est alignée) et le point supérieur du caractère "A".
La propriété vertical-align doit être appliquée à chaque élément en ligne, elle n'est pas héritée. Vous pouvez en savoir plus sur cette propriété : vertical-align .
Après cette digression, nous continuerons à placer les éléments de la liste horizontalement.
Deuxième voie
Vous pouvez placer des éléments de liste horizontalement à l'aide de la propriété float. Cette propriété spécifie de quel côté l'élément est aligné, a deux positions : left et right .
Voici un exemple utilisant ce code :
Lister horizontalement
Voici la sortie du code :
Figure 4. Exemple en cours d'exécution. L'exemple semble fonctionner. Mais il y a une nuance dans l'utilisation de cette propriété. Maintenant, nous allons l'examiner. Par exemple, prenons un code qui a deux listes horizontales avec d'une autre façon organiser les éléments horizontalement : afficher et flotter :
Lister horizontalement
Voici la sortie du code :
Figure 5. Exemple en cours d'exécution. Dans ces exemples, les conteneurs de liste
- avoir une bordure rouge de 1 pixel d'épaisseur. Mais top liste Un qui utilise la propriété display inclut les éléments de la liste. Mais les éléments de la liste créés à l'aide de la propriété float tombent hors de leur conteneur.
- encore situé à l'extérieur du conteneur
-
.
- Élément div de menu centré(rectangle bleu) est décalé vers la gauche, mais a une largeur de 100 %, il reste donc étiré pour s'adapter à 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 réduit à 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 se rétrécissent à la taille des liens qu'ils contiennent et s'alignent sur une ligne horizontale.
- A l'intérieur de chaque lien (rectangles oranges) le texte du signet est affiché : Signet 1, Signet 2, etc.
- Puisque l'élément ul sort partiellement de la fenêtre, cela conduit à l'affichage d'ascenseurs. Par conséquent, vous devez utiliser la règle overflow:hidden; pour l'élément div de menu centré. Ainsi, la partie saillante de l'élément div sera coupé.
- Puisque l'élément ul n'est pas aligné sur des tabulations, vous ne pouvez pas utiliser de styles visuels pour cela. Laissez l'élément ul sans couleur d'arrière-plan ni bordure pour le rendre complètement invisible. Et les styles pour les 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 onglet, vous devez ajouter une classe pour le premier et le dernier élément li afin que vous puissiez les coiffer individuellement.
Figure 7. Exemple en cours d'exécution. De plus, au travail, on ne sait pas toujours quel élément suivra l'élément utilisant float . L'idéal serait de fermer le travail de la propriété float dans le même bloc dans lequel il est ouvert.
Ceci est fait avec un pseudo élément. Voici le code :
Lister horizontalement
Nous avons maintenant un code fonctionnel à 100 %.
Figure 8. Exemple en cours d'exécution. Cette technique avec la propriété float est généralement utilisée lors de la mise en page des sites pour aligner les colonnes créées par les balises
. De cette façon, nous obtenons la construction normale des colonnes avec l'alignement en hauteur requis. Lorsque nous créons un menu, dans la plupart des cas, nous ne nous soucions pas de la hauteur des blocs, c'est presque toujours la même. Par conséquent, l'utilisation de la règle (display : inline-block ) dans ces cas est tout à fait justifiée.Mais dans un souci d'exhaustivité de la divulgation du sujet, nous nous sommes familiarisés ici avec tous options possibles. Bien qu'il puisse exister d'autres moyens, tels que l'utilisation de tableaux CSS, les moteurs de recherche recommandent fortement d'utiliser les tableaux uniquement dans le but pour lequel ils sont destinés, et non pour organiser des éléments de navigation ou autre.
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 à 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 cette leçon, nous allons analyser la méthode de centrage horizontal du menu, qui utilise uniquement la norme 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 du 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, dont des exemples sont donnés dans cette leçon, utilisent une structure simple. C'est juste une liste non ordonnée de liens enveloppés dans un élément. div.
Code CSS du menu centré
Vous trouverez ci-dessous le code CSS complet qui centre le menu. Et des explications sur le principe du travail sont données 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; background:#000; font-weight:gras; )
Comment fonctionne la méthode de centrage
L'action de la méthode est basée sur le positionnement relatif des éléments de bloc flottants les uns à l'intérieur des autres. Voyons d'abord comment la taille des éléments change lorsqu'ils sont décalés.
Élément div(bloc) sans décalage s'étend sur toute la largeur dont il dispose.
Mais si nous déplaçons l'élément div vers la gauche, il se réduira automatiquement à la taille de son contenu. La compression est point clé en cours de réalisation cette méthode centrage des menus. Cela aide à déplacer le menu à la bonne position.
Menu standard aligné à gauche
Prenons un menu standard aligné à gauche et reconcevons-le étape par étape. Pour plus de clarté, les points sont colorés en couleurs différentes, il est donc immédiatement clair ce qui est investi où.
Faites attention aux points suivants :
Décaler la position d'une liste non ordonnée
On déplace alors l'élément ulà droite de 50 % avec la position : propriété relative ; . Lorsqu'un élément est décalé d'un pourcentage dans ces conditions, il est important de se rappeler que la largeur totale des éléments qu'il contient n'est pas sa largeur. Dans notre cas, le décalage est de la moitié de la fenêtre du navigateur (ou de l'espace disponible pour l'affichage), ce qui fait que notre menu commence au milieu de la fenêtre et s'étend partiellement au-delà. Et nous passons à l'étape suivante.
Déplacer la position de tous les éléments de menu
Il ne reste plus qu'à déplacer tous les éléments li laissé de 50%. C'est 50% de la largeur de notre élément ul (le conteneur qui contient le menu). Ainsi, les onglets sont décalés exactement au centre de la fenêtre.
Quelques remarques importantes
Il y a quelques points importants à garder à l'esprit lors de l'utilisation de cette méthode de centrage :
Conclusion
La solution proposée est compatible avec tous les navigateurs, n'utilise pas JavaScript et prend en charge redimensionnable texte.
1. Menu jQuery dynamique vertical
2. Effet frais. Menu dansant.
4. Liste déroulante utilisant jQuery
Excellent style de l'élément d'interface sous la forme d'une liste déroulante.
Lorsque vous passez la souris sur le bouton, un panneau apparaît du haut.
6. Plugin jQuery "MobilyBlocks" pour afficher un menu circulaire
7. Menu utilisant des sprites
Menu javascript animé avec effet lumineux.
Menu jQuery frais et agréable.
9. Menu jQuery GarageDoor
10. Menu de défilement vertical jQuery
Mise en œuvre du menu avec grande quantité points. Défile lorsque vous déplacez le curseur de la souris vers le haut ou vers le bas.
11. Style de liste déroulante jQuery
12. Module de navigation de page
Défilement fluide jusqu'à la section souhaitée sur la page. Plug-in de navigation sur une page jQuery.
13. Plug-in de menu de contenu animé
Nouveau plug-in jQuery. Excellente mise en œuvre de la navigation animée sur le site. Lorsque vous naviguez dans les éléments du menu, un bloc apparaît avec une description et liens possibles, tandis qu'en fonction de l'élément sélectionné, l'arrière-plan de la page change, qui s'étire pour remplir tout l'écran, quelle que soit la taille de la fenêtre du navigateur. Assurez-vous de consulter la page de démonstration.
14. Plug-in jQuery Sweet Menu
Menu animé avec des éléments mobiles.
15. Menu jQuery fixe
Lors du défilement vers le bas de la page, le menu reste fixe en haut de l'écran.
16. Menus défilants du kit de curseur
Pour implémenter un menu vertical avec un grand nombre d'éléments. Les éléments peuvent être défilés à l'aide de la molette de la souris ou à l'aide des liens "Previos" et "Next".
17. Menu CSS3 élégant
18. Nouveau menu CSS3 de style Apple
Nouveau menu dans À la pomme. Il a l'air plus sombre qu'avant, mais pas moins joli.
19. Menu jQuery d'origine
Menu déroulant avec effet de fond. Les sous-éléments du menu se développent vers le haut. Lorsque vous survolez un élément de menu, l'image d'arrière-plan change.
20. Menu jQuery animé
Menu animé. Les éléments de menu sont présentés sous forme d'icônes et de descriptions. de superbes effets lorsque vous passez la souris sur un élément de menu. Il y a 8 effets fournis, pour les voir tous, suivez les liens Exemple1-Exemple8 sur la page de démonstration.
21. "Menu déroulant" Menu déroulant XML
Menus à défilement vertical et horizontal. Bonne décisionà en grand nombreéléments du menu.
22. Menu contextuel sur le site jQuery
Le menu apparaît au clic clic-droit passez la souris sur une certaine zone.
23. Menu circulaire à deux niveaux pour le site
Lorsqu'un élément de menu est sélectionné, les éléments du sous-menu s'affichent à droite.
24. Menu jQuery CSS3 avec effet de flou "Menu Blur" CSS3
Le menu jQuery CSS3 d'origine se décline en 7 styles différents. Lorsque vous déplacez le curseur de la souris sur l'un des éléments du menu, le reste semble flou.
25. Quelques menus animés spectaculaires jQuery CSS3
10 menus animés créatifs. Menus CSS3 horizontaux et verticaux avec divers effets et transitions.
L'archive contient également l'original Fichier PSD menu.
27. Menu Ligne Magique
L'arrière-plan ou le soulignement de l'élément de menu suit la souris avec un léger retard, tandis que l'arrière-plan change de couleur en douceur lorsque vous vous déplacez d'un élément à l'autre. Très bel effet, semble inhabituel. Attention : l'effet ne fonctionne pas dans l'opéra
28 bulles d'images
Grand effet lorsque vous passez la souris sur l'une des images. L'effet rappelle quelque peu jQDock, décrit ci-dessus.
31. Menus jQuery intéressants avec différents effets
horizontal, menu vertical. Effets intéressants.
32. Grand menu jQuery dans le style d'Apple
34. Menu jQuery avec effet intéressant
36. Menu frais avec effet jQuery intéressant
Un effet très intéressant. Parfait pour les sites Web de portefeuille.
Un effet intéressant des vignettes contextuelles au survol.
40. Liste déroulante avec défilement automatique
Bel effet de transition entre les éléments.
42. Grand menu jQuery
43. Joli grand menu jQuery
44. Menus défilants jQuery
Les éléments de menu sont affichés sous forme de vignettes.
46. Menu de navigation radiale jQuery
47. Menus CSS et jQuery
Une barre de navigation avec un champ de recherche qui devient translucide lorsque vous faites défiler la page.
48. Menu jQuery horizontal
49. Menu jQuery vertical
Excellent menu vertical. Au survol, un élément de menu apparaît.
50. Menu jQuery horizontal
Effet intéressant lors du survol d'un élément de menu.
52. Menu déroulant jQuery
Lorsque vous déplacez le curseur de la souris sur le menu, ses éléments apparaissent. Les éléments qui apparaissent sont affichés sous la forme d'un arc dont vous pouvez définir le rayon lors de la configuration du plugin. Dans certains navigateurs, vous ne verrez pas l'affichage dans un arc, le menu s'affichera droit, mais il ne gâchera toujours pas impression généraleà partir de cette implémentation de menu jQuery.
53. Barre de navigation CSS et jQuery
Un effet intéressant lorsque vous passez la souris sur un élément de menu.
54. Panneau contextuel jQuery
Menu animé frais dans les tons gris.
58. Navigation de site en colonne avec jQuery
Une solution intéressante pour la navigation, qui se présente sous la forme Rayures verticales. Lorsque vous passez votre souris sur ces barres, une image de l'élément et une liste de sous-menus apparaissent. Lorsque vous cliquez sur un élément de sous-menu, une page avec une description apparaît. Cette implémentation est parfaite pour les sites promotionnels ou les présentations. Assurez-vous de consulter la démo du plugin.
59. Navigation sur le site jQuery
La navigation sur le site se présente sous la forme de 4 images, au survol desquelles vous remarquerez un effet animé intéressant.
60. La barre de navigation défile avec le contenu
Barre de navigation. Cliquer sur la flèche fait défiler la page. La navigation défile avec le contenu de la page.
61. Panneau jQuery avec divers services sociaux
62. Menu jQuery animé soigné
63. Menu pinceau aquarelle jQuery
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, navigateurs modernes de plus en plus prennent en charge ces mêmes fonctionnalités, il sera donc bientôt possible de parler de la prise en charge complète de cette technologie, bien que ce ne soit pas quelque chose d'unifié, c'est plutôt un ensemble de nouvelles fonctionnalités, chacune étant 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 utilisé pour cela liste à puces, qui a été placé 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 un Couleur de l'arrière plan, créez des séparateurs et ajoutez des retraits (ou déterminez la taille de chaque élément de menu), cela ne fonctionnera pas avec la chaîne.
Ici, nous devons convertir nos points 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 désormais leur postuler les bonnes règles motif. 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é
Bonjour chers visiteurs de mon blog ! Aujourd'hui, nous allons parler du menu horizontal principal du site, à savoir comment aligner menu horizontal dans le centre. Oui, à première vue, ce qui est si difficile ici - j'ai défini les retraits nécessaires, je l'ai ajusté et c'est tout. Mais il y a quelques nuances ici. Le site, tout d'abord, est dynamique, c'est-à-dire de nouveaux contenus apparaissent constamment sur le site, de nouveaux blocs avec des informations apparaissent, etc. Ainsi, certains éléments du menu principal peuvent apparaître/disparaître. Dans cet esprit, tout ce que vous avez à faire est de vous assurer que lorsque vous ajoutez ou supprimez un élément de menu, le menu reste également au centre. Bien sûr, il n'est pas toujours nécessaire de le centrer, tout dépend du design. Mais si vous voulez toujours mettre le menu horizontal au centre, alors en appliquant quelques astuces simples en css, nous pouvons obtenir le résultat souhaité.
Structure des articles
Menu horizontal au centre sans éléments déroulants
Examinons d'abord l'exemple d'un menu horizontal qui n'a pas d'éléments déroulants.
Code HTML
code css
*, *::after, *::before ( -webkit-box-sizing : border-box ; -moz-box-sizing : border-box ; -o-box-sizing : border-box ; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 ) #mainmenu ul ( style de liste : aucun ; marge : 0 ; rembourrage : 0 ; position : relative ; gauche : 50 % ; flottant : gauche ; police : 14px Arial, Helvetica, sans-serif ; hauteur : 40px ) #mainmenu ul li ( position : relatif ; gauche : -50 % ; flottant : gauche ; marge : 0 10px ; hauteur : 40px ) hauteur : 40px; ) #mainmenu ul li a:hover ( background-color: #666; )Prenons tout dans l'ordre, tout est simple ici. Nous créons un conteneur "mainmenu" où nous mettons notre menu sous forme de liste non ordonnée.
Maintenant c'est fini style css. Tout d'abord, nous réinitialisons toutes les marges et le rembourrage à zéro pour tous les navigateurs. Ensuite, en utilisant la propriété "float:left", nous déplaçons notre liste non ordonnée vers la gauche, puis le positionnement relatif la décale 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 ira à droite de la ligne de séparation. Pour aligner, nous appliquerons également aux éléments "li" positionnement relatif et décalez-les vers la gauche de 50%, en spécifiant la propriété "gauche : -50%". Et pourtant, j'ai failli oublier, notre conteneur "mainmenu" doit spécifier la propriété "débordement caché", sinon on obtient bande horizontale faire défiler.
Ça y est, notre menu est maintenant centré. 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 des éléments déroulants
Examinons maintenant les sous-éléments déroulants. Ici, la situation est un peu différente et un peu plus compliquée, car dans le premier cas, nous n'aurons pas de sous-éléments supprimés, 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 y a une issue.
J'ai donc modifié le code précédent et supprimé la propriété "overflow:hidden".
Code HTML
Code CSS
*, *::after, *::before ( -webkit-box-sizing : border-box ; -moz-box-sizing : border-box ; -o-box-sizing : border-box ; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: gauche ; largeur : 100 % ; z-index : 10 , sans-serif ; style de liste : aucun ; rembourrage : 0 ; marge : 0 ) /** Points principaux **/ #mainmenu > ul > li ( position : relative ; gauche : 50 % ; float : gauche ; hauteur : 40 px ; rembourrage : 0 ; marge : 0 : 40px; ) #mainmenu > ul > li:first-child > a ( border: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li. active > a ( color: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.ho ver, #mainmenu > ul > li.active ( background: #666 ) /* Liste déroulante des sous-éléments */ #mainmenu ul li ul ( position : absolu ; gauche : 0 ; haut : 40px ; affichage : aucun ; style de liste : aucun ; visibilité : masquée ; rembourrage : 0 ; marge : 0 ; width: 200px ) #mainmenu > ul > li ul li ( background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: gauche ; ) #mainmenu ul li ul li a ( border-bottom : 1px solide #999 ; affichage : bloc ; couleur : #fff ; rembourrage : 10px 15px ; texte-décoration : 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 ; content : "" ; display : block ; position : absolu ; droite : 15 px ; haut : 50 % ; transformation : translateY(-50 %) rotation (45 degrés) ; hauteur : 6 px ; largeur : 6 px ; ) #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 ) /* Éléments déroulants de deuxième niveau */ #mainmenu ul li:hover > ul ( opacity: 1; visibilité : visible; margin: 0; ) #mainmenu ul li ul li ul ( top: 0; left: 200px; margin: 0 0 0 20px; width: 180px )Nous avons maintenant le menu défini au centre et les sous-éléments disparaissent au survol.
Menu d'alignement central avec flexbox
Menu Aligner au centre vous pouvez également appliquer une nouvelle règle en css - flexbox. En général, je veux consacrer un article séparé aux astuces avec flexbox, ça vaut le coup, ça simplifie grandement la vie du codeur. En général, nous n'irons pas en profondeur ici ... je ne donnerai ici que code css pour les menus 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-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; ) #mainmenu ( position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100 % ; z-index : 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit- box-direction : normal ; -webkit-flex-direction : ligne ; -ms-flex-direction : ligne ; flex-direction : ligne ; hauteur : 40 px ; text-align : centre ; police : 15 px Arial, Helvetica, sans-serif ; style de liste : aucun ; rembourrage : 0 ; marge : 0 ; -webkit-box-pack : centre ; -webkit-justify-content : centre ; -ms-flex-pack : centre ; justification-contenu : centre ; ) / ** Points principaux **/ #mainmenu > ul > li ( position: relative; height: 40px; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( border-left: 1px solid #666; display: bloc;couleur : #fff ; décoration de texte : aucune ; rembourrage : 020px ; hauteur de ligne : 40px ) #mainmenu > ul > li:first-child > a ( border: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( color: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Liste déroulante des sous-éléments */ #mainmenu ul li ul ( position : absolue ; gauche : 0 ; haut : 40 pixels ; affichage : aucun ; style de liste : aucun ; visibilité : masqué ; rembourrage : 0 ; marge : 0 ; largeur : 200 pixels ) #mainmenu > ul > li ul li ( background- color : #666 ; position : relative ; left : 0 ; display : list-item ; float : none ; height : auto ; margin : 0 ; text-align : left ; ) #mainmenu ul li ul li a ( border-bottom : 1px solide #999 ; affichage : bloc ; couleur : #fff ; rembourrage : 10px 15px ; texte-décoration : 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 ; content : " ; affichage : bloc ; position : absolue ; droite : 15px ; haut : 50 % ; t transformation : translateY(-50 %) rotate(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 ) /* Liste déroulante éléments second 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 voir, les règles n'ont changé que pour la liste des parents - #mainmenu ul. La seule chose était d'ajouter des préfixes pour Versions précédentes 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 être reportée. Vous pouvez voir quels navigateurs comprennent bien flexbox
En même temps, à première vue, tout fonctionne. Mais échangeons nos listes. Mettons la liste avec la classe menu-1 dans le code avant la liste avec la classe menu-2 (maintenant elle est plus basse).
Voici ce que nous obtenons comme résultat :
Figure 6. Exemple en cours d'exécution. Les éléments du menu inférieur s'enroulent également autour du menu supérieur, car personne n'a annulé l'action de la propriété float et celle-ci s'applique à tous les éléments suivants.
Comment résoudre ce problème?
Pour ce faire, vous devez utiliser la propriété clear, elle annule l'élément d'habillage d'un autre élément s'il a la propriété float définie.
Voici un exemple modifié utilisant la propriété clear :
Lister horizontalement
On peut voir que la liste inférieure ne s'enroule plus autour de la liste supérieure, les éléments ne se chevauchent pas. Mais dans la première liste de balises
- est également un élément de bloc.