• Menu déroulant au survol de la souris

    Menu déroulant au survol de la souris 

    Code à mettre dans la partie CSS.

    Etant donné que le code CSS est très long, j'ai déjà rendu le code un peu plus lisible. Les mots en noir sont des commentaires, ils ne seront pas pris en compte dans votre code css.

    /* TITRE */

    Remplacer POLICE par la police d'écriture que vous souhaitez. Ex : calibri.

    Le X désigne la taille du titre.

    Le premier COLOR désigne la couleur du titre alors que le deuxième COLOR désigne la couleur du fond du titre. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

    La ligne width correspond à la largeur de votre menu.

    La dernière ligne correspond à l'opacité. Elle va de 0 à 1.

    /* SOUS LIENS */

    La ligne width correspond à la largeur de votre menu.

    La ligne height correspond à la taille qui va s'afficher quand vous survolez le menu. Si vous rajoutez un lien, il faudra agrandir la valeur.

    Remplacer POLICE par la police d'écriture que vous souhaitez. Ex : Times New Roman.

    Le X désigne la taille des liens.

    Le premier COLOR désigne la couleur des liens alors que le deuxième COLOR désigne la couleur du fond des liens. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

    /* SOUS LIENS AU SURVOL */

    Le premier COLOR désigne la couleur des liens au survol alors que le deuxième COLOR désigne la couleur du fond des liens au survol. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

    Pour le reste des valeurs, vous pouvez les modifier comme vous souhaitez. Il faut juste chipoter pour que tout soit correct.

    /!\ Si jamais le premier lien apparait, il faut changer la valeur de la ligne en vert.

    /* TITRE */
    .nav {
        font-family: POLICE;
        font-size: Xpx;
        margin-bottom: 25px;
        margin-top: 10px;
        text-align: center;
        background-color: COLOR;
        color: COLOR;
        width: 200px;
        display: block;
        opacity: 1;
    }

    /* SOUS LIENS */
    .navbar {
        width: 200px;
        height: 70px;
        overflow: hidden;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -o-transition: all 2s ease
    }

    .navbar:hover {
        height: 210px;
    }

    .navig a {
    letter-spacing: 1px;
    font-family: POLICE;
    font-size: Xpx;
    text-align: center;
    margin-bottom: 0px;
    background-color: COLOR;
    color: COLOR;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    display: block;
    padding: 5px;
    }

    /* SOUS LIENS AU SURVOL */
    .navig a:hover {
        background-color: COLOR;
        color: COLOR;
        letter-spacing: 2px;
        text-align: center;
        padding-left: 40px;
    }

     

    Code à mettre dans la partie HTML.

    Remplacer TITRE par le titre de votre menu.

    Remplacer NOM DU LIEN 1 par le nom de votre lien.

    Remplacer LIEN 1 par l'url de votre lien.

    Faites la même chose pour tous les liens. Vous pouvez rajouter autant de liens que vous voulez.

    /!\ Si vous rajoutez un lien, n'oubliez pas de modifier la ligne mauve du code css.

    <div class="navbar">
    <div class="nav" style="text-align: center;">TITRE</div>
    <div class="navig" style="text-align: center;"><a href="LIEN 1">NOM DU LIEN 1</a> <a href="LIEN 2">NOM DU LIEN 2</a> <a href="LIEN 3">NOM DU LIEN 3</a> <a href="LIEN 4">NOM DU LIEN 4</a> <a href="LIEN 5">NOM DU LIEN 5</a></div>
    </div>

  • Commentaires

    1
    Vendredi 1er Juillet 2016 à 15:00

    Oh merci depuis le temps que je le cherchais !! Ces codes me seront très utiles :3

    2
    Vendredi 1er Juillet 2016 à 15:08

    De rien ! :D

    3
    Dimanche 3 Juillet 2016 à 12:03

    Génial, ça fait hyper longtemps que je cherche le code, je peux te le piquer :3 ?

    4
    Dimanche 3 Juillet 2016 à 20:27

    Il est là pour ça, t'inquiète. xD

    5
    Lundi 4 Juillet 2016 à 17:53

    Ah tu l'as trouvé finalement X) 

    6
    Lundi 4 Juillet 2016 à 20:05

    Ba je l'avais pour le tout premier thème du blog mais avec la mise à jour du blog, j'ai dû tout réparé le code car il ne fonctionnait plus. u.U

    7
    Jeudi 23 Février 2017 à 14:38
    Merci beaucoup pour ce code! Ça faisait longtemps que je le cherchais^^
    8
    Jeudi 23 Février 2017 à 19:27

    De rien ! Il faudra peut-être chipoter au niveau des valeurs car Eklablog fait buger le code. xD

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :