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 :

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é :

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 {margin: 18px; color: #a2a2a2; margin-left: 375px;}

.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.
• Top: Il 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-index: 1; 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 :

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.