• Faire un menu arrondi (4 liens)

    Faire un menu arrondis (4 liens)

    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.

    /* MENU */

    Les 3 premières lignes représentent les bords du cadre. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

    La dernière ligne représente la couleur du fond. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

    /* DESCRIPTION */

    COLOR désigne la couleur du texte. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

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

    Le X désigne la taille de la police d'écriture.

    /* TITRE DU BLOG */

    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.

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

    Le X désigne la taille de la police d'écriture.

    /* BARRE */

    COLOR désigne la couleur de la barre en haut. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.

    Le X désigne la taille de la barre.

    /* LIENS */

    COLOR désigne la couleur de fond. 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.

    /* MENU */
    #sidebarss{
        border-left: solid 1px COLOR;
        border-right: solid 1px COlOR;
        border-bottom: solid 1px COLOR;
        position: fixed;
        top: 25px;
        left: 60px;
        padding-top: 2px;
        width: 250px;
        padding-bottom: 2px;
        text-align: center;
        border-radius: 0px 0px 500px 500px;
        background: COLOR;
    }

    /* IMAGE */
    #contentx img{
        max-width: 250px;
        text-align: center;
        border-radius: 0px 0px 500px 500px;
    }

    /* DESCRIPTION */
    #info{
        display: block;
        width: 230px;
        padding: 10px;
        margin-bottom: -10px;
        text-align: center;
        color: COLOR;
        font-family: POLICE;
        font-size: Xpx;
    }

    #info a{
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
    }

    /* TITRE DU BLOG */
    #title{
        width: 240px;
        padding: 5px;
        text-align: center;
        color: COLOR;
        margin-top: -10px;
        background-color: COLOR;
        font-family: POLICE;
        font-size: Xpx;
    }

    /* BARRE */
    #linksbox{
        display: inline-block;
        width: 250px;
        text-align: center;
        background-color: COLOR;
        height: Xpx;
    }

    /* LIENS */
    #lb{
        display: inline-block;
        width: 250px;
        margin-left: 45px;
    }

    #lb a{
        text-decoration: none;
        display: block;
        float:left;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        margin-top: 10px;
        line-height: 30px;
        padding: 2px;
        text-align: center;
        background-color: COLOR;
        border-radius: 100px 100px 0px 0px;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }

    #lb a img{
        margin-top: 3px;
    }

    #parceiros {
        opacity: .99;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
    }

    #parceiros:hover a {
        opacity: .50;
    }

    #parceiros a {
        opacity: .80;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
    }

    #parceiros a:hover {
        opacity: .99;
    }

     

    Code à mettre dans la partie HTML.

    Remplacer TEXTE par ce que vous voulez indiquer.

    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 les 4 liens.

    Remplacer TITRE par le titre de votre blog.

    Remplacer URL DE L'IMAGE par l'url de votre image.

    <div id="sidebarss">
    <div id="linksbox">&nbsp;</div>
    <div id="info" style="text-align: center;">TEXTE</div>
    <div id="lb">
    <div id="parceiros" style="text-align: center;"><a title="NOM DU LIEN 1" href="LIEN 1"><img src="http://ekladata.com/QhfrsqQPpNCAHJod2GA109bVLzM.png" alt="" /></a> <a title="NOM DU LIEN 2" href="LIEN 2"><img style="margin-top: 7px;" src="http://ekladata.com/mNTVQhp1yD2s1SnZhiOra4ZeScM.png" alt="" /></a> <a title="NOM DU LIEN 3" href="LIEN 3"><img src="http://ekladata.com/e15pADqNenBiE29EBJ8li33m-AA.png" alt="" /></a> <a title="NOM DU LIEN 4" href="LIEN 4"><img src="http://ekladata.com/8xz_z3isTTRU0cAEC62gHWHT_q8.png" alt="" /></a></div>
    </div>
    <div id="title">TITRE</div>
    <div id="contentx"><img src="URL DE L'IMAGE" alt="" /></div>
    </div>

  • Commentaires

    1
    Vendredi 6 Mai 2016 à 17:26

    Super tuto, enfin moi, je le trouve très compréhensible et accessible à tous. Je n'avais pas encore trouvé de tutoriel pour faire ce genre de menu... Maintenant c'est fait, merci Lockpine :)

    • Voir les réponses
    2
    Lundi 13 Février 2017 à 19:28

    je te l'ai pris merci beaucoup!!! :)

    • Voir les réponses
    3
    Lundi 13 Février 2017 à 19:37

    ahah ça va merci! et toi? ça fait hyppppper long :')

    merci beaucoup!!! :D (le blog n'est pas fini mais c'est pas grave)

    4
    Lundi 13 Février 2017 à 19:51

    Super bien ahah ! (Oui !)

    Courage pour le finir ! :D

    5
    Lundi 13 Février 2017 à 20:08

    merci beaucoup :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :