Tâche
Créez un menu déroulant à l'aide des outils CSS et HTML.
Solution
Tout d'abord, créons une liste, plaçons-la horizontalement et stylisons-la apparence. Ce sera le menu principal, puis nous créerons un menu déroulant pour ses éléments.
Nous nous sommes retrouvés avec une liste comme celle-ci :
Figure 1. Travaux préparatoires.
Attention : le style du lien change lorsque vous le survolez. Ceci est implémenté en utilisant la pseudo-classe :hover. Cette pseudo-classe spécifie le style d'un élément lorsque le curseur est survolé sans que le bouton de la souris soit enfoncé. S'il y a une pression sur un bouton, c'est une autre pseudo-classe.
Passons maintenant à la résolution de notre problème. Créons un menu déroulant pour l'élément « Services », ajoutons des sections déroulantes : « Acheter », « Vendre », « Échanger ». Ces éléments constituent une liste distincte imbriquée dans une balise
Créons cette liste et ajoutons des styles qui décrivent son apparence.
Nous avons maintenant cette liste :
Figure 2. Travaux préparatoires. Bien sûr, ce n’est pas ce dont nous avons besoin. Par défaut, cette liste doit être masquée et devenir visible uniquement au survol de la souris. Vous pouvez masquer un élément à l'aide de la règle règle (affichage : none ). Et lorsque vous survolez le curseur, vous devez l'activer en rendant à nouveau visibles les règles (affichage : inline-block).
Maintenant, notre menu disparaît et apparaît, mais nous avons besoin qu'il apparaisse au-dessus des éléments existants sans modifier celui déjà existant. limites établies blocs existants.
Pour qu'un élément soit affiché sans affecter l'affichage des autres éléments, il doit être positionné avec une valeur absolue .
Ce que nous avons fait ici :
- règle de positionnement (position : relative ;). Ceci est fait pour que le rapport des coordonnées de positionnement absolues de la liste imbriquée commence à partir du coin supérieur gauche de ce bloc, et non du coin de l'écran.
- Ajouté à l'élément parent
- règle (hauteur : 20px ;). Nous définissons sa hauteur pour faciliter le positionnement de la liste déroulante.
- installée positionnement absolu(position : absolue ;) dans la liste déroulante et définissez les coordonnées sur : top et left .
Le menu déroulant fonctionne désormais correctement.
Figure 3. Version finale. Bien sûr, ici, vous pouvez embellir le menu déroulant, mais pour les besoins de notre tâche, cela suffit.
Le problème éducatif est résolu. Au revoir.
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 en utilisant 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 à côté de cela, la navigation verticale se retrouve très souvent sur les sites Web et elle peut aussi être déroulante. En fait, changer le menu d'horizontal à vertical est très simple ; il suffit de changer quelques lignes de code.
Tout d’abord, vous devrez supprimer le float:left des éléments de la liste principale. C'est cette propriété qui garantit que nos éléments sont affichés sur une seule ligne, mais pourquoi en avons-nous besoin si la navigation doit être verticale ?
Il ne reste plus qu'à modifier les règles du sélecteur #nav li .second, c'est-à-dire pour les listes imbriquées, à savoir qu'elles doivent être positionnées un peu différemment. Comme ça:
#nav li .second( affichage : aucun ; position : absolue ; gauche : 100 % ; haut : 0 ; )
#nav li .seconde( affichage : aucun ; position : absolue ; gauche : 100 % ; haut : 0 ; |
Autrement dit, il est nécessaire d'enregistrer deux coordonnées au lieu d'une. Premièrement, dans le cas de la navigation horizontale, j'ai dit que, comme prévu, les éléments de sous-menu devaient être affichés sous les éléments principaux. 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.
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 vers des pages internes du 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 d'un menu vertical consiste à créer 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 la souris sur un élément de menu, son apparence peut changer, attirant 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.
Menu horizontal peut être créé en stylisant une liste régulière. 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 "
Commençons maintenant à écrire du code CSS. 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; )
De l'auteur : Je vous souhaite la bienvenue sur notre blog sur la création de sites Web. Il s'agit d'une série d'articles dédiés à la nouvelle spécification et aujourd'hui je voudrais vous expliquer comment créer un menu en html5 et en quoi ce processus diffère du même en Versions précédentes langue.
Quelles sont les différences
Tout d'abord, je voudrais dire que la spécification n'est pas si nouvelle - elle a commencé son développement en 2009. En fait, depuis lors, il y a eu un développement constant - de nouvelles opportunités apparaissent dans HTML5, navigateurs modernes de plus en plus de support pour ces mêmes capacités, de sorte qu'il sera bientôt possible de parler de support complet pour cette technologie, même s'il ne s'agit pas d'un tout, il s'agit plutôt d'un ensemble de nouvelles capacités, chacune étant indépendante.
Bon, d'accord, mais qu'est-ce qui est différent dans la création de la navigation principale (menu), puisque vous lisez un article sur ce sujet, alors il devrait certainement y avoir quelques différences. Eh bien, comment le menu était-il créé auparavant ? En règle générale, une liste à puces était utilisée pour cela, qui était placée dans un conteneur supplémentaire pour toute navigation - un div ordinaire.
Ainsi, avec l'avènement de nouvelles balises, vous pouvez désormais faire quelque chose de plus correct - au lieu d'une balise div, enveloppez le menu dans nav - un nouvel élément sémantique créé spécifiquement pour collecter les liens les plus importants et les regrouper.
Vous pouvez mettre soit une liste, soit simplement un ensemble de liens dans la navigation. Il me semble que c'est une solution encore plus simple et correcte, même si dans de nombreux modèles, vous pouvez toujours voir l'implémentation du menu à l'aide des balises ul, li, a.
Fait intéressant, le conteneur de navigation a été créé spécifiquement pour les liens prioritaires sur la page. En fait, il peut y avoir plusieurs conteneurs de ce type sur une page, mais vous ne devez y placer que les liens qui forment réellement la navigation principale (par exemple, le menu principal supérieur et sa copie dans le pied de page).
Comment créer un menu horizontal en utilisant HTML5
Vous n’avez même pas besoin de cadrage dans la liste : tout sera initialement affiché sur une seule ligne, puisque les liens sont des éléments en ligne.
Une autre chose est qu'ils sont très limités dans leur conception en raison de leurs propriétés en ligne. Vous ne pourrez opérer qu'avec des propriétés telles que : la couleur, la taille de la police, les marges. Si vous souhaitez définir une couleur d'arrière-plan spécifique, créer des séparateurs et ajouter un remplissage (ou déterminer la taille de chaque élément de menu), vous ne pourrez pas le faire avec une ligne.
Ici, nous devrons convertir nos éléments en éléments de bloc. Pour ce faire, ils doivent écrire la propriété :
bloc de visualisation; |
Maintenant, ils vont de haut en bas, c'est-à-dire que notre navigation est devenue verticale. Pour le remettre en horizontal, vous devez ajouter certaines propriétés. Par exemple, au lieu d'un type de bloc, définissez-leur un type de ligne de bloc ou attribuez-leur (float: left). En savoir plus sur ces méthodes.
Navigation verticale
Habituellement à faire menu vertical en html5, ils utilisent une liste, mais le balisage que je vous ai donné ci-dessus nous convient également. Comme vous l'avez vu, si vous convertissez des liens en liens de bloc, ils s'aligneront automatiquement l'un après l'autre de haut en bas, car deux blocs ne peuvent pas être sur la même ligne.
Vous pouvez désormais postuler auprès d'eux règles nécessaires inscription Les blocs ont beaucoup plus de propriétés qu'un élément en ligne, vous disposez donc de beaucoup plus d'options. Par exemple, j'ai ajouté ceci :
a( décoration de texte : aucune ; couleur : #fff ; remplissage : 5px ; taille de police : 22px ; affichage : bloc ; arrière-plan : dégradé linéaire (à droite, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100 %); largeur : 200 px ; alignement du texte : centre)
texte - décoration : aucun ; couleur : #fff; remplissage : 5 px ; taille de police : 22 px ; bloc de visualisation; arrière-plan : linéaire - dégradé (à droite, rgba (96, 108, 136, 1) 0 %, rgba (63, 76, 107, 1) 100 %) ; largeur : 200 px ; texte - aligner : centrer |
Tâche
Créez un menu horizontal dont les éléments 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é est également appliquée 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 .