• #2 - Menu du haut fixe

    Bonjour.

    Aujourd'hui, je me présente avec un petit tuto réalisé à la demande de Saejin Park : comment faire un menu du haut fixe, comme celui de GraphA. Comme il était plus simple de répondre à cette question en faisant un article sans limite de caractère avec possibilité d'insérer des images, couleurs et effets de textes, je me suis dit que sa demande était une bonne occasion de partager un tuto.

    En sois, le code pour faire la barre du haut fixe est facile. Mais ce qui le complexifie un peu, c'est l'emploie et du HTML et du CSS pour le réaliser. Pour vous expliquer un peu, nous n'allons pas prendre le menu de l'en-tête qui existe déjà sur ekla. Je suppose que se serait possible de l'utiliser, je n'ai jamais essayer à vrai dire, mais si vous voulez je pourrais essayer d'adapter le code avec ce menu, ce ne doit pas être très difficile. Si je fait différemment, c'est parce que j'ai habitude d'utiliser et le menu de l'en-tête et ce menu fixe. Je crois que je vais vous perdre en explications futiles là. ^^"

    Bien, je vais commencer mes explications, mais encore une fois si vous voulez un code adapter pour le menu de l'en-tête ekla, demandez je serais ravie de regarder pour vous faire cela. Procédons donc étape par étape.

    1/ La partie HTML

    Pour la partie HTML il vous faudra un menu de type texte, si vous n'en avez pas, il suffit de créer un module simple. Mais si vous en avez déjà un c'est encore mieux ! Mon HTML pour le menu fixe est ici :

    #2 - Menu du haut fixe

     

     

     

     

     

     

     

     

     

     


    Il ne se voit pas hein ?

    Voici comment se présente le code à insérer dans votre partie HTML :

    (Si vous ne savez pas comment fonctionne le HTML un tuto d'initiation se trouve ICI)

    <div id="nom1">
    <table>
    <tbody>
    <tr>
    <td>
    <div class="nom2">
    <p><span style="color: #7a85a5;">Libre-Service</span></p>
    </div>
    </td>
    <td>
    <div class="nom3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="lien">Titre du lien</a>&nbsp; &nbsp;&nbsp;<span style="color: #a2a2a2;">&nbsp;-&nbsp; &nbsp; &nbsp;<a href="lien">Titre du lien</a> &nbsp; &nbsp; -&nbsp; &nbsp; &nbsp;<a href="lien">Titre du lien</a> &nbsp; &nbsp; -&nbsp; &nbsp; &nbsp;<a href="lien">Titre du lien</a> &nbsp; &nbsp; -&nbsp; &nbsp; &nbsp;<a href="lien">Titre du lien</a></span></div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>

    Bien décortiquons un peu tout ce monde coloré :

    • En vert bizarre nous pouvons voir que la barre fixe repose sur le principe d'un tableau, ensuite on retrouve dans différentes nuances de bleues les balises importantes à notre code.

    • En bleu marine la balise qui encadre le tableau sera la balise générale du menu du haut fixe, vous pouvez le nommez comme vous le souhaitez mais surtout ne l'enlever pas elle seras très importante en CSS. Le nom servira à faire un rappel dans le CSS pour lui dicter les conditions que l'on souhaite lui apporter.

    • En bleu foncé les deux balises internes de ce tableau, la première permettra de dicter les conditions du texte (si vous en mettez un) lors du rappel en CSS et la deuxième permettra de dicter les conditions des liens. Si vous ne voulez pas mettre de texte, il suffira de retirer les trois lignes de la balise de texte de <div> à </div>

    • En bleu clair se trouve la balise de texte qui permet de traiter la couleur du texte en html, il vous faudra donc modifier le champ en rouge pour adopter une nouvelle couleur. Du moins, en passant par le HTML.

    • En orange donc, nous avons les noms des "id" et des "class" qui servirons à faire un rappel en CSS afin que le code marche comme prévu.

    • En rose, le lien à indiquer.

    • Enfin, en gris foncé et en gras, le nom à donner à ce lien.

     

    Voilà, donc ce que vous aurez à faire :

    1. Copier le code donné ci-dessus et collé-le dans l'emplacement HTML du menu choisi.
    2. Remplacer ce qui est en orange par les noms que vous souhaités, à titre d'exemple j'ai remplacé nom1 par "barrehaut" nom2 par "texte" et nom3 par "liens".
    3. Placer autant de liens que nécessaire en ajoutant cette ligne à chaque nouveau lien :  <a href="lien">Titre du lien</a>
    4. Enregistrer.


    Voici donc l'aperçut que vous aurez une fois ceci enregistré :

    #2 - Menu du haut fixe

    Mais ne vous en faites pas, vous ne verrez pas ceci dans le menu bien longtemps.

    2/ La partie CSS

    OK ! Maintenant, passons à la parie CSS.

    /* - - - BARRE DU HAUT - - - */
    /* - - Barre (fond) - - */
    #nom1 {
        background: valeur;
        height: 60px;
        width: 1565px;
        position: fixed;
        attachment: fixed;
        top: 25px;
        margin-left: -80px;
        border-bottom: 5px solid #b5428a;
        z-index: 1;
        }

    /* - - Liens - - */
    .liens a {color#ffffff;}

    .liens a:hover {color#4f6585;}

    /* - - Texte - - */
    #nom1 p {margin18pxcolor#a2a2a2margin-left375px;}

    .nom2 {
        font-style: normal;     
        font-variant: small-caps}

     

    (Si vous ne savez pas comment fonctionne le CSS, un tuto d'initiation est disponible ICI)

    Bien, après le titre "barre (fond)" nous avons :

    • Le rappel du nom1 avec le #, on ouvre la parenthèse pour lister toutes les conditions à apporter à cet id :
    • Background, c'est la couleur de fond de votre barre (un tuto arrivera très vite pour vous apprendre les couleurs au besoin :D),
    • Height c'est la hauteur de votre barre de menu, la mienne est à 60 px mais vous pouvez régler la votre à envie en baissant ou en augmentant le numéro. Veillez à ne pas enlever le "px" sinon ça ne marchera pas.
    • width: ici ce sera la largeur de votre barre de fond, pareille la taille sera à adapter à vos besoin, il faudra parfois la retoucher plusieurs fois pour que tout le code fonctionne avec harmonie. 
    • Position: fixed, Attachment: fixed; ceci sert juste à dicter à votre barre de ne pas bouger quand vous défiler la page, c'est ce qui permet de la voir même lorsque vous êtes en bas du blog.
    • TopIl s'agit là de la marge entre le haut de votre blog et le début de la barre du menu fixe. 
    • margin-left: C'est la marge qui permet d'aligner correctement la barre par rapport au blog, pour que tout soit correct pas de secret : il faut y aller à tâtons jusqu'à trouver la bonne mesure;
    • border-bottom: la bordure que j'ai mis en bas, bien sûr, vous n'êtes pas obligés d'en mettre une. (Besoin d'aide pour ta bordure ? Un tuto pour t'aide se trouve juste ICI)
    • z-index1; sur ce code, cette partie n'est pas très utile mais il est toujours bien de la mettre, elle permet de dicter l'ordre suivant à la barre : "toujours passer en premier" autrement dit, au dessus de tout le reste.


    Lorsque vous collerez le CSS, ne modifier pour votre blog uniquement les champs en rouge.

    Ensuite, après le titre "Liens" nous avons :

    • .liens a { → Toutes les conditions qui viennent après servent à indiquer à quoi doivent ressembler vos liens lorsqu'ils sont "inactifs", autrement dit comment on les voient en temps normal. Le seul champ vraiment important à modifier sera la couleur, mais vous pourrez aussi ajouter des effets de textes si vous le souhaité (en gras, souligné, en italique ect...)
    • .liens a:hover { → Toutes les conditions énoncés à la suite servirons à dicter ce que ferons les liens quand lors du survol et du clique. On peux y appliquer les mêmes confitions que ci-dessus, mais le but est quand même de mettre quelque chose de différent, par exemple changer la couleur ou passer le texte en gras afin que les visiteurs voient bien que c'est un lien, de plus c'est toujours plus esthétique :p

     

    Enfin, après le titre "Texte" nous avons :

    • Le rappel du nom1, encore une fois, cette fois ci petite nuance avec le p qui précise que nous touchons uniquement le texte dans la balise.
    • .nom2 Ici c'est le rappel CSS du texte, tout ce qui suis dans la "parenthèse" sont les conditions données à ce texte :
    • font-style: ici c'est pour indiquer un peu le style du texte, moi j'ai mis "normal" mais vous pouvez mettre italic par exemple.
    • font-variant: ce critère est aussi pour la police d'écriture, elle permet de donner d'autres effets, par exemple small-caps, qui est l'effet des lettres capitales dans le titre.

     

    Voilà, c'est tout (et c'est déjà beaucoup ^^").

    J'espère ne pas trop vous avoir perdu en explication...

    Voici donc la procédure à faire pour le CSS afin de finir l'installation de votre menu barre fixe :

    1. Copier le code CSS ci-dessous et collé-le à l'emplacement prévu au CSS.
    2. Remplacer les valeurs en rouges par les valeurs de votre choix.
    3. Enregistrer.

     

    Normalement, s'il n'y a aucune erreur le résultat final apparaîtra alors :

    #2 - Menu du haut fixe

    Bien sûr, il vous faudra peut-être plusieurs ajustements avant de voir la barre bien placée, pas de panique si elle est au mauvais endroit, il suffit de régler les problèmes de marges à gauche et en haut.

    J'espère que ce tuto sera clair et pas trop brouillon, il est parfois difficile d'expliquer quelque chose que l'on sait faire ^^".

    N'hésitez pas à me dire si il y à quelque chose que vous n'avez pas compris ou à demander de l'aide.

    Bonne journée.

    **Aeda.


  • Commentaires

    1
    Jeudi 1er Juillet à 16:50

    Ah x) j'ai pas réussie TwT
    Je réessaie atta :))

      • Jeudi 1er Juillet à 17:11

        Ah ? J'ai peut-être mal expliqué :/

        Ou alors j'ai fait une erreur dans les codes donnés mais normalement je les aient testé avant de poster le tuto... mais je vais quand même faire une vérification de mon côté pour être sûre ^^

      • Jeudi 1er Juillet à 17:12

        C'est peut-être moi qui ai fait n'imp' TwT
        tkt <3

      • Jeudi 1er Juillet à 17:23

        Oui mais si mes explications ne sont pas claires ça ne va pas ^^"

        Donc déjà, voyons si l'erreur ne vient pas de mon code et si c'est pas le cas il faudra que je revoit le tuto. ^^ 

        Le but est quand même de présenter quelque chose que les autres peuvent faire, d'autant plus qu'ici comme il faut faire et en HTML et en CSS, c'est plus compliqué.

      • Jeudi 1er Juillet à 17:28

        Après c'est peut-être aussi moi qui suis aveugle >w<

      • Jeudi 1er Juillet à 17:38

        J'ai testé sur un blog trèèès différents de celui-ci, le code marche, en revanche, si ton menu est à droite il est possible que tu ne vois pas la barre parce que la marge gauche de #nom1 est paramétré pour un menu gauche du coup.

        Sinon, est-ce que tu à bien mis d'abord le HTML puis le CSS ? A part ces deux petites choses je vois pas trop ce qui peux faire que ça ne marche pas... enfin, mise à part des petites erreurs de syntaxes dans le code mais ça c'est une autre histoire ^^"

      • Jeudi 1er Juillet à 18:54

        Ah ça marche ... à peu près xD C'est juste pas centré TwT

        C'était les menus gauche droite ^^

      • Vendredi 2 Juillet à 11:01

        Ah ! C'est déjà un bon début xD Pour centrer c'est dans cette partie :

        /* - - Barre (fond) - - */
        #nom1 {
           background: valeur;
           heignt:  60px
           width: 1565px;
           position: fixed;
           attachment: fixed;
           top: 25px;
           margin-left: -80px;
           border bottom: 5px solid #couleur
           z-index: 1;}

         

        Quand t'es dans cette zone en CSS il faut modifier les valeurs que j'ai mise en gras pour pouvoir régler la position de ta barre de menu. N'hésite pas à mettre d'énorme valeurs à "margin-left" si tu est su un menu à droite passe à - 1000 et si ça ne suffit pas, à plus encore.

    2
    Vendredi 2 Juillet à 11:17

    Salut Aeda alors je te rassure tout de suite, c'est super bien expliqué, d'ailleurs j'ai reussi! Le seul truc que j'ai pas trouvé c'est la police d'écriture mais sinon j'ai tout compris, et sur le module tu peux rendre totalement invisible s'il le faut et ça c'est génial! Donc vraiment merci parceque c'est vachement plus pratique maintenant. 

    Après j'avoue j'ai galéré mais en prenant le temps de lire et relire finalement on s'y habitue. En plus au début mes lignes  se décalaient ou je ne trouvait pas quelle valeur il fallait changer, mais en 40 minutes ça se fait super bien! C'est cool de pouvoir changer l'épaisseur ect...

    Je complète juste en indiquant que tes deux autres tutos sur le langage HTML et CSS ont été de grande utilité!

    Merci!!!

    Salutations

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :