• Menu dynamique

     

    • Musique

      Personalized to your needs

    • Photos

      Advanced use of technology

    • Infos

      Understanding visually

    • For girl only

      Professionals in action

    • Support

      24/7 for you needs

     

     

     

     

     

     

     

    Ce menu fait 880px de large.

    Ci-dessous, le code à copier,
    la première partie est le html avec les 5 éléments du menu
    En bleu , les adresses vers lesquelles pointent chaque bouton: à remplacer par vos adresses.
    En orange, les icones et les titres des boutons, que vous pouvez également remplacer par d'autres titres...

    Entre les balises <style>, il s'agit du sytle des boutons.
    J'ai mis quelques commentaires entre /* et */ sur les valeurs que vous pouvez également changer pour personnaliser votre menu dynamique.

     

     

    <ul class="menudyn">
    <li><a href="http://BOUTONMUSIQUE"> <span class="mn-icon"></span></a>
    <div class="mn-titre">Musique</div>
    </li>
    <li><a href="http://BOUTONPHOTOS"> <span class="mn-icon"></span></a>
    <div class="mn-titre">Photos</div>
    </li>
    <li><a href="http://BOUTON3"> <span class="mn-icon">&diams;</span></a>
    <div class="mn-titre">Infos</div>
    </li>
    <li><a href="http://BOUTON4"> <span class="mn-icon"></span></a>
    <div class="mn-titre">For girl only</div>
    </li>
    <li><a href="http://BOUTON5"> <span class="mn-icon"></span></a>
    <div class="mn-titre">Support</div>
    </li>
    </ul>
    <style><!--
    .menudyn{
    padding: 0 0 0 48px;
    margin: 20px auto;
    width: 880px;
    }
    .menudyn li{/*style boutons*/
    width: 160px;
    height: 160px;
    border: 8px solid #f6f6f6; /*bordure epaisseur et couleur*/
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-left: -20px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
    }
    .menudyn li:last-child{
    margin-right: 0px;
    }
    .menudyn li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
    }
    .mn-icon{/*style icone*/
    font-size: 40px;
    color: #FBE7E6;/*couleur rose clair*/
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 20px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
    }
    .mn-titre {/*style titre*/
    font-size: 20px;
    font-weight:bold;
    position: absolute;
    top: 104px;
    height: 80px;
    width: 110px;
    left: 50%;
    margin-left: -50px;
    opacity: 0.8;
    text-align: center;
    color: #555;
    }

    /*style survol souris*/

    .menudyn li:hover{
    border-color: #333;
    z-index: 999;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    }
    .menudyn li:hover .mn-icon{
    color: #000;
    font-size: 60px;
    text-shadow: 0px 0px 1px #000;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
    }
    .menudyn li:hover .mn-titre{
    color: #000;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
    }

    @-webkit-keyframes moveFromBottom {
    from {
    -webkit-transform: translateY(200%) scale(0.5);
    opacity: 0;
    }
    to {
    -webkit-transform: translateY(0%) scale(1);
    opacity: 1;
    }
    }
    @-moz-keyframes moveFromBottom {
    from {
    -moz-transform: translateY(200%) scale(0.5);
    opacity: 0;
    }
    to {
    -moz-transform: translateY(0%) scale(1);
    opacity: 1;
    }
    }
    @-ms-keyframes moveFromBottom {
    from {
    -ms-transform: translateY(200%) scale(0.5);
    opacity: 0;
    }
    to {
    -ms-transform: translateY(0%) scale(1);
    opacity: 1;
    }
    }
    --></style>

    « Zoom + sur le texte d'articleBoutons menu qui surgissent ! »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Jeudi 14 Août 2014 à 09:39

    Jeu sympa 

    2
    Dimanche 9 Novembre 2014 à 23:14

     

    Bonsoir,

    Est ce que ce serait possible d'insérer ces boutons dynamiques en dessous de l'Haeder ?

    Bonne journée

    Nadine

    3
    Mercredi 15 Avril 2015 à 15:19

    Je serai intéressé par ce genre de menu mais je me demande si on peut le placer dans un article.. ^^
    Merci de ta réponse!

    4
    Mercredi 15 Avril 2015 à 20:10

    Bonsoir Loïcia, 

    bien sur, tu peux mettre ce menu dans un article.
    Il fait 880px de large en l'état: j'ai mis le code "html et CSS" dans l'article.

    Tu copies tout via le bouton <> code source de l'éditeur d'article. Après, tu remplaces ce qu'il faut remplacer par tes propres données.

    On peut l'adapter: diminuer les boutons ou changer la couleur, les icônes, ajouter un bouton...

    Si tu as des difficultés, n'hésites pas à revenir le dire..

    Bonne soirée

    5
    Jeudi 16 Avril 2015 à 15:08

    D'accord je vais essayer de le personnaliser :)
    Merci beaucoup, et bonne après midi!

    6
    Samedi 18 Avril 2015 à 16:02

    bonjour ,j aimerais bien le mettre en dessous de mon headder mais je sais pas comment le mettre . merci beaucoup de votre aide

    votre blog est bien sympa et plein idées cool

    7
    Mercredi 29 Avril 2015 à 10:05

    Bonjour, 

    Désolé pour le retard de réponse.

    Pour mettre ce menu sous ton en tête, il te faut le mettre dans un module simple puis, avec du CSS appliqué au seul module , sélecteur:
    #module_menuXXXXXXXXX .module_menu_contenu_block 
    numéro du module à récupérer dans le html voir article: http://bleulezard.eklablog.com/examiner-un-element-de-la-page-et-trouver-son-selecteur-a80512900
    lui donner dimensions adéquates et  position en absolute pour le placer sous ton header.

    Pour cacher ton titre qui ne sera pas déplacé donc toujours affichédans le menu latéral , ajout CSS
    #module_menu_titreXXXXXXXXX {display:none;}


    Si tu rencontres difficultés , n'hésites pas à donner détails afin que je t'aiguille un peu plus précisément. Tu peux aussi personnaliser ce menu ( si par exemple, tu veux y mettre les rubriques de tes petits enfants avec en médaillon, non pas un signe comme sur l'exemple mais une photo de chacun..on peut regarder ensemble comment faire)

    A plus, j'espère

     

    8
    Jeudi 30 Avril 2015 à 10:12

    Merci pour ton aide Waouh ça n'a pas l'air simple , mais je vais essayer de comprendre . Jusqu’à maintenant j'ai réussi je te remercie et félicitation pour ton blog il est plein astuces et aidecoolcool. Bon si j'ai un soucis je crie a l'aide !!! Je te souhaite un excellent jeudi



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl