Share
Souvent utilisés dans les sites de commerce électronique ou à grande échelle, les méga-menus sont de plus en plus populaires car ils offrent une solution efficace pour afficher beaucoup de contenu tout en conservant une mise en page propre. Dans ce didacticiel, nous allons apprendre à créer un méga-menu déroulant génial composé uniquement de CSS, à l'aide de fonctionnalités CSS3 intéressantes..
Si vous recherchez un point de départ rapide, parcourez nos modèles CSS. Ou embauchez un expert CSS3. Sinon, commençons ce tutoriel.
Commençons par un menu de base, construit avec une liste non ordonnée et quelques styles CSS de base.
Nous allons maintenant appliquer certains styles CSS de base. Pour le conteneur de menu, nous définissons une largeur fixe que nous centrons en définissant les marges gauche et droite sur "auto".
#menu list-style: none; largeur: 940px; marge: 30px auto 0px auto; hauteur: 43px; remplissage: 0px 20px 0px 20px;
Voyons maintenant comment nous pouvons l’améliorer avec certaines fonctionnalités de CSS3. Nous devons utiliser différentes syntaxes pour les navigateurs Webkit (comme Safari) et pour les navigateurs Mozilla (comme Firefox)..
Pour les coins arrondis, la syntaxe sera la suivante:
-moz-border-radius: 10px -webkit-border-radius: 10px; border-radius: 10px;
Pour le fond, nous utiliserons des dégradés et une couleur de secours pour les anciens navigateurs. Pour conserver la cohérence lors du choix des couleurs, il existe un outil génial appelé Facade qui vous aide à trouver des tons plus clairs et plus sombres d'une couleur de base..
arrière-plan: # 014464; arrière-plan: -moz-linear-gradient (haut, # 0272a7, # 013953); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 0272a7) à (# 013953));
La première ligne applique une couleur de fond simple (pour les navigateurs plus anciens); les deuxième et troisième lignes créent un dégradé de haut en bas à l'aide de deux couleurs: # 0272a7 et # 013953.
Nous pouvons maintenant ajouter une bordure plus sombre et peaufiner le motif avec une "fausse" bordure intercalaire créée avec la fonction "ombre de la boîte". La syntaxe est la même pour tous les navigateurs compatibles: la première valeur est le décalage horizontal, la deuxième le décalage vertical, la troisième le rayon de flou (une petite valeur la rend plus nette; elle sera de 1 pixel dans notre exemple). . Nous définissons tous les décalages sur 0 afin que la valeur de flou crée une bordure claire uniforme:
-moz-box-shadow: encart 0px 0px 1px # edf9ff; -webkit-box-shadow: encart 0px 0px 1px # edf9ff; box-shadow: incrément 0px 0px 1px # edf9ff;
Voici le code CSS final pour le conteneur #menu:
#menu list-style: none; largeur: 940px; marge: 30px auto 0px auto; hauteur: 43px; remplissage: 0px 20px 0px 20px; / * Coins arrondis * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Couleur et dégradés de fond * / background: # 014464; arrière-plan: -moz-linear-gradient (haut, # 0272a7, # 013953); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 0272a7) à (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-shadow: encart 0px 0px 1px # edf9ff; -webkit-box-shadow: encart 0px 0px 1px # edf9ff; box-shadow: incrément 0px 0px 1px # edf9ff;
Nous allons commencer avec tous les éléments de menu alignés à gauche et les espacer avec une marge droite (le remplissage sera nécessaire pour l'état de survol):
#menu li float: left; bloc de visualisation; text-align: center; position: relative; remplissage: 4px 10px 4px 10px; marge droite: 30px; marge supérieure: 7px; bordure: aucune;
Pour le survol et le menu déroulant, j'ai choisi un jeu de couleurs gris pour le fond.
La couleur de remplacement sera un gris clair (# F4F4F4) et le dégradé sera appliqué du haut (# F4F4F4) au bas (#EEEEEE). Les coins arrondis seront appliqués uniquement dans les coins supérieurs, le menu déroulant étant collé sous les éléments de menu..
arrière-plan: # F4F4F4; arrière-plan: -moz-linear-gradient (en haut, # F4F4F4, #EEEEEE); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# F4F4F4) à (#EEEEEE));
Le rembourrage gauche et droit est légèrement plus petit ici car nous avons une bordure de 1 pixel qui apparaît en survol. Si nous conservons le même remplissage, les éléments de menu seront déplacés de deux pixels à droite en raison des bordures gauche et droite ajoutées au survol de la souris. Pour éviter cela, nous allons supprimer 1 pixel de remplissage des deux côtés, nous avons donc 9 pixels au lieu de 10.
bordure: solide 1px # 777777; remplissage: 4px 9px 4px 9px;
Ensuite, nous ajoutons des coins arrondis au sommet uniquement pour que le menu déroulant reste parfaitement sous l'élément de menu parent:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
Voici le code CSS final pour les éléments de menu en survol:
#menu li: survol bordure: 1px solide # 777777; remplissage: 4px 9px 4px 9px; / * Couleur et dégradés du fond * / background: # F4F4F4; arrière-plan: -moz-linear-gradient (en haut, # F4F4F4, #EEEEEE); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# F4F4F4) à (#EEEEEE)); / * Coins arrondis * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
Pour les liens, nous appliquerons une belle ombre de texte en utilisant une syntaxe simple: les première et deuxième valeurs sont des décalages horizontaux et verticaux pour l'ombre (1 pixel dans notre exemple), la troisième est le flou (1 pixel également) et alors nous avons la couleur (noire):
text-shadow: 1px 1px 1px # 000;
Voici le CSS final pour les liens:
#menu li a font-family: Arial, Helvetica, sans-serif; taille de police: 14px; couleur: #EEEEEE; bloc de visualisation; contour: 0; texte-décoration: aucun; text-shadow: 1px 1px 1px # 000;
En survol de la souris, l'arrière-plan étant gris, nous utiliserons une couleur plus sombre (n ° 161616) pour les liens et la couleur blanche pour l'ombre du texte:
#menu li: survolez un color: # 161616; text-shadow: 1px 1px 1px #FFFFFF;
Enfin, nous avons besoin d'un moyen d'indiquer s'il y a une liste déroulante ou non en utilisant une simple image de flèche comme arrière-plan, elle sera positionnée à droite à l'aide d'un remplissage et la marge supérieure s'alignera correctement. En survol, cette marge supérieure sera fixée à 7 pixels au lieu de 8, une bordure supplémentaire apparaissant au survol de la souris (sinon, la flèche serait déplacée de 1 pixel vers le bas):
Accentsconagua
#menu li .drop padding-right: 21px; background: url ("img / drop.png") non-répétition droite 8px; #menu li: survolez .drop background: url ("img / drop.png") no-repeat right 7px; Voici notre code final pour le conteneur de menu et les liens; seul l'élément "home" n'a pas de contenu déroulant pour l'instant:
#menu list-style: none; largeur: 940px; marge: 30px auto 0px auto; hauteur: 43px; remplissage: 0px 20px 0px 20px; / * Coins arrondis * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Couleur et dégradés de fond * / background: # 014464; arrière-plan: -moz-linear-gradient (haut, # 0272a7, # 013953); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 0272a7) à (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-shadow: encart 0px 0px 1px # edf9ff; -webkit-box-shadow: encart 0px 0px 1px # edf9ff; box-shadow: incrément 0px 0px 1px # edf9ff; #menu li float: left; bloc de visualisation; text-align: center; position: relative; remplissage: 4px 10px 4px 10px; marge droite: 30px; marge supérieure: 7px; bordure: aucune; #menu li: survol bordure: 1px solide # 777777; remplissage: 4px 9px 4px 9px; / * Couleur et dégradés du fond * / background: # F4F4F4; arrière-plan: -moz-linear-gradient (en haut, # F4F4F4, #EEEEEE); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# F4F4F4) à (#EEEEEE)); / * Coins arrondis * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; taille de police: 14px; couleur: #EEEEEE; bloc de visualisation; contour: 0; texte-décoration: aucun; text-shadow: 1px 1px 1px # 000; #menu li: survolez un color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; background: url ("img / drop.png") non-répétition droite 8px; #menu li: survolez .drop background: url ("img / drop.png") no-repeat right 7px; Et le résultat est:
Un menu déroulant "classique" contient généralement des listes imbriquées dans des éléments de liste parent et se présente comme suit:
Pour notre Mega Menu, au lieu des listes imbriquées, nous utiliserons simplement les DIV standard, qui fonctionneront comme n'importe quelle liste imbriquée:
Ce sera la structure de base pour le menu déroulant. L'idée est de pouvoir inclure n'importe quel type de contenu, tel que des paragraphes, des images, des listes personnalisées ou un formulaire de contact, organisé en colonnes..
Les conteneurs de différentes tailles contiennent tout le contenu du menu déroulant. J'ai choisi les noms de balises en fonction du nombre de colonnes qu'elles contiendront.
Pour masquer les menus déroulants, nous allons utiliser le positionnement absolu avec une marge gauche négative:
position: absolue; à gauche: -999em;
La couleur de secours de l'arrière-plan est la même que celle utilisée pour les éléments de menu. Les navigateurs modernes affichent un dégradé commençant par #EEEEEE en haut (pour correspondre au dégradé de l'élément de menu parent) et se terminant par #BBBBBBB en bas:
arrière-plan: # F4F4F4; arrière-plan: -moz-linear-gradient (top, #EEEEEE, #BBBBBBB); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (#EEEEEE) à (#BBBBBBB));
Nous allons à nouveau utiliser des coins arrondis, à l'exception de celui en haut à gauche:
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; position: absolue; à gauche: -999em; / * Masque le menu déroulant * / text-align: left; remplissage: 10px 5px 10px 5px; bordure: solide 1px # 777777; bordure supérieure: aucune; / * Fond dégradé * / fond: # F4F4F4; arrière-plan: -moz-linear-gradient (top, #EEEEEE, #BBBBBBB); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (#EEEEEE) à (#BBBBBBB)); / * Coins arrondis * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
Pour illustrer cela, voyons à quoi cela aurait l'air si nous n'avions pas prêté attention aux détails:
Maintenant, voici notre exemple:
Comme vous pouvez le constater, la liste déroulante reste fidèle à son élément de menu parent.
Pour avoir un conteneur déroulant parfait, nous devons spécifier la largeur de chacun:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .d.
Et pour afficher les menus déroulants au survol de la souris, nous allons simplement utiliser:
#menu li: survol. colonne3, #menu li: survol. colonnes_2, #menu li: survol. 3polumns, #menu li: survol .dropdown_4columns, #menu li: survol.
Nos cours sont prêts à être inclus dans notre menu. Nous allons utiliser chacune d’elles à partir de la mise en page à 5 colonnes jusqu’à la liste déroulante à une colonne:
Contenu des 5 colonnes
Contenu des 4 colonnes
Contenu des 3 colonnes
Contenu des 2 colonnes
1 contenu de la colonne
Voici un aperçu du code ci-dessus:
Maintenant que les conteneurs sont prêts, nous allons créer des colonnes de tailles croissantes, en suivant les principes du système de grille 960..
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; float: gauche; position: relative; marge gauche: 5px; marge droite: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px;
Voici un exemple de liste déroulante contenant plusieurs colonnes. Dans cet exemple, nous avons différentes combinaisons utilisant toutes sortes de colonnes:
Ceci est un contenu de 5 colonnes
Ceci est un contenu de 1 colonne
Ceci est un contenu de 1 colonne
Ceci est un contenu de 1 colonne
Ceci est un contenu de 1 colonne
Ceci est un contenu de 1 colonne
Ceci est un contenu de 4 colonnes
Ceci est un contenu de 1 colonne
Ceci est un contenu de 3 colonnes
Ceci est un contenu de 2 colonnes
Prévisualisation du code:
Voyons maintenant comment aligner notre menu et le contenu déroulant sur le bord droit de la barre de navigation. non seulement l'élément de menu, mais le conteneur déroulant doit également être changé.
Pour ce faire, nous allons ajouter une nouvelle classe appelée .menu_right à l'élément de liste parent, nous réinitialisons donc la marge de droite et la déplaçons à droite:
#menu .menu_right float: right; marge droite: 0px;
Ensuite, voyons la liste déroulante. Dans le code CSS précédent, les coins arrondis étaient appliqués à tous les coins sauf le coin en haut à gauche, afin de correspondre à l'arrière-plan de l'élément de menu parent. Nous voulons maintenant que cette liste déroulante se colle sur le bord droit de l'élément de menu parent. Nous allons donc remplacer les valeurs de border-radius par une nouvelle classe appelée .align_right et définir le coin supérieur droit sur 0..
#menu li .align_right / * Coins arrondis * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px;
Dernier point mais non le moindre, nous voulons que le menu déroulant apparaisse à droite; Nous allons donc utiliser notre nouvelle classe et réinitialiser la valeur de gauche, puis la coller à droite:
#menu li: survolez .align_right left: auto; à droite: -1px; en haut: auto;
Maintenant, il est prêt à être utilisé dans le menu:
Ceci est un contenu de 1 colonne
Et un petit aperçu du code ci-dessus:
Maintenant que toute la structure est prête, nous pouvons ajouter autant de contenu que nous voulons: texte, listes, images, etc..
Commençons par un style de base pour les paragraphes et les titres:
#menu p, #menu h2, #menu h3, #menu ul li famille de polices: Arial, Helvetica, sans-serif; hauteur de ligne: 21px; taille de police: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; poids de la police: 400; espacement des lettres: -1px; marge: 7px 0 14px 0; rembourrage en bas: 14px; fond de bordure: solide 1px # 666666; #menu h3 font-size: 14px; marge: 7px 0 14px 0; rembourrage en bas: 7px; fond de bordure: solide 1px # 888888; #menu p line-height: 18px; marge: 0 0 10px 0; .strong font-weight: bold; .italic font-style: italic;
Nous pouvons appliquer une belle couleur bleue aux liens dans la liste déroulante:
#menu li: survolez div a taille de la police: 12px; couleur: # 015b86; #menu li: survol div a: survol color: # 029feb;
Révisons nos listes; nous devons réinitialiser certains styles tels que la couleur d'arrière-plan ou les bordures utilisées dans la barre de navigation:
#menu li ul list-style: none; rembourrage: 0; marge: 0 0 12px 0; #menu li ul li taille de la police: 12px; hauteur de ligne: 24px; position: relative; text-shadow: 1px 1px 1px #ffffff; rembourrage: 0; marge: 0; float: aucun; text-align: left; largeur: 130px; #menu li ul li: survoler background: none; bordure: aucune; rembourrage: 0; marge: 0;
.imgshadow background: #FFFFFF; rembourrage: 4px; bordure: solide 1px # 777777; marge supérieure: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; box-shadow: 0px 0px 5px # 666666;
Et pour créer un paragraphe avec une image à gauche:
.img_left width: auto; float: gauche; marge: 5px 15px 5px 5px;
Pour mettre en évidence certains contenus, voici un exemple de boîte noire avec des coins arrondis et une ombre incrustée subtile:
#menu li .black_box background-color: # 333333; couleur: #eeeeee; text-shadow: 1px 1px 1px # 000; remplissage: 4px 6px 4px 6px; / * Coins arrondis * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; / * Shadow * / -webkit-box-shadow: encart 0 0 3px # 000000; -moz-box-shadow: encart 0 0 3px # 000000; box-shadow: encart 0 0 3px # 000000;
Et pour finir, voici une autre façon de styler vos listes en utilisant, encore une fois, du CSS3:
#menu li .greybox li background: # F4F4F4; bordure: 1px solide #bbbbbb; marge: 0px 0px 4px 0px; remplissage: 4px 6px 4px 6px; largeur: 116px; / * Coins arrondis * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; #menu li .greybox li: survolez background: #ffffff; bordure: 1px solide #aaaaaa; remplissage: 4px 6px 4px 6px; marge: 0px 0px 4px 0px;
Tous les navigateurs gèrent le survol sur des balises non ancres… sauf Internet Explorer 6; Notre Mega Menu ne fonctionne donc toujours pas avec cet ancien navigateur. Nous pouvons résoudre ce problème grâce à un fichier de comportement qui ajoutera cette fonctionnalité. Vous pouvez le trouver ici et utiliser des commentaires conditionnels pour cibler IE6 uniquement; plus d'explications peuvent être trouvées via cet article de CSS-Tricks.
Pour cibler IE6, nous utiliserons le code suivant:
J'ai utilisé quelques fichiers PNG dans ce tutoriel et, comme tout le monde le sait, IE6 ne prend pas en charge la transparence. Nous avons donc différentes solutions:
Je vous laisse choisir celui qui correspond à vos besoins. Maintenant, passons en revue un exemple de travail complet.
Mega Drop Down Menu
Bonjour et bienvenu ! Ceci est une vitrine des possibilités de cet incroyable menu déroulant Mega.
Cet article est livré avec une large gamme de styles typographiques préparés tels que des titres, des listes, etc..
Ce méga menu a été testé dans tous les principaux navigateurs..
Ceci est un texte de boîte gris foncé. Fusce in metus à enim porta lacinia vitae a arcu. Sed lacus nulla mollis porta quis.
Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.
Ceci est un exemple de texte en italique. Consequat scelerisque. Fusce sed lectus chez arcu mollis accumsan chez nec nisi porta quis sit amet.
Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper dans les ultricies vitae, neput vulgariser le port.
Ceci est un exemple de texte en gras. Aliquam sodales nisi nec felis hendrerit el elifend lectus feugiat scelerisque.
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.Lire plus…
Aliquam elementum felis quis felis conséquat scelerisque. Fusce sed lectus à arcu mollis accumsan à nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.Lire plus…
Ceci est une boîte noire, vous pouvez l’utiliser pour surligner du contenu. Sed sed lacus nulla et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Appréciations, metac cursus à la charge. Un vestibule quisque nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus à Velit varius gravida. Nulla ipsum risus.
Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.Lisez plus…
Aliquam elementum felis quis felis conséquat scelerisque. Fusce sed lectus à arcu mollis accumsan à nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Lire la suite…
corps, ul, li taille de la police: 14px; font-family: Arial, Helvetica, sans serif; hauteur de ligne: 21px; text-align: left; / * Barre de navigation * / #menu list-style: none; largeur: 940px; marge: 30px auto 0px auto; hauteur: 43px; remplissage: 0px 20px 0px 20px; / * Coins arrondis * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Couleur et dégradés de fond * / background: # 014464; arrière-plan: -moz-linear-gradient (haut, # 0272a7, # 013953); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 0272a7) à (# 013953)); / * Borders * / border: 1px solid # 002232; -moz-box-shadow: encart 0px 0px 1px # edf9ff; -webkit-box-shadow: encart 0px 0px 1px # edf9ff; box-shadow: incrément 0px 0px 1px # edf9ff; #menu li float: left; text-align: center; position: relative; remplissage: 4px 10px 4px 10px; marge droite: 30px; marge supérieure: 7px; bordure: aucune; #menu li: survol bordure: 1px solide # 777777; remplissage: 4px 9px 4px 9px; / * Couleur et dégradés du fond * / background: # F4F4F4; arrière-plan: -moz-linear-gradient (en haut, # F4F4F4, #EEEEEE); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# F4F4F4) à (#EEEEEE)); / * Coins arrondis * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; taille de police: 14px; couleur: #EEEEEE; bloc de visualisation; contour: 0; texte-décoration: aucun; text-shadow: 1px 1px 1px # 000; #menu li: survolez un color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; background: url ("img / drop.png") non-répétition droite 8px; #menu li: survolez .drop background: url ("img / drop.png") no-repeat right 7px; / * Menu déroulant * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; float: gauche; position: absolue; à gauche: -999em; / * Masque le menu déroulant * / text-align: left; remplissage: 10px 5px 10px 5px; bordure: solide 1px # 777777; bordure supérieure: aucune; / * Fond dégradé * / fond: # F4F4F4; arrière-plan: -moz-linear-gradient (top, #EEEEEE, #BBBBBBB); arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (#EEEEEE) à (#BBBBBBB)); / * Coins arrondis * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; ] menu li: survolez .dropdown_2columns, #menu li: survolez .dropdown_3columns, #menu li: survolez .dropdown_4columns, #menu li: survolez .dropdown_5columns left: -1px; en haut: auto; / * Colonnes * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; float: gauche; position: relative; marge gauche: 5px; marge droite: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px; / * Alignement à droite * / #menu. menu_right float: right; marge droite: 0px; #menu li .align_right / * Coins arrondis * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; #menu li: survolez .align_right left: auto; à droite: -1px; en haut: auto; / * Dérouler les styles de contenu * / #menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; hauteur de ligne: 21px; taille de police: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; poids de la police: 400; espacement des lettres: -1px; marge: 7px 0 14px 0; rembourrage en bas: 14px; fond de bordure: solide 1px # 666666; #menu h3 font-size: 14px; marge: 7px 0 14px 0; rembourrage en bas: 7px; fond de bordure: solide 1px # 888888; #menu p line-height: 18px; marge: 0 0 10px 0; #menu li: survolez div un font-size: 12px; couleur: # 015b86; #menu li: survol div a: survol color: # 029feb; .strong font-weight: bold; .italic font-style: italic; .imgshadow background: #FFFFFF; rembourrage: 4px; bordure: solide 1px # 777777; marge supérieure: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; box-shadow: 0px 0px 5px # 666666; .img_left / * L'image est collée à gauche * / width: auto; float: gauche; marge: 5px 15px 5px 5px; #menu li .black_box background-color: # 333333; couleur: #eeeeee; text-shadow: 1px 1px 1px # 000; remplissage: 4px 6px 4px 6px; / * Coins arrondis * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; / * Shadow * / -webkit-box-shadow: encart 0 0 3px # 000000; -moz-box-shadow: encart 0 0 3px # 000000; box-shadow: encart 0 0 3px # 000000; #menu li ul list-style: none; rembourrage: 0; marge: 0 0 12px 0; #menu li ul li taille de la police: 12px; hauteur de ligne: 24px; position: relative; text-shadow: 1px 1px 1px #ffffff; rembourrage: 0; marge: 0; float: aucun; text-align: left; largeur: 130px; #menu li ul li: survoler background: none; bordure: aucune; rembourrage: 0; marge: 0; #menu li .greybox li background: # F4F4F4; bordure: 1px solide #bbbbbb; marge: 0px 0px 4px 0px; remplissage: 4px 6px 4px 6px; largeur: 116px; / * Coins arrondis * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; #menu li .greybox li: survolez background: #ffffff; bordure: 1px solide #aaaaaa; remplissage: 4px 6px 4px 6px; marge: 0px 0px 4px 0px; J'espère que vous avez apprécié ce tutoriel sur la création de méga menus. Merci d'avoir suivi!
Si vous avez besoin d’un point de
