-
Mega-menu
Un mega-menu en CSS (pas de javascript) extra-large à plusieurs colonnes.
De 1 à 5 colonnes, de taille différente, avec texte, liens, images, videos etc...
Relooké by me, couleur dégradée, ombre, transition (effet slide), aspect 3D.
On peut réduire la largeur totale à 820px, sans déformation.
Les codes html et CSS sont visibles avec la démo.
-
Commentaires
20GeeeenDimanche 2 Septembre 2018 à 23:25Bonjour Papy, c'est vraiment un super Megamenu, merci pour ces partages.
Je suis en train de le renseigner avec les liens, je pense que le final sera pas mal, surtout il marche sans JS, et les codes sont acceptés sans problème ! c'est rare….
Bonne soirée,
B.C.
Geeeen
https://miroirauxessences.blog
curieux, quand je renseigne le site web ça me met que l'adresse du site est invalide
Bonjour Papy,
je reviens vers toi car tu es plus calé que moi
J'ai testé mon site sur grand et petit écran pour voir le rendu du menu !
Sur grand écran 21 pouces : il est décalé sur la gauche et déborde énormément et si je le l'ajuste pour qu'il soit centré cela ne va plus du tout pour les petits écrans
Sur écran 15 pouces : il est décalé à droite, pareil si je le centre il se retrouve à déborder pour grand écran
S'il te plait pourrais tu jeter un œil et me dire comment faire ?
Mon site => http://tricot-et-crochet.kazeo.com/
Je suis désolée de t’embêter mais j'ai vraiment besoin d'aide
Je te remercie d'avance
Cordialement
Mel
-
Mardi 22 Mars 2016 à 16:43
-
Mardi 22 Mars 2016 à 16:14
Déjà expliqué....mais tu modifies sans arrêt !!!!!
Actuellement ton menu fait 1200px(width:1200px;).....
Donc, pour le centrer sous toutes résolutions, il faut le placer au milieu (left:50%;)
Puis selon sa largeur, ici 1200px, il faut le déplacer sur la gauche da sa moitié (margin-left:-600px;)
Mais attention, tu as mis une ligne CSS qui bloque ces réglages: margin:32px auto 0px auto
donc supprimer cette ligne comme ci-dessous (en mettant des /*----------*/)en jaune :/* menu horizontal */
#menu {display:none;}
#menub {
position:absolute;
top: 290px;/*--- position en hauteur à ajuster selon ---*/
left:50%;/*---centrage du menub ---*/
margin-left:-600px;/*---affine le centrage-moitié de la valeur menub---*/
}
#menub {
list-style:none;
width:1200x;
/*margin:32px auto 0px auto;-----Important-coder-cette-ligne-ainsi--------*/
height:50px;
padding:0px 30px 0px 30px;
....... suite du code
-
Bonjour,
j'ai un méga souci avec ce menu Il se retrouve en bas de mon site :(
Une petite aide me serait utile
Merci
Cordialement
Chatlu-
Mardi 1er Mars 2016 à 18:18
-
Mardi 1er Mars 2016 à 17:52
Salut!
"menu" est l'identifiant CSS du menu header....donc ne pas utiliser !!!!!
Il faut utiliser le code proposé, en modifiant ceci:#menu {display:none;}/*---cache le menu-header---*/
#menub {
position:absolute;
top: 100px;/*--- position en hauteur à ajuster selon ---*/
left:50%;/*---centrage du menub ---*/
margin-left:-470px;/*---affine le centrage-moitié de la valeur menub---*/
}Dans le code CSS proposé modfier:
margin:30px auto 0px auto;
par
/*margin:30px auto 0px auto;*/
-
Mardi 1er Mars 2016 à 16:27
Bonjour papy,
Je reviens vers toi car je ne m'en sors pas !
J'ai compris ou était le problème pour l'emplacement du menu cela venait des lignes #menub j'ai retiré le "b".
Mon menu est placé ou je veux, j'ai constaté qu'il y avait interaction avec la gestion du menu en tête du site "bizarre"
Mon problème et le suivant : le sous menu box il est petit et les liens son en dessous. J'ai beau chercher je ne trouve pas :(
Aurais tu la gentillesse de jeter un œil (que je te rendrais par la suite promis) à mon site ? http://tricot-et-crochet.kazeo.com/
Je te remercie par avance
Cordialement
Chatlu
-
Lundi 29 Février 2016 à 14:52
-
Lundi 29 Février 2016 à 13:56
-
Lundi 29 Février 2016 à 13:40
-
C'est vraiment super utile merci ! En revanche, je ne comprends pas pourquoi mais, mon menu est un peu capricieux. C'est-à-dire que, quand je glisse ma souris pour aller dans les onglets, ces derniers s'en vont. Je ne sais vraiment pas pourquoi étant donné que dans la démo que tu as mis à notre disposition, il n'y a pas ce problème. Aurais-tu une idée d'où ça pourrait venir ?
Merci d'avance pour ta réponse !Pour changer les couleurs, c'est partout dans le CSS...et oui, !!!
De plus beaucoup de dégradés, donc attention à la syntaxe.
Essaie avec Google-chrome.... Clic droit sur l'élément désiré > inspecter l'élément > à droite le css modifiable
A chaque fois que tu vois un carré de couleur, modifie le en cliquant dessus.
Cela te donnera une idée des lignes de code à modifier.eh ben écoute, maintenant ça marche! ^^
Merci c trop bien!
(les couleurs à changer se situent où?)
merci encore mille fois!Bah....j'ai testé le menu sur ton blog, y a pas de problème....!
J'ai bien accès au sous menu.....!???????????????
rho punaise, ya un bug, on ne peut pas descendre sur les liens, le menu disparait aussitôt :-/
je suis un peu boulet lolC'est bon j'ai réussi!! encore merci!!!
Faut maintenant que j'arrive à changer la couleur et ce sera nickel!! merci encoreAh...oui ! autant pour moi, j'ai oublié le positionnement.
Ajout CSS:#menub {
position: absolute;
top: 10px;/*-----valeur à ajuster-----*/
left: 50%;
margin-left: -490px;
}Coucou Papyrock
Désolé de te déranger à nouveau, je viens de placer le menu qui me dit vraiment bcp malheureusement il s'affiche mal sur ma page, pourrais tu m'expliquer pk?
http://testation.eklablog.com/test-c25328198
merci!!!
Ajouter un commentaire
Bonjour
Pour les visiteurs de ce blog de Mike GMZ, j'ai retrouvé sur web.archive.org les commentaires numérotés de 1 à 8.
(En fait c'est juste la numérotation qui démarre actuellement à 9 au lieu de 1 initialement)
Les voici sous forme de copies d'écran:
(un clic sur une image l'affiche agrandie dans une nouvelle page)
>