• Menu CCS effet spirale

    Magnifique menu horizontal avec sous-rubriques et un effet spirale au survol pointeur.
    On peut le voir ci-dessus dans le header.
    Uniquement en CSS (+html), pas de javascript ou de jQuery.....

     

    « ShadowboxMenu-image avec légende »

  • Commentaires

    29
    Jeudi 9 Août 2018 à 16:48

    J'ai mis le code sur mon blog, mais ça fait juste disparaître le menu !

    Comment il faut faire ?

    28
    Vendredi 30 Septembre 2016 à 18:12

    Bonjour Mike
    J'ai essayé de changer la couleur de fond et des caractères mais je n'y arrive pas, je ne trouve pas dans le CSS la couleur correspondante au noir.
    Peut-on aussi changer la grandeur des caractères ?
    Merci en tous les cas pour le travail effectué, c'est génial. Et surtout merci de nous aider
    Merci de ton aide
    @lain

    Si une réponse doit être apportée c'est sur le site http://petitrandonneur.fr, me suis trompé, je ne suis pas déconnecté de l'autre blog !

      • Vendredi 30 Septembre 2016 à 19:13

        Salut!

        Le code CSS à modifier :

        ul.menu li {background:greenyellow;}/*---couleur fond menu ---*/

        ul.menu li a {font-size:25px;color:black;}/*---taille et couleur police menu ---*/

        ul.submenu li a {color:red;font-size:15px;}/*--- taille et couleur sous-menu ---*/

    27
    Jeudi 16 Juin 2016 à 13:25
    merci beaucoup ; je vais demander pour java script - superbe toutes ce que tu m'as donné ................ Mamy Annick
    26
    Jeudi 16 Juin 2016 à 11:45
    mdr ............... moi je suis nulle dans ce domaine, donc heureuse d'appliquer les informations, mais avant d'aller aux courses j'avais mis en place, et je me suis retrouvée avec menu déroulant vertical au lieu horizontal, donc merci pour la correction que je viens d'appliquer et tout est OK - je profite de ce passage pour poser autre question sur mon autre blog Blogger j'ai mis en place une formule menu déroulant vertical pour mes listes amies (très utile que je complète au fur et à mesure, j'ai voulu faire la même chose ici mais ne fonctionne pas - voici le lien de mon autre blog - je suis chiante ...

    http://psptutoriels50.blogspot.fr/

    j'ai pris la formule qui fonctionne donc chez Blogger dans un HTLM
    http://blogavecblogger.blogspot.fr/2014/03/creer-un-menu.html
      • Jeudi 16 Juin 2016 à 13:13

        j'ai testé ce code sur mon blog et il fonctionne très bien.
        Javascript doit être activé sur ton blog.
        Il faut le compléter en ajoutant tes liens (URL) à la place de "Lien 1, Lien 2 etc dans "value= ".

        exemple:

        <p>

        <script>// <![CDATA[

        function ChangeUrl(formulaire) 

           { 

           if (formulaire.ListeUrl.selectedIndex != 0) 

              { 

             var url ; 

             url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value; 

             window.open(url,'_blank'); 

               } 

           }

        // ]]></script>

        </p>

        <form><select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">

        <option selected="selected">-Menu D&eacute;roulant De Liens-</option>

        <optgroup label="Groupe 1">

        <option value="http://www.nicosite.net/">Nicosite</option>

        <option value="Lien 2">Titre 2</option>

        </optgroup>

        <optgroup label="Groupe 2">

        <option value="Lien 3">Titre 3</option>

        <option value="Lien 4">Titre 4</option>

        <option value="Lien 5">Titre 5</option>

        </optgroup>

        <optgroup label="Groupe 3">

        <option value="Lien 6">Titre 6</option>

        <option value="Lien 7">Titre 7</option>

        </optgroup>

        </select></form>

    25
    Jeudi 16 Juin 2016 à 11:05
    merci beaucoup pour l'information - je vais faire mes courses et je modifie -
      • Jeudi 16 Juin 2016 à 11:17

        une p'tite coquille dans ma modif CSS. 
        écrire bien-sur #position-menu
        et non pas #positionmenu (le tiret entre position et menu)

    24
    Jeudi 16 Juin 2016 à 08:43
    merci beaucoup pour l'information, bonne journée Mamy Annick
      • Jeudi 16 Juin 2016 à 10:50

        Non, ce n'est pas bon. il faut placer le menu au centre (left:50%) et le déplacer à gauche de la moitié de sa longueur (margin-left: -500px).
        La longueur varie selon le nombre de colonnes et la largeur de celles-ci.
        Mais .......je m'aperçois  que ce décalage à gauche rentre en conflit avec le CSS du thème.
        Donc on fait autrement.

        1- Dans la partie HTML on ajoute en début de code (avant <ul class="menu">):

        <div id="position-menu">

        Puis en fin de code la balise de fermeture:

        </div>

        Ce qui donne ceci en gros:

         

        <div id="position-menu">

        <ul class="menu">

        <li><a href="#">Accueil</a></li>

        <li><a href="#s1">Menu 1</a>

        <ul class="submenu">

        <li><a href="#">Submenu a</a></li>

        .......   .......

        </ul>

        </div>


        2- Dans la partie CSS on modifie :

         .menu {

          position: absolute;

          top: 60px;

          left:50%; /**on place le menu au centre **/

          height: 58px;

          margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/

         

          }

         Par cette ligne de code:

         .menu { }

        Puis on ajoute avant cette ligne, le code suivant:

        #positionmenu {

        position: absolute;

          top: 60px;

          left:50%; /**on place le menu au centre **/

          height: 58px;

          margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/

        }

         Voilà ça doit fonctionner maintenant !

      • Jeudi 16 Juin 2016 à 08:52

        j'ai modifié ainsi

        .menu { 

        position: absolute; 

        top: 60px;

        left: 20%; /**on place le menu au centre **/

        height: 58px; 

        margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/

        }

        donc pour cette page essai cela fonctionne, je pense sera à revoir fonction de ma page

        encore merci et bonne journée Mamy Annick

    23
    Mercredi 15 Juin 2016 à 20:26
    merci pour les informations je viens de faire un essai sur mon blog essais, mais une petite question peut on déplacer ce bloc afin qu'il soit centré sur la page par rapport à la bannière (si bannière posée ) bonne soirée Mamy Annick
      • Mercredi 15 Juin 2016 à 21:02

        Salut!

        Oui, il faut modifier le code CSS comme ci-dessous:

        .menu {
        position: absolute;
        top: 60px;
        left: 50%; /**on place le menu au centre **/
        height: 58px;
        margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/
        }

    22
    Samedi 19 Avril 2014 à 10:42
    Ca marche pas le code html enfin ca me met pas le menu en haut
    21
    Mardi 15 Avril 2014 à 20:08
    @ la Gentille Rebelle: oui ça vient du fait que je fais tourner les sous-menus de -270° au lieu de 90° (ils arrivent donc au même point en faisant la grande boucle!). On voit d'ailleurs subrepticement les textes à l'envers.

    @Mike GMZ: oui la réponse de l'auteur du billet n'est pas la panacée car en enlevant le code qu'il propose d'ajouter le comportement n'est pas modifié. J'ai beau réduire max-height jusqu'à 0, les menus s'ouvrent en pointant les sous-menus même non déroulés (en clignant un peu plus) et baisser z-index peut rendre l'ouverture du menu invisible (seule la fermeture apparaît)...
    20
    Mardi 15 Avril 2014 à 18:11
    Moi vrille pas mon menu et je suis sur firefox!
    en + on dirait ke le spiral de Phiiil tourne dans l'autre sens mdr !!!
    19
    Mardi 15 Avril 2014 à 17:16

    @Phiiil

    Oui, effectivement léger bug lors du survol des sous rubriques....
    Sur le site source, la question est posée dans les commmentaires, et la réponse est un peu évasive:

    http://www.script-tutorials.com/whirling-dropdown-menu/
    On va étudier le problème...

     

    18
    Lundi 14 Avril 2014 à 00:57

    Merci pour ce tuto qui m'a bien inspiré également pour cette page! Enfin, dans mon cas on parlerait plutôt d'un menu à effet vrille!

    Me semble plus fluide sur Chrome que Firefox.

    Par contre, il prend le pas sur tout ce qui se trouve en-dessous de son déploiement et je ne suis pas arrivé à imposer un z-index supérieur aux articles.

     

    Cordialement,

    Phiiil

    17
    Dimanche 6 Avril 2014 à 11:57

    Salut!

    Oui, fausse manip de ma part !!! je ne voulais pas publier cet article, mais juste l'enregistrer....!
    En fait, je testais une réponse pour le forum.
    Le but c'est de placer un module actif (derniers visiteurs, stats..) dans un volet coulissant.
    Voir le blog concerné.
    Mais pas en copier/coller, car le module ne serait pas mis à jour.
    Donc avec un peu de JS ...ça doit le faire ..!!!

    16
    Samedi 5 Avril 2014 à 10:33

    mon idée est venu à partir du code donné pour cette effet

    http://la-gentille-rebelle.eklablog.com/effet-extension-horizontale-chez-pourkoi-pas-a107354062

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    15
    Samedi 5 Avril 2014 à 10:26

    jai eu ton mail de module dans menu coulissant mais erreur 404

    jai mis des menu en coulissant chez moi !!!! suite à un code ki faisait coulissant en horizontal, moi jai enlevé le width et gardé ke le height, mis en sélecteur le module du menu ki correspond et EUR2KA , ça a marché lol

    voici le code pour comparer avec le tien, kès t'en pense ????

    #module_menu_contenu140214838 ul{
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -ms-transition:all 1s linear;
    height:120px;}
    #module_menu_contenu140214838 ul:hover{
    height:530px;}

    14
    ladyellys Profil de ladyellys
    Samedi 22 Mars 2014 à 15:32
    Thank you for this new Menu , i love it so much . Good day for you !!!Elly
    13
    Samedi 22 Mars 2014 à 11:02
    non non ça ralentit pas , va aussi vite kavec couleur ,enfin chez moi !!!!
    12
    Samedi 22 Mars 2014 à 10:22
    Woooaaawwww..!!! beautiful ...!!!!
    La texture (img) ralentit un peu l'effet spirale, non? ou c'est juste une impression ?
    Et mon article "Shadowbox", t'as essayé ?
    11
    Samedi 22 Mars 2014 à 09:36

    J ai mis menu en haut de mon blog mais cette fois habillé d'une texture !!!

    bon week end

    10
    Vendredi 21 Mars 2014 à 19:24
    Merci , reste plus ka le remplir de liens lol jai l'impression ke je fait une collection de menu mdr !!!
    bonne soirée
    9
    Vendredi 21 Mars 2014 à 19:16
    Bah...oui ! ça le fait bien ..!!!
    8
    Vendredi 21 Mars 2014 à 15:42

    Voici mon exercice lol merci pour ce super code ke tu partages

     

    http://ekladata.com/YEfXshl0GsHiid2LhgdP35nyljo/menu-spiral-vierge-habille.html

    7
    Mardi 18 Mars 2014 à 13:32
    Hallucinant l'effet spiral !!! je le testerai plus tard 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)