• Menu déroulant du header

    Merci à Nagalia pour ce code, elle n'en a pas fait un tuto, mais on va dire que j'ai fouillé un petit peu le code source! :p

     

    Menu déroulant

    Pour commencer, faites deux images (largeur = 120px, hauteur = 50px), une au survol et une autre quand ce n'est pas au survol, par exemple, je vous montre mes images (il est strictement interdit de prendre mes images, je vous demande donc de faire vous même vos propres image PS: j'ai fait mes image sur photofiltre, avec la fonction dégradé): image non-survolé, image survolé.

    Hébergez ensuite vos deux images via eklablog avec le système de gestion des fichiers (contenu>gestion des fichiers), puis entrez ce code css dans votre éditeur de code css (apparence>modifier le thème>ajouter du css):

    #menu { position: fixed;
    top: 5px;
    height: 50px;
    left: 50%;
    }
    #menu a:hover {height: 40px;
    padding-top: 30px;
    background-image: url(" URL DE L'IMAGE SURVOLÉ");
    background-repeat: no-repeat;
    color: COULEUR DU TEXTE AU SURVOL;
    }
    #menu a{ background-image: url("URL DE l'IMAGE NON-SURVOLÉ");
    background-position: 100%;
    background-repeat: no-repeat
    width: LARGEUR DE L'IMAGEpx;
    font-size: TAILLE DE LA POLICEpx;
    font-family: NOM DE LA POLICE;
    text-align: center;
    font-weight: bold;
    height: 30px;
    text-decoration: none;
    letter-spacing: 1px;
    padding-top: 15px;
    transition: height 500ms, padding-top 500ms ;
    -moz-transition: height 500ms, padding-top 500ms;
    -webkit-transition: height 500ms, padding-top 500ms;
    }

    Pour ce qui ont besoins d'un exemple, voici mon code:

    #menu { position: fixed;
    top: 5px;
    height: 50px;
    left: 50%;
    margin-left: -335px;
    }
    #menu a:hover {height: 40px;
    padding-top: 30px;
    background-image: url("http://ekladata.com/graph-css-html.eklablog.fr/perso/img%20hover.png");
    background-repeat: no-repeat;
    color: #1e5a65;
    }
    #menu a{ background-image: url("http://ekladata.com/graph-css-html.eklablog.fr/perso/img%20not%20hover.png");
    background-position: 100%;
    background-repeat: no-repeat;
    width: 117px;
    font-size: 15px;
    font-family: Agency FB;
    text-align: center;
    font-weight: bold;
    height: 30px;
    text-decoration: none;
    letter-spacing: 1px;
    padding-top: 15px;
    transition: height 500ms, padding-top 500ms;
    -moz-transition: height 500ms, padding-top 500ms;
    -webkit-transition: height 500ms, padding-top 500ms;
    }

    Maintenant, il vous faut connaitre le code pour les menus! alors c'est simple, vous aller dans un module style les statistiques, vous cliquez sur HTML et vous rajouter ceci après tout le reste:

    <ul id="menu">
    <li><a href="LIEN DU MENU">TITRE</a></li>
    </ul>

    Maintenant, vous aller vous dire que vous n'en avez qu'un, mais que vous en voulez plus, c'est simple, retourner dans le module où vous avez entré le code précédent et rajouter ceci (rajouter le bien avant, c'est très important!):

    <li><a href="LIEN DU MENU">TITRE</a></li>

    Tags Tags : , , ,
  • Commentaires

    1
    Vendredi 20 Juillet 2012 à 15:33

    *o*, merveilleux ce tuto' ,merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii ^^ !

    2
    Vendredi 20 Juillet 2012 à 16:18

    derien ^^

    3
    mimi-chano Profil de mimi-chano
    Samedi 21 Juillet 2012 à 00:18

    et bah je te dit merci vraiment tout ces codes sa marche toujrs pour moi merci beaucoup =)

    4
    Samedi 21 Juillet 2012 à 12:38

    derien! C'est tout l'intêret des tutos! lol ^^

    5
    Samedi 28 Juillet 2012 à 09:47

    Merci beaucoup pour ce tutos, mais pourquoi quand je met tout ça l'écriture de mon menu est bleu au non-survole ?

    Merci d'avance.

    6
    Samedi 28 Juillet 2012 à 16:17

    rajoute ce code: 

    #menu a { color: COULEUR SOUHAITÉ; }

    7
    Samedi 28 Juillet 2012 à 16:26

    Merci beaucoup !!!!!!!

    8
    Samedi 28 Juillet 2012 à 16:27

    je suis aller voir sur ton blog, je n'ai pas vu de menu déroulant?!

    9
    Samedi 28 Juillet 2012 à 16:40

    c'est normale je le ferais pour mon prochain thème, là je l'ai tester sur une démo ^^

    10
    Samedi 28 Juillet 2012 à 19:35
    11
    Mardi 31 Juillet 2012 à 23:03

    J'arrive pas a en metre plusieurs juste 1

    12
    Mardi 21 Août 2012 à 11:50

    Merci beaucoup: il ne me servirons pas pour l'instant mais peut-etre un jour!

    13
    Mercredi 5 Septembre 2012 à 14:12

    @aki chan, le dernier code te dit comment en rajouter, mais pense bien à rejouter ce code avant </ul>C'est le plus important

    14
    Dimanche 4 Novembre 2012 à 21:51

    Moi je n'est pas trop compris je met le code partie css , apres dans un menu simple , et apres quesque je dois faire ?

    15
    Dimanche 4 Novembre 2012 à 22:39

    premier code: css

    deux derniers code: module simple

    16
    Lundi 5 Novembre 2012 à 10:51

    Dans un modue différent ps : je sais je suis nule! ^^'

    17
    Lundi 5 Novembre 2012 à 13:08

    non, dans le même module, c'est précisé, mais surtout, fait bien attention, le deuxième code ce place avant </ul> qui ce dernier fait partie de l'avant dernier code... ^^

    18
    Lundi 5 Novembre 2012 à 13:13

    Merci j'ai essayé et je trouve que sur le coté sa rend mieux alors j'ai choisis coté mais ton tuto reste génial!!!^^

    19
    Lundi 5 Novembre 2012 à 13:45

    Super tuto, pile ce que je cherchais, merci !! :D

    20
    Dimanche 25 Août 2013 à 16:12

    Bonjour merci pour ce super code

    je suis en train de le mettre sur mon blog essai

    mais j'ai un petit soucis

    le texte n'est  pas centrer dans les boutons 

    pourtant j'ai utiliser ton code

     

    text-align: center;

    21
    Lundi 26 Août 2013 à 15:52

    Peut-être un problème avec ton image (un bout transparent qui compte, du coup, le texte s'aligne au milieu de l'image entière et non au milieu de la partie opaque de l'image)

    22
    Mardi 31 Décembre 2013 à 10:46

    On ne vois pas les images "non survolée" et "survolée" ;) 

    Sinon merci pour le tuto !

    23
    Jeudi 13 Février 2014 à 21:21

    Quel beau blog ! et merci pour ce menu, je vais essayer de le réaliser, mais peut-on le faire déroulant ?

    Bien cordialement.

    Gen

    24
    Dimanche 2 Mars 2014 à 13:10

    Super tuto ! 

    25
    Mardi 4 Mars 2014 à 13:43

    Comment fait-on les images, j'ai pas compris.

     

    26
    Mercredi 14 Janvier 2015 à 14:08

    Merci pour le code ^^

    27
    Dimanche 26 Avril 2015 à 15:13

    Merci beaucoup pour le code par contre je n''arrive pas à enlever le contour.



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :