• 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.

    Mega-menu

    Mega-menu 

     

     

     

      

    Mega-menu


    « Palette-couleurThe Vaccines - Melody calling »

  • Commentaires

    21
    Lundi 31 Août 2020 à 22:19

    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)


    >

     

     

    20
    Geeeen
    Dimanche 2 Septembre 2018 à 23:25
    Geeeen

    Bonjour 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

     

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    19
    Mardi 22 Mars 2016 à 13:41

    Bonjour Papy,

    je reviens vers toi car tu es plus calé que moi yes

    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

        mouai désolé de t'avoir dérangé 

        C'est pire q'avant je vais me débrouiller toute seule 

        Merci

      • 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

    18
    Lundi 29 Février 2016 à 13:24
    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

        MERCIIIIIIIIII !!! cela fonctionne SUPER PAPY cool

      • 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

        Papy, j'ai fini par trouver happy

        Merci 

        Cordialement

        chatlu

      • Lundi 29 Février 2016 à 13:56

        le html dans la "zone script" et le css dans "css"

      • Lundi 29 Février 2016 à 13:40

        Salut!

        Ou as-tu placé les codes html et CSS sur  ton blog ?

    17
    Vendredi 23 Octobre 2015 à 22:52
    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 !
    16
    Jeudi 26 Juin 2014 à 08:39

    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.

     

    15
    C.B. Profil de C.B.
    Jeudi 26 Juin 2014 à 08:04
    eh ben écoute, maintenant ça marche! ^^
    Merci c trop bien!
    (les couleurs à changer se situent où?)
    merci encore mille fois!
    14
    Jeudi 26 Juin 2014 à 07:58

    Bah....j'ai testé le menu sur ton blog, y a pas de problème....!
    J'ai bien accès au sous menu.....! 

    ???????????????

    13
    Mercredi 25 Juin 2014 à 21:52
    rho punaise, ya un bug, on ne peut pas descendre sur les liens, le menu disparait aussitôt :-/
    je suis un peu boulet lol
    12
    Mercredi 25 Juin 2014 à 21:49
    C'est bon j'ai réussi!! encore merci!!!
    Faut maintenant que j'arrive à changer la couleur et ce sera nickel!! merci encore
    11
    Mercredi 25 Juin 2014 à 20:57
    rho super!
    je place cela n'importe où dans le css?
    10
    Mercredi 25 Juin 2014 à 20:33

    Ah...oui ! autant pour moi, j'ai oublié le positionnement.
    Ajout CSS:

    #menub {
    position: absolute;
    top: 10px;/*-----valeur à ajuster-----*/ 
    left: 50%;
    margin-left: -490px;
    }

    9
    Mercredi 25 Juin 2014 à 20:05
    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

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)