• Menu déroulant au survol (pas du header)

    Je remercie Visiteur0 qui à eu la gentillesse de me donner son code pour que j'en fasse un tuto

    C'est un code très long, qui ce fait vite, beaucoup de choses sont à modifier mais sont asser répétitive, quoi qu'il en soit, je vous demanderais de faire preuve de patience tout au long de ce tuto.

    Voici un tuto expliquant comment mettre un menu qui donne des informations au survol de la souris, voici donc le css:

    #pa
    {
    width: LARGEUR DU MENUpx;
    border: BORDURE DU MENU;
    }
    #partie1
    {
    width: LARGEUR DE LA PARTIE 1px;
    height: HAUTEUR DE LA PARTIE 1px;
    overflow: hidden;
    background: COULEUR DE FOND;
    border-bottom: BORDURE DU BAS DE LA PARTIE 1;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie2
    {
    width: (PAREIL QUE LA PARTIE 1)px;
    height: (PAREIL QUE LA PARTIE 1)px;
    overflow: hidden;
    background: (PAREIL QUE LA PARTIE 1);
    border-bottom: (PAREIL QUE LA PARTIE 1);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie3
    {
    width: (PAREIL QUE LA PARTIE 1)px;
    height: (PAREIL QUE LA PARTIE 1)px;
    overflow: hidden;
    background: (PAREIL QUE LA PARTIE 1);
    border-bottom: (PAREIL QUE LA PARTIE 1);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie4
    {
    width: (PAREIL QUE LA PARTIE 1)px;
    height: (PAREIL QUE LA PARTIE 1)px;
    overflow: hidden;
    background:url (PAREIL QUE LA PARTIE 1);
    border-bottom: (PAREIL QUE LA PARTIE 1);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie5
    {
    width: (PAREIL QUE LA PARTIE 1)px;
    height: (PAREIL QUE LA PARTIE 1)px;
    overflow: hidden;
    background: (PAREIL QUE LA PARTIE 1);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie1:hover, #partie2:hover, #partie3:hover, #partie4:hover, #partie5:hover
    {
    height: HAUTEUR DES PARTIE SURVOLÉpx;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .titre
    {
    display: block;
    text-align: ALIGNEMENT DU TITRE;
    width: (PAREIL QUE LA PARTIE 1)px;
    height: HAUTEUR DE LA MARGE DU TITREpx;
    font-size: TAILLE DE LA POLICE DU TITREpx;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: kraash black;
    font-weight: bold;
    padding-top: 5px;
    color: black;
    text-shadow: OMBRE DU TEXTE;
    }
    .content
    {
    width: 90%;
    margin: auto;
    border: BORDURE DU CONTENU;
    background: FOND DU CONTENU;
    padding: 6px;
    color: COULEUR DU TEXTE DU CONTENU;
    font-size: 11px;
    text-align: ALIGNEMENT DU TEXTE DU CONTENU;
    }

    Et maintenant l'html:

    <td><div id="pa"><div id="partie1"><span class="titre">TITRE DE LA PARTIE 1</span><div class="content">CONTENU DE LA PARTIE 1</div></div><div id="partie2"><strong><span class="titre">TITRE DE LA PARTIE 2</span></strong><div class="content">CONTENU DE LA PARTIE 2</div> </div><div id="partie4"><strong><span class="titre">TITRE DE LA PARTIE 4</span></strong><div class="content">CONTENU DE LA PARTIE 4</div>
    </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>

    Je ne peux pas expliquer ce tuto, d'une part, car tout est dans le code, et d'autres part, car ce serait trop long à expliquer...


    Tags Tags : , , , ,
  • Commentaires

    1
    Lundi 25 Juin 2012 à 19:26

    un conseil mais le module , pour montrer au gens a quoi il ressemble avant qu'ils le fassent n_n

    2
    Lundi 25 Juin 2012 à 19:29

    Ouais, je sais, je le ferais peut-être demain, mais là, j'ai un coup de barre, ça m'as prit un temp fou de tout déchiffrer et de rendre tout facile de compréhension, donc j'attend un peut, mais t'inquiète, ça serat fait ;)

    3
    Pink-apple Profil de Pink-apple
    Vendredi 26 Octobre 2012 à 21:16

    Coucou, désolé mais c'est quoi le code pour faire comme toi: 

    mettre des genres de volets a gauche du blog ? 

    4
    Vendredi 26 Octobre 2012 à 23:11

    De volet?

    5
    Pink-apple Profil de Pink-apple
    Samedi 27 Octobre 2012 à 09:30

    Enfin comme ce qu'il y a sur ce blog en haut ! :)

    6
    Samedi 27 Octobre 2012 à 11:19

    ah oui, alors c'est ce tuto là: http://graph-css-html.eklablog.fr/menu-deroulant-du-header-a47722341

    Remarque: vous ne devez pas prendre mon code, c'est juste un exemple, pour que vous puissiez voir comment il faut faire.

    7
    Pink-apple Profil de Pink-apple
    Samedi 27 Octobre 2012 à 11:38

    Ok merci :)

    8
    Pink-apple Profil de Pink-apple
    Samedi 27 Octobre 2012 à 11:40

    Mais comment fais ton pour le mettre a gauche ? (je suis vraiment désolé mais j'arrive pas trop :)

    9
    Samedi 27 Octobre 2012 à 11:42

    c'est un autre tuto, va voir dans CSS et HTML

    10
    Pink-apple Profil de Pink-apple
    Samedi 27 Octobre 2012 à 11:42

    Ok ! 

    11
    Uryu Profil de Uryu
    Mercredi 2 Janvier 2013 à 13:01

    Est ce que tu pourrais mettre un exemple stp je ne comprend pas bien a quoi ça sert ^^"

    12
    Mercredi 2 Janvier 2013 à 13:11

    Ben disons que ça prend pas mal de temps, que mon blog lag un tout petit peu et que donc, je ne veux pas trop rajouter de css, bon, disons que, quand tu arrive, tu as plusieur titres les uns en dessous des autres, et quand tu survole un titre, le contenu se déroule en dessous, ça permet de mettre beaucoup d'informations dans un module globalement petit

    13
    Uryu Profil de Uryu
    Mercredi 2 Janvier 2013 à 13:14

    A daccord ok je voit c'est quoi merci je vais peut  être l'utiliser pour un blog ^^

    14
    Vendredi 3 Janvier 2014 à 17:20

    Que faut-il mettre à la place de "BORDURE DU MENU" et "BORDURE DU CONTENU" ?

    15
    Lundi 21 Avril 2014 à 19:56

    svp quelqun pourrais til me montrer comment il la remplis?



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :