Share
Il n'y a pas de meilleur moyen d'apprendre le CSS3 que de se mettre la main dans le sac sur un projet réel et c'est exactement ce que nous allons faire. Je vais vous apprendre à créer un menu de menu CSS3 superposé et superposé à l’aide de quelques techniques CSS novices à avancées. Alors sortez votre éditeur de texte préféré ou votre IDE et commençons avec de la magie CSS3!
Aujourd'hui, vous apprendrez à créer la larme de canne à sucre à partir des nombreux styles et variations de couleur disponibles. Vous recevrez toutes les variantes dans les fichiers source. De plus, en prime, j'ai ajouté un peu de Javascript en option afin que vous puissiez faire pivoter vos images en fonction de l'élément de menu survolé. Le fichier source vient même avec sa propre documentation!
Remarque: le support pour IE est limité pour le moment. Nous allons surtout passer par là pour pousser plus loin l'enveloppe avec ce que nous pouvons faire en CSS3? mais comme pour tout ce qui est à la limite de la pratique, cela signifie sacrifier un peu de stabilité. Nous aborderons le sujet IE à la fin du tutoriel bien que!
Nous proposons aujourd'hui ce didacticiel dans deux formats différents: une vidéo ainsi qu'un didacticiel complet écrit ci-dessous. Suivez la méthode d'apprentissage que vous préférez (ou les deux!) Et vous arriverez à la fin en un rien de temps!
Le tutoriel écrit pas à pas est présenté ci-dessous. Assurez-vous également de télécharger l'intégralité de la source téléchargeable.!
La première chose à faire est de créer des couches qui se chevauchent et restent en place tout en utilisant le moins de code possible. Il est important de ne pas remplir votre code avec trop de ballonnement et de ne pas créer beaucoup de
des flotteurs inutiles ou des éléments de positionnement absolus, nous allons donc essayer de rester relatifs autant que possible.
Comme vous pouvez le constater, le code est assez simple. Nous avons essentiellement empilé une couche sur une autre et ainsi ils pourront tenir leurs positions.
Ensuite, nous voulons ajouter une image au centre de la roue, ou une larme dans ce cas. Pour ce faire, nous ajouterons simplement le code suivant entre les classes wrap4 et completer. Cela verrouille l'image au centre de la toile. Nous allons simplement utiliser une image Rockable pour celui-ci parce qu'ils sont géniaux!
Accentsconagua
Maintenant, nous voudrons ajouter du style à chaque calque un par un.
Ce sera le conteneur principal pour votre menu de roue. Il contient également toutes les polices universelles et tailles de polices affectant tout ce qui se trouve à l'intérieur du div..
# menu-wrap background: # e7e7e7; / * Ceci n'est pas nécessaire * / height: 600px; / * Cela est important et permet de garder la roue en place lorsque vous survolez des éléments * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Si vous n'utilisez pas Franklin, il passera automatiquement à la police suivante de la famille * / font-size: 14px; / * Établit la taille de la police globale * / letter-spacing: 1px! Important; / * Espacement des effets entre les lettres pour toutes les polices de la roue * /
Nous allons continuer et nous assurer que notre image centrale est stylée correctement en la plaçant au centre de la roue à l'aide de marges, en lui ajoutant des dimensions et une bordure..
# menu-wrap .orbit height: 210px; marge: 32px; / * Déplace les images à l'écran vers le centre * / position: absolute; largeur: 210px; # menu-wrap .orbit-frame border: 2px solid # 999; / * Crée une division entre l'image et wrap5 * /
Tous les wrappers: nous voudrons créer des styles qui s’appliqueront à tous les wrappers principaux en ajoutant un rayon de bordure universel, en les plaçant tous au centre, en ajoutant une position relative de sorte que tout reste contenu et en les abaissant de manière à obtenir une couche uniforme. effet.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder / * style tous les conteneurs de roue * / -moz-border-radius: 220px 0 200px 220px; / * firefox * / -webkit-border-radius: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * opera * / margin: 0 auto; / * centre toutes les enveloppes les unes par rapport aux autres * / position: relative! important; / * Ne touchez que si vous savez ce que vous faites * / top: 20px;
C'est votre couche la plus importante derrière tous les autres. Nous allons créer un fond rouge dégradé et utiliser un repli rouge uni pour les ventilateurs plus âgés. Nous utiliserons également CSSpie pour indiquer à IE que l’utilisation de ces styles est acceptable. Après cela, il ne reste plus qu’à ajouter une largeur et une hauteur et vous avez terminé. Vous voulez vous assurer que la largeur et la hauteur sont plus grandes que toutes les autres couches afin qu'elles soient visibles derrière elles.
.wrap1 background: # FF0000; / * anciens navigateurs * / background: -moz-linear-gradient (haut, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (linéaire, gauche haut, bas gauche, couleur-stop (0%, # FF0000), couleur-stop (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * c.-à-d. * / arrière-plan: gradient linéaire (haut, # FF0000 0%, # 990000 100%); / * futurs navigateurs CSS3 * / -pie-background: linear-gradient (top, # FF0000 0%, # 990000 100%); / * Correction d'IE à l'aide de Pie * / height: 394px; largeur: 394px;
Maintenant, pour wrap 2, nous allons faire exactement la même chose, mais nous allons utiliser des variations de blanc comme dégradé et ajouter une ombre de boîte extérieure et intérieure pour créer un léger effet de biseau plus l'ombre de fond. Ensuite, nous devons réduire la largeur et la hauteur d’environ 40 pixels par rapport au calque principal pour le rendre agréable et homogène..
.wrap2 background: #FFFFFF; / * anciens navigateurs * / fond: -moz-linear-gradient (en haut, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / background: -webkit-gradient (linéaire, gauche-supérieur, gauche-inférieur, couleur-stop (0%, # FFFFFF), couleur-stop (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * c.-à-d. * / arrière-plan: gradient linéaire (haut, #FFFFFF 0%, # DCBE8F 100%); / * futurs navigateurs CSS3 * / -pie-background: linear-gradient (top, #FFFFFF 0%, # DCBE8F 100%); / * Correction d'IE à l'aide de Pie * / height: 354px; largeur: 354px; -moz-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inset; -webkit-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) inset; box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0,6), 0 -30px 46px -1px rgba (0, 0, 0, 0,65) encart;
Nous allons maintenant répéter le processus pour tous les autres wrappers en utilisant différents dégradés de couleurs et en rendant chaque calque 40px plus petit que le dernier..
.wrap3 background: # FF0000; / * anciens navigateurs * / background: -moz-linear-gradient (haut, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (linéaire, gauche haut, bas gauche, couleur-stop (0%, # FF0000), couleur-stop (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * c.-à-d. * / arrière-plan: gradient linéaire (haut, # FF0000 0%, # 990000 100%); / * futurs navigateurs CSS3 * / -pie-background: linear-gradient (top, # FF0000 0%, # 990000 100%); / * Correction d'IE à l'aide de Pie * / height: 314px; largeur: 314px; .wrap4 border: 2px solid # FF0000; arrière-plan: # 990000; / * anciens navigateurs * / background: -moz-linear-gradient (en haut, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / background: -webkit-gradient (linéaire, gauche-haut, gauche-bas, couleur-stop (0%, # 990000), couleur-stop (55%, # CC0000), couleur-stop (57%, # FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * ie * / background: linear-gradient (haut, # 990000 0%, # CC0000 55%, # FF0000 57%); / * futurs navigateurs CSS3 * / -pie-background: linear-gradient (top, # 990000 0%, # CC0000 55%, # FF0000 57%); / * Correctif IE avec Pie * / -moz-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) encart, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) inséré; -webkit-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) encart, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) en médaillon; box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) encart, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) inset ; hauteur: 274px; largeur: 274px;
Nous pouvons maintenant styler wrap5 et le support de navigation qui tiendra tous les éléments de menu en place et pour le style candycane, nous le noircirons pour ajouter un joli contraste neutre tandis que wrap5 sera blanc et servira de conteneur pour le image centrale. Ce que nous faisons ici, c'est couper l'arrière-plan afin que vous puissiez voir à travers wrap5 et le support de navigation, en faisant apparaître les autres calques derrière celui-ci ainsi que l'image centrale. Après l'avoir rendu transparent, nous ajouterons une bordure noire au support de navigation et une bordure blanche pour envelopper 5. La bordure du support de navigation doit être masquée du côté droit (pour les sous-menus), doublée du côté gauche (pour les menus principaux) et solide pour le reste, créant un effet simple et agréable tout en minimisant le nombre de couches que nous avons. ajouter. Traditionnellement, avec cet effet, vous pouvez ajouter jusqu'à 5 ou 6 nouvelles couches, cela économise beaucoup de code..
Cette fois, la largeur et la hauteur de wrap5 seront 60px moins que les autres calques pour le rendre agréable et même encore. Une autre poussée de 10px en haut aidera à aligner le calque et une ombre intérieure nous donnera une belle perspective de la distance entre wrap5 et l’image centrale..
Ajouter un sommet de 0 au support de navigation alignera automatiquement les calques avec les autres. Nous utiliserons également une marge négative pour un alignement supplémentaire en haut à gauche et créerons une hauteur / largeur proportionnelle pour l'adapter parfaitement aux autres calques..
.wrap5 -moz-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) inséré, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); -webkit-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) en médaillon, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); boîte-ombre: 9px 9px 5px 0 rgba (0, 0, 0, 0,75) en médaillon, 5px 5px 5px 0 rgba (0, 0, 0, 0,75); bordure: solide 20 px #FFF; / * crée le wrap pour voir l'image derrière elle * / height: 214px; en haut: 10 px; / * centre l'élément * / width: 214px; .nav-holder background: aucune répétition scroll 0 0 transparent; couleur de bordure: # 121212; / *** Les déclarations de bordure sont utilisées pour créer le wrapper final, le moyen au milieu et masquer la bordure de droite pour afficher les sous-menus * / border-style: solid hidden solid double; largeur de bordure: 73px moyen, 73px, 73px; hauteur: 252px; marge: -92px; / * centre l'objet sur des éléments relatifs * / top: 0; largeur: 324px;
"La bordure du support de navigation doit être masquée du côté droit (pour les sous-menus), doublée du côté gauche (pour les menus principaux) et solide pour le reste, créant un effet simple et agréable tout en minimisant le nombre de faut ajouter. "
Eh bien c'était assez facile. Donc, après avoir terminé tout cela, j'espère que vous avez déjà appris quelque chose de nouveau à ajouter à votre ensemble de compétences. Cependant, voici à quoi devrait ressembler votre création. Si cela ne ressemble pas à ceci, veuillez relire le code et voir si vous avez peut-être oublié quelque chose? ne vous inquiétez pas, c'est probablement quelque chose de très mineur.
Les finisseurs: Hmm? cela vous semble-t-il incomplet? Nous devons compléter le tout avec quelques couches que j'ai appelées finisseurs afin de pouvoir masquer des parties de l'image centrale et rapprocher davantage le détenteur de navigation des autres calques en créant un bel effet arrondi et en le fermant..
Faire ce que je viens de mentionner est assez simple. Nous pouvons faire en sorte que le style s’applique aux deux finissants pour moins de code. Ajoutons un rayon de bordure sur un côté pour créer une belle courbe, puis nous utiliserons transform pour aligner le compléteur entre wrap1 et wrap5. L'ajout de notre couleur de fond est très important ou rien ne se présentera. Nous devons positionner cette couche de manière absolue et la déplacer vers le haut et la droite pour l'aligner parfaitement.
.completer1 n'aura aucun affichage pour ce style en forme de goutte. Sur d’autres styles tels que la molette, nous avons supprimé cette partie pour qu’elle affiche.
.completer2 a un peu plus de rotation et nous devons le pousser un peu pour le faire rentrer.
.completer, .completer2 / ** éléments absolus pour masquer la bordure des images ** / -moz-border-radius: 0 120px 0 113px; / * firefox * / -webkit-border-radius: 0 120 pixels 0 113 pixels; / * webkit * / border-radius: 0 120px 0 113px; / * opera * / -moz-transform: rotation (-20deg); / * firefox * / -webkit-transform: rotation (-21deg); / * webkit * / / -o-transform: rotation (-20deg); / * opera * / -ms-transform: rotation (-20deg); / * ie9 et versions futures * / transform: rotate (-20deg); / * anciens navigateurs * / background-color: # 121212; image de fond: aucune; position de fond: 0 0; répéter en arrière-plan: répéter; hauteur: 135px; position: absolue; à droite: -24px; en haut: -56px; largeur: 130px; .completer display: none; .completer2 -moz-transform: rotation (110deg); / * firefox * / -webkit-transform: rotation (111deg); / * webkit * / / -o-transform: rotation (110deg); / * opera * / -ms-transform: rotation (110deg); / * ie9 et les versions futures * / transform: rotate (110deg); / * anciens navigateurs * / top: 195px;
Après avoir ajouté les finissants, vous devriez avoir quelque chose comme ça? Encore une fois si vous n'avez pas la même chose que ce que vous voyez ici, vérifiez votre code et voyez ce que vous avez manqué.
Nous avons maintenant un grand nombre de couches sur lesquelles travailler. Ils sont tous bien contenus et ont des effets CSS3 lisses alors passons à autre chose et faisons fonctionner ce bébé!
Maintenant, nous voulons ajouter des liens de navigation qui se ressemblent derrière différentes couches. Sur le côté gauche (dans la double bordure), nous voulons les éléments du menu principal et sur le côté droit (dans l'espace ouvert), les éléments du sous-menu apparaissent après le survol d'un élément principal. Vous serez surpris de voir à quel point cela est facile à accomplir, alors creusons.
Il y a un bloc de survol pour garder les menus actifs lorsque vous passez sur la molette avec votre souris et nous voulons nous assurer que cela couvre la totalité de la molette. Ainsi, par souci de compatibilité avec IE, nous ajouterons un arrière-plan avec une opacité de 0.01 sinon IE a gagné 'reconnais pas que l'élément est même là.
En utilisant margin-left: 76px, vous avez suffisamment d’espace pour survoler le menu principal et le sous-menu, ainsi que pour traverser le volant sans rien perdre de son apparence..
ul.menuBuild, ul.menuBuild ul width: 80px; / * définit la taille des blocs de menu * / background: rgb (0, 0, 0); / * RGBa avec une opacité de 0,01 * / fond: rgba (0, 0, 0, 0,01); / * - un bg-color DOIT être inclus pour que IE fonctionne correctement! * / padding-left: 0px; / * arrête le retrait habituel de ul * / margin-left: 76px; / * Le modèle de marge et de boîte de marge d'Opera 7 final pose des problèmes * /
Maintenant, nous voulons supprimer les points de balle de chaque élément de menu ou [li]. Nous voulons également nous assurer qu'ils sont relatifs au détenteur du droit de navigation.
Vous pouvez ajouter un rayon de bordure pour un style supplémentaire. Nous allons donner à l'arrière-plan une couleur unie et déplacer les éléments de menu vers la gauche de manière à ce qu'ils ne touchent presque pas les bords du support de navigation.
Le rembourrage, l'indentation du texte et la couleur sont destinés à un style supplémentaire et ne sont pas nécessaires au fonctionnement du menu..
ul.menuBuild li list-style-type: none; / * supprime les puces * / position: relative; -webkit-border-radius: 0px 20px 20px 0px; / * navigateurs webkit * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * opera * / background: aucune répétition faire défiler 0 0 # 464646; hauteur: 14px; à gauche: -177px; rembourrage: 8px; marge: 6px 0 0; largeur: 140px; retrait du texte: 5px; / * Distance du texte par rapport au bord gauche du menu * / color: #fff; / * définit la couleur de police par défaut en blanc * /
Ajoutons maintenant un peu de dégradé dans les sous-menus et poussez-le vers la droite pour déplacer le premier élément de sous-menu à peine au bord de wrap5..
L'ajout d'une zone d'ombre nous aidera à créer l'effet des éléments de sous-menu se trouvant sous leurs calques respectifs..
ul.menuBuild ul.submenu li background: # f2f2f2; / * anciens navigateurs * / arrière-plan: -moz-linear-gradient (gauche, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / background: -webkit-gradient (linéaire, haut à gauche, haut à droite, couleur-stop (0%, # 565656), couleur-stop (3%, # 666), couleur-stop (14%, # FFF)); / * webkit * / background: url (bg-image.png) pas de répétition, dégradé linéaire (gauche, # 565656 0%, # 666 3%, #FFF 14%); / * futurs navigateurs CSS3 * / -pie-background: url (bg-image.png) non répétitif, dégradé linéaire (gauche, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", type de dégradé = 1); * / / * c'est-à-dire * / couleur: # 464646; position: relative; à gauche: 296px; / * Voici comment le menu se termine de l'autre côté de la roue * / -webkit-box-shadow: -2px 3px 12px -7px # 161616; / * navigateurs webkit * / box-shadow: 16px 0 10px -8px # 464646 inset; / * opera * / -moz-box-shadow: -2px 3px 12px -7px # 161616; / * firefox * /
Mettre des marges sur chaque élément de sous-menu nous permettra de créer plus de séparation et donnera l’effet que chacun d’eux se trouve sous un calque différent.
Vous pouvez également ajouter une opacité pour chaque élément afin de le faire disparaître de haut en bas et de bas en haut lorsque l'élément central présente une opacité totale..
ul.menuBuild ul.submenu li.first margin-left: -12px; opacité: 0,70; ul.menuBuild ul.submenu li.seconde, ul.menuBuild ul.submenu li.third margin-left: -12px; opacité: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; opacité: 0,70;
Ok, donc vous avez ajouté votre sous-menu mais il reste affiché sans qu'aucun menu principal ne soit survolé. Pour résoudre ce problème, nous devons simplement ajouter un display none à la [ul].
ul.menuBuild li> ul / * utiliser le sélecteur> empêche de nombreux navigateurs plus petits (et IE - voir ci-dessous) masquer les ULs enfants * / display: none; / * fait voler les blocs enfants sans leur laisser d'espace * / top: -169px; position: absolue; à droite: -86px; couleur: # 565656; largeur: 160px; -webkit-border-radius: 0 4px 4px 0; / * webkit * / -moz-border-radius: 0 4 pixels 4 pixels 0; / * firefox * / border-radius: 0 4px 4px 0; / * opera * / padding: 50px; hauteur: 24px; arrière-plan: rgb (255, 255, 255); / * Remplacement pour les navigateurs Web ne prenant pas en charge RGBa * / background: rgba (255, 255, 255, 0.00); / * RGBa avec une opacité de 0,01 * /
Alors maintenant, ça ne se voit pas du tout! Ok, allons-y et faisons-le afficher après le survol d'un élément principal. En utilisant li: hover> ul, nous pouvons dire que lorsqu'un menu principal [li] est survolé, nous afficherons le [ul] du sous-menu approprié en utilisant display: block.
ul.menuBuild li: hover> ul / * une des déclarations les plus importantes - le navigateur doit détecter le survol d'éléments arbitraires, le> cible uniquement l'enfant, pas les enfants ul de cet enfant ul * / display: block; / * rend le bloc enfant visible - une des déclarations les plus importantes * / position: absolute; gauche: 0; largeur: 400px; hauteur: 200px;
Pour une esthétique pure, nous pouvons ajouter un rayon de bordure, une zone d’ombre et un fond. Ce qui est nécessaire est de créer la hauteur, la largeur, le positionnement absolu et la marge supérieure..
La marge supérieure nous permet d’enfoncer le premier élément de menu jusqu’à notre choix, nous pouvons alors utiliser moins de marge pour réduire le reste des éléments..
ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4 -webkit-border-radius: 20px 0 0 20px; / * webkit * / -moz-border-radius: 20px 0 0 20px; / * firefox * / border-radius: 20px 0 0 20px; / * opera * / -webkit-box-shadow: -2px 7px 8px -7px # 161616; / * webkit * / -moz-box-shadow: -2 pixels 7 pixels 8 pixels-7 pixels # 161616; / * firefox * / box-shadow: -16px 0 8px -7px # 222222 inset; / * opera * / background: # F0000F; / * anciens navigateurs * / arrière-plan: -moz-linear-gradient (gauche, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / background: -webkit-gradient (linéaire, haut gauche, haut droite, couleur-stop (52%, # F0000F), couleur-stop (60%, # CC0000), couleur-stop (84%, # 990000), couleur-stop (84%, # FFF), couleur-stop (85%, # 464646), couleur-stop (92%, # 363636), couleur-stop (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * ie * / background: linear-gradient (gauche, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * futurs navigateurs CSS3 * / -pie-background: linear-gradient (left, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * Correction d'IE à l'aide de Pie * / height: 18px; rembourrage: 8px; position: absolue; marge supérieure: 100 px; largeur: 138px;
Pour les 3 éléments de menu restants, nous allons ajouter une marge supérieure à chacun pour un espacement égal entre eux et une marge laissée pour les cogner contre les différents calques.
Ensuite, nous devons nous assurer d’ajouter la rotation à chaque élément afin d’adapter parfaitement le menu à la roue..
ul.menuBuild li # menu2 -webkit-transform: rotation (-10deg); / * webkit * / -moz-transform: rotation (-10deg); / * firefox * / / -o-transform: rotation (-10deg); / * opera * / -ms-transform: rotation (-10deg); / * ie9 et les versions futures * / transform: rotate (-10deg); / * anciens navigateurs * / margin-top: 141px; marge gauche: 5px; ul.menuBuild li # menu3 -webkit-transform: rotation (-21deg); / * webkit * / -moz-transform: rotation (-21deg); / * firefox * / / -o-transform: rotation (-21deg); / * opera * / -ms-transform: rotation (-21deg); / * ie9 et les versions futures * / transform: rotate (-21deg); / * anciens navigateurs * / margin-top: 181px; marge gauche: 18px; ul.menuBuild li # menu4 -moz-transform: rotation (-32deg); / * firefox * / -ms-transform: rotation (-32deg); / * ie9 et les versions futures * / transform: rotate (-32deg); / * navigateurs plus anciens * / -webkit-transform: rotation (-32deg); / * webkit * / -o-transform: rotation (-32deg); / * opera * / margin-top: 218px; marge gauche: 38px;
Après avoir pris en charge les éléments du menu principal, nous allons faire la même chose pour le sous-menu, sauf que, au lieu de faire en sorte que les éléments de menu tournent autour du volant, nous voulons qu'ils soient tout en haut et en bas. Pour ce faire, nous devons compenser la rotation du menu principal en ajoutant une rotation à chaque sous-menu..
Comme pour le menu principal, nous devons ajouter une marge supérieure pour uniformiser l’espacement entre chaque élément et pousser chaque élément du sous-menu vers la droite pour les rapprocher encore plus de leurs calques respectifs..
ul.menuBuild li # menu1> ul margin-top: 0; à gauche: 20px; ul.menuBuild li # menu2> ul -webkit-transform: rotation (10deg); / * webkit * / -moz-transform: rotation (10deg); / * firefox * / / -o-transform: rotation (10deg); / * opera * / -ms-transform: rotation (-10deg); / * ie9 et les versions futures * / transform: rotate (-10deg); / * anciens navigateurs * / left: 24px; marge supérieure: 6px; ul.menuBuild li # menu3> ul -webkit-transform: rotation (21deg); / * webkit * / -moz-transform: rotation (21deg); / * firefox * / / -o-transform: rotation (21deg); / * opera * / -ms-transform: rotation (-21deg); / * ie9 et les versions futures * / transform: rotate (-21deg); / * anciens navigateurs * / left: 27px; marge supérieure: 16px; ul.menuBuild li # menu4> ul -webkit-transform: rotation (32deg); / * webkit * / -moz-transform: rotation (32deg); / * firefox * / / -o-transform: rotation (32deg); / * opera * / -ms-transform: rotation (32deg); / * ie9 et les versions futures * / transform: rotate (32deg); / * anciens navigateurs * / left: 28px; marge supérieure: 27 px;
Enfin, nous pouvons ajouter un style facultatif pour que les polices disparaissent puis redeviennent solides une fois survolées. Cela amènera chaque élément au premier plan pour l'utilisateur lorsqu'il passe dessus..
Ces styles ne sont pas nécessaires au fonctionnement du menu, mais ils ajoutent quelques effets intéressants et augmentent la convivialité..
ul.menuBuild ul.submenu li a color: # 464646; / * la couleur des polices du sous-menu * / opacity: 0.65; / * Ceci mélange la police avec le fond * / filter: alpha (opacité = 65); ul.menuBuild ul.submenu li a: hover opacity: 1.0; / *, ce qui ramène l'opacité à 100% * / filter: alpha (opacité = 100) ul.menuBuild li a / * pour les liens du menu principal * / color: # FFBE8F; bloc de visualisation; largeur: 100%; ul.menuBuild li: survolez> a color: #fff; border-left: double 5px # 880000; / * l'indicateur lorsqu'un élément survole * / / * ne pas utiliser display: block; * /
Si vous souhaitez styliser chaque sous-menu, vous pouvez utiliser le code suivant?
.sub1, 2, 3, 3,
Après avoir terminé la dernière partie, vous devriez avoir quelque chose comme ça? Encore une fois si votre image ne ressemble pas à l'image ci-dessous, ne vous inquiétez pas, revenez simplement en arrière et vérifiez votre code.
Crédits: L’image centrale provient de la bibliothèque d’envato assets.
Eh bien pour IE, nous pouvons utiliser CSSPIE dans une feuille de style séparée. Je n'entrerai pas beaucoup dans les détails car même avec ce correctif, IE ne s'affiche pas correctement. Si vous connaissez une meilleure solution, s'il vous plaît laissez-moi savoir dans les commentaires.
En utilisant le comportement, nous pouvons appeler le fichier php csspie pour indiquer à IE que les styles CSS3 peuvent être utilisés. Alors, voici comment ça va marcher?
ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third, ul.menuBuild ul.submenu li.last, ul. menuBuild li> ul, ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu2> ul, ul.menuBuild li # menu3> ul, ul.menuBuild li # menu4> ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, .completer2 comportement: url (styles / csspie / PIE.php); / * Correctif pour CSS3 IE - Supporte 'border-radius', 'box-shadow', 'border-image', -pie-background ', gradients linéaires', 'RGBA' * /
Quelques autres correctifs d'IE vont comme ceci?
ul.menuBuild ul.submenu li filtre: alpha (opacité = 70); / * IE a trop de problèmes d'opacité progressive, nous allons donc utiliser 70 pour tous les sous-menus * / .completer, .completer2 display: none; / * transform ne fonctionne pas correctement, nous allons donc simplement cacher les finisseurs * / .nav-holder border-bottom-style: none; hauteur: 0px;
J'espère donc que vous avez apprécié ce tutoriel! N'oubliez pas que la prise en charge de CSS3 est limitée et que, si vous souhaitez créer une compatibilité entre tous les navigateurs, il existe d'autres moyens d'accomplir la même tâche, comme l'utilisation d'images et de javascript. Si vous souhaitez un tutoriel sur les autres styles de menu, comment utiliser la version javascript ou tout simplement utiliser des effets CSS3 plus impressionnants, faites-le moi savoir dans les commentaires et je vous en préparerai quelques-uns! Laissez vos commentaires et questions ci-dessous ;)
Soyez patient et continuez à apprendre et avant de vous en rendre compte, vous maîtriserez tout ce que vous ferez.!
