• Menu rotatif

    Un menu qui effectue une rotation au survol souris...

    Voir la source:

    « Modifier infos footerSauvegarde theme CSS - Tuto-video »

  • Commentaires

    12
    Vendredi 24 Janvier 2020 à 03:13

    Bonjour, je viens de tenter de placer le menu rotatif, eklablog me répond erreur dans le css.

    Merci de votre aide.

    11
    Samedi 26 Novembre 2016 à 14:02

     

     

    Coucou bonjour,ton blog est super,merci beaucoup,

    mais pour moi c est encore trop compliqué.

    Bon weekend Amitiées

    10
    Samedi 7 Juin 2014 à 13:40

    On peut ajouter des autres modules à côté des uns et des autres, mais la modif est trop lourde à appliquer.
    Les parties cachées du menu sont larges et se chevaucheraient...les liens ne seraient plus cliquables...etc...
    Pour associer les liens, il faut placer l'url souhaitée à la place de #, dans le code html:

    <dd><a href="http://testcb.eklablog.com/">Accueil</a></dd>

    Exemple:

    <div id="menu-rotatif">

    <div id="header_tuto7">

    <div id="menu_tuto7">

    <div id="box_tuto7" class="rotation_tuto7"><dl><dt>Menu</dt>

    <!----------------------Liens à modifier (#)----------->

    <dd><a href="#">Contact</a></dd>

    <dd><a href="#">Articles</a></dd>

    <dd><a href="#">HTML / CSS</a></dd>

    <dd><a href="http://testcb.eklablog.com/">Accueil</a></dd></dl>

    <!-------------------Fin des liens ----------------------->

    <div class="masque_tuto7">&nbsp;</div>

    <div class="ombre_tuto7">&nbsp;</div>

    </div>

    </div>

    </div>

    </div>

    9
    Samedi 7 Juin 2014 à 11:47
    Ca y est ! Ca marche super! Par contre, je sais j'abuse: Est-il possible d'en rajouter d'autres à côté? Et comment dois je faire pour associer les liens aux différents menus? Merci encore pour tout!
    8
    Samedi 7 Juin 2014 à 11:22
    Merki bcp Mike GMZ!! vais essayer cela dès aujourd'hui!!! C vraiment super sympa et encore merci pour ton site, continue!
    7
    Samedi 7 Juin 2014 à 10:33

    Salut C.B !

    Dans un module simple, edition mode source (<>), copier/coller le code ci-dessous:

    <style><!--code-CSS--

    * {

        margin:0;

        padding:0;

        border:none;

    }

    #box_tuto7 {

        height: 260px;

        font-size: 20px;

        background: white;

    }

    #box_tuto7 dl {

        position: relative;

        top: 15px;

        left: 275px;

        margin-left: -67px;

        width: 150px;

        height: 155px;

        color: #324040;

        text-align: center;

        background: #FFC46A;

        background: -moz-linear-gradient(top, #F93, #FFC46A);

        background: -webkit-gradient(linear, left top, left bottom, from(#F93), to(#F90));

        border-radius:4px;

        -webkit-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.8);

        -moz-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.8);

        box-shadow:0px 0px 8px rgba(0, 0, 0, 0.8);

        -webkit-transform-origin:50% 99px;

        -moz-transform-origin:50% 99px;

        -webkit-animation:bounceOut 1s ease-in-out;

        -moz-transition:-moz-transform 1s ease-in-out;

    }

    #box_tuto7 dt {

        position:absolute;

        bottom:0px;

        width:100%;

        height:30px;

        padding-top:5px;

    }

    #box_tuto7 dd {

        -webkit-transform:rotate(180deg);

        -moz-transform:rotate(180deg);

        -o-transform:rotate(180deg);

    }

    #box_tuto7 dd a {

        display:block;

        height:20px;

        padding:3px 0px;

        color:#324040;

        text-decoration:none;

    }

    #box_tuto7 dd a:hover {

        background:rgba(0, 0, 0, 0.2);

    }

    #box_tuto7 dl:hover {

        -webkit-transform:rotate(-180deg);

        -moz-transform:rotate(-180deg);

        -o-transform:rotate(-180deg);

        -moz-transition:-moz-transform 1s ease-in-out;

        -webkit-animation:bounceIn 1s ease-in-out;

    }

    @-webkit-keyframes bounceIn {

        from {

            -webkit-transform:rotate(0deg);

        }

        75% {

            -webkit-transform:rotate(-200deg);

        }

        90% {

            -webkit-transform:rotate(-175deg);

        }

        to {

            -webkit-transform:rotate(-180deg);

        }

    }

    @-webkit-keyframes bounceOut {

        from {

            -webkit-transform:rotate(-360deg);

        }

        0% {

            -webkit-transform:rotate(-180deg);

        }

        10% {

            -webkit-transform:rotate(-160deg);

        }

        to {

            -webkit-transform:rotate(-360deg);

        }

    }

    #box_tuto7 .masque_tuto7 {

        position:absolute;

        z-index:50;

        width:585px;

        height:135px;

        top:0;

        left:0;

        background:white;

        background:-moz-linear-gradient(top, white, white);

        background:-webkit-gradient(linear, left top, left bottom, from(white), to(white));

    }

    #box_tuto7 .ombre_tuto7 {

        position:absolute;

        z-index:40;

        width:300px;

        height:6px;

        top:133px;

        margin-top:-103px;

        left:130px;

        -webkit-box-shadow:0px 100px 3px black;

        -moz-box-shadow:0px 100px 3px black;

        box-shadow:0px 100px 3px black;

        -webkit-border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;

        -moz-border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;

        border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;

    }

    .rotation_tuto7 {

        clear:right;

        min-height:100px;

        padding-top:1px;

        margin-top:1px;

        position:relative;

        overflow:hidden;

    }

    /*----------------Position-du-menu----------------*/

    #menu-rotatif {

    position: absolute;

    top: -135px;/*-----Haut-du-blog-----*/

    left: 20%;/*----a-20%-du-bord-gauche-----*/

    width: 400px;

    }

    --></style>

    <!-----------------------HTML---Menu-------------------------------------------->

    <div id="menu-rotatif">

    <div id="header_tuto7">

    <div id="menu_tuto7">

    <div id="box_tuto7" class="rotation_tuto7"><dl><dt>Menu</dt>
    <dd><a href="#">Contact</a></dd><dd><a href="#">Articles</a></dd>
    <dd><a href="#">HTML / CSS</a></dd><dd><a href="#">Accueil</a></dd></dl>

    <div class="masque_tuto7">&nbsp;</div>

    <div class="ombre_tuto7">&nbsp;</div>

    </div>

    </div>

    </div>

    </div>

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    6
    Vendredi 6 Juin 2014 à 19:57
    Bonjour, j'étais très intéressé par le menu rotatif à mettre sur mon blog mais étant une bille en programmation évidemment je n'y arrive pas, serait il possible d'avoir un petit coup de main s'il vous plait ? Ce serait trop trop sympa! :)
    5
    Samedi 1er Février 2014 à 22:57

    @la gentille rebelle

    T'as juste à faire un coller/copier du code et le mettre dans: Ajout CSS

    4
    Samedi 1er Février 2014 à 22:45

    mdr !!! t'as remarqué ke javais rajouté un url de texture au masque blanc lol

    donc je remet à l'initial et je rajoute ce ke tu m'a donné??? je ferai cela demain car la jen ai plein la tête des codes lol

    jai anlysé au brouillon ton code menu accordéon , jai trouvé komen mettre kome toi le titre en apparent sans ecarté les image avec souris lol un petit margin-right en % lol

    je le mettrai en visibilité plus tard !!!!

    voici le lien de mon tuto ke tu trouvai pas

     

    http://la-gentille-rebelle.eklablog.com/generateur-de-lecteur-audio-a105889652

     

    bonne soirée

    3
    Mercredi 29 Janvier 2014 à 17:37

    En effet je trouvai cela plat lol merci !!!!

     

    Pour le code du menu rotatif , oui le css ekla prend pas les 2 parti de code ki commence par @ 

    merci , ton blog est un aimant, jy suis collé mdr !!!! bonne soirée

    2
    Mercredi 29 Janvier 2014 à 16:46

    Oui...sauf que pour avoir le rendu final (rotation +rebond) on utilise les keyframes (CSS) non supportées par l'éditeur Ekla...!!!!
    Il y a bien une solution, mais assez complexe à expliquer.....!

    ps: dans le code d'hier (image video), tu peux ajouter ce "style css" dans la balise image (<img src=""......>), histoire de détacher l'image du fond:
    ps-bis: Config générale > Config avancée >  

    style="box-shadow: 6px 6px 10px black; border: 1px solid grey;"

    ce qui donne au final:

    <a onclick="window.open('http://www.archive-host.com/videop.php?id=J1Grtvn6clbz34SiJfl5n76tinf1gb','video-tuto','width=750,height=570,left='+(screen.availWidth/2-365)+',top='+(screen.availHeight/2-250)+'');
    return false;" href="http://www.archive-host.com/videop.php?id=J1Grtvn6clbz34SiJfl5n76tinf1gb">
    <img src="http://ekladata.com/yk5-JKp4XI-yfI8QeNwPFQdngfE@250x170.png" alt="Voir la vidéo-tuto" style=" box-shadow: 6px 6px 10px black;border: 1px solid grey;"></a>

    1
    Mercredi 29 Janvier 2014 à 13:38

    jai installé ce menu rotatif ici en haut droite de mon blog , bien sur jai configuré à mon gout, dur dur lol

    merci beaucoup



    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)