Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

« Gif! C'est dimanche #24 | Page d'accueil | L'internet avec un fil »

mardi, 08 novembre 2011

Tutorial : Insérer un menu horizontal sur votre blog Hautetfort.

Vous êtes nombreux à nous demander comment insérer un menu horizontal sur votre blog. Cette opération nécessite de modifier les modèles de page HTML et est donc, aujourd'hui, réservée aux utilisateurs avancés. Pour autant elle n'est pas difficile et les plus débrouillards d'entre vous y arriveront sans problème.

Attention cependant, afin d'éviter de perdre des données, nous vous invitons à utiliser un blog de test, ou d'enregistrer préalablement l'ensemble de vos modèles de page. Nous ne pourrons pas rétablir une situation antérieure suite à une mauvaise manipulation.

Dans un premier temps vous devez vous identifier sur votre blog, et vous rendre au niveau de la section PRESENTATION rubrique Configuration avancée.

Il y a deux types de page à distinguer : 

  • Feuille de style : il s'agit de la mise en forme des éléments de votre blog. Tailles de polices, couleurs, tout est définit ici. On parle aussi de CSS.
  • Modèle de la page ... : il s'agit de la structure de votre page. On parle aussi de HTML. 


Pour commencer vous pouvez ajouter les lignes suivantes dans votre CSS au niveau de la colonne de droite. Pour la colonne de gauche, sauf si vous avez personnalisé toute votre CSS, laissez coché "Charger cette CSS".

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center; }

#menu li {
float:left;
margin:auto;
padding:0;
background-color:black; } /* Fond du menu */

#menu li a {
display:block;
width:100px; /* Taille de la cellule */
color:white; /* Couleur de la police sur les liens */
text-decoration:none;
padding:5px; }

#menu li a:hover {
color:#FFD700; } /* Couleur de la police lors du déplacement du curseur sur le lien */

#menu ul li ul {
display:none; }

#menu ul li:hover ul {
display:block; }

#menu li:hover ul li {
float:none; }

#menu li ul {
position:absolute; }

Je vous ai mis des commentaires sur les zones clés vous permettant de modifier l'apparence générale du menu. Pour aller plus loin dans la modification CSS nous vous conseillons ce tutorial.

Google Chrome 2.png

Il faut ensuite placer le menu au sein de la structure HTML de votre blog.

Avant de l'appliquer sur chaque modèle de page, commençons par une page test. Cliquez sur "Modifier le template" en vis à vis du modèle de page désiré. 

<div id="menu">

<ul>

  <li><a href="#">Item 1</a></li> <!-- Remplacer le # par l'adresse de la cible et Item par le texte. -->

  <li><a href="#">Item 2</a>

    <ul>

      <li><a href="#">Sous-item 1</a></li> <!-- Exemple de sous menu -->

      <li><a href="#">Sous-item 2</a></li>

      <li><a href="#">Sous-item 3</a></li>

    </ul>

  </li>

  <li><a href="#">Item 3</a></li>

</ul>

</div>

La seule difficulté est de le placer où vous le souhaitez dans la structure de la page. Généralement soit au dessus de la bannière (au dessus de la ligne <div id="banner-img">) ou en dessous (au dessus de </div></div><div id="left"> qui correspond à la colonne de gauche).

Vous pouvez ensuite faire vos propres tests pour voir les effets sur votre blog, le résultat peut être sensiblement différent en fonction de votre habillage de départ. 

Google Chrome.png

Si vous constatez un problème d'affichage sur Internet Explorer 7 et 8, vous pouvez ajouter le code HTML suivant au sein des balises <head> </head>.

<!--[if !IE]> <-->

<style type="text/CSS">

#menu li ul {

position:absolute;

}

</style>

<!—><![endif]—>

 

<!--[if IE 8]>

<style type="text/CSS">

#menu li ul {

position:absolute;

}

</style>

<![endif]-->

Si votre modification sur les modèles de page n'est pas prise en compte, n'hésitez pas à valider vos modifications une seconde fois, et à raffraichir la page de votre blog. Au besoin il sera peut être nécessaire de vider le cache de votre navigateur. 

Si vous avez des questions n'hésitez pas à les laisser en commentaire et à échanger avec d'autres blogueurs plus expérimentés. 

Commentaires

Excellent article, très clair en plus ! Je m'y mets dès que possible...

Écrit par : Raphaël | mardi, 08 novembre 2011

Répondre à ce commentaire

Alors super j'ai tout compris !! Mais juste un petit truc de présentation est-ce qu'on peut avoir de vrais onglets au lieu d'une barre horizontale ??

Écrit par : emanu124 | mardi, 08 novembre 2011

Répondre à ce commentaire

Il est possible de modifier l'aspect du menu en lui donnant peut être des arrondis et un fond qui nous rapprocherait de l'idée d'onglets.

Écrit par : Pascal | mercredi, 09 novembre 2011

Cool. Merci. Y'a plus qu'à bidouiller

Écrit par : Stéphanie | mardi, 08 novembre 2011

Répondre à ce commentaire

Note très bien expliquée. Merci ;)

Écrit par : Pierre Giacometti | mercredi, 09 novembre 2011

Répondre à ce commentaire

Merci à tous. N'hésitez pas à partager le résultat de vos essais :-)

Écrit par : Pascal | mercredi, 09 novembre 2011

Répondre à ce commentaire

C'est quoi un menu horizontal ?
J'ai bien une idée, mais ça ne semble pas être ce dont vous parlez.

Écrit par : Ed | mercredi, 09 novembre 2011

Répondre à ce commentaire

Une liste de liens généralement placés horizontalement au dessus ou sous la bannière principale.

Écrit par : Pascal | jeudi, 10 novembre 2011

Merci. Effectivement ça peut être utile. Je vais donc m'intéresser au contenu de cette note. :-)

Écrit par : Ed | vendredi, 11 novembre 2011

@Pascal : ah ce serait top, mais comment faire ?? (je ne suis pas la reine du CSS, juste la princesse)

Écrit par : emanu124 | mercredi, 09 novembre 2011

Répondre à ce commentaire

Vous pouvez me contacter sur support(@)hautetfort.com

Écrit par : Pascal | jeudi, 10 novembre 2011

Je rêve d'un menu en spirale !

Écrit par : Pascale | mercredi, 09 novembre 2011

Répondre à ce commentaire

Vous avez un exemple ?

Écrit par : Pascal | jeudi, 10 novembre 2011

Excellente solution quand on a beaucoup de catégories pour alléger un peu le contenu des colonnes !

J'ai essayé d'intégrer le code dans ma page d'accueil à l'endroit indiqué pour qu'il apparaisse sous ma bannière, mais rien à faire, le menu déroulant s'obstine à s'afficher à gauche de la colonne gauche, qui se trouve donc décalée aussi que la zone centrale et la colonne de droite -_-. Ca doit être un problème de div, mais je ne vois pas quoi faire...

Écrit par : Katzina | jeudi, 10 novembre 2011

Répondre à ce commentaire

Pascal : je plaisantais !!!

En tout cas, je vais essayer ce menu couché mais je vais sûrement encore tout casser et devoir appeler au secours !

Écrit par : Pascale | vendredi, 11 novembre 2011

Répondre à ce commentaire

Est-ce que j'appelais un menu déroulant?
Si c'est ça, je suis très tentée mais j'ai fait trop de bêtises auparaavant en faisant ce genre de choses pour me lancer par moi-même

Écrit par : laura | vendredi, 11 novembre 2011

Répondre à ce commentaire

Bonjour,

Non c'est un menu, non déroulant.

Écrit par : Pascal | mercredi, 16 novembre 2011

rrrrrrrrrrrrrrrrrr j'enrage comme prévu !
Lorsque je vais modifier quoique ce soit sur mon blog (couleur par exemple...) ma bannière disparaît systématiquement !!!

Je n'en suis donc pas encore au menu horizontal que JE VEUX, JE LE VEUX, je l'aurai !

Écrit par : Pascale | vendredi, 11 novembre 2011

Répondre à ce commentaire

Yeah!! Merci!!! Je n'ai jamais réussi à faire fonctionner mon menu déroulant sur Internet explorer!! Après de nombreux mois à m'arracher les cheveux je viens de repasser à un menu non déroulant!! Et voilà votre billet!! Si ce n'est pas de la magie! Je vais maintenant devoir tester tout ça!

Écrit par : Alice | dimanche, 13 novembre 2011

Répondre à ce commentaire

Salut !
Excellente idée. Ainsi on aura un blog plus présentable.
Encore faut-il y réussir ! Ce n'est pas gagné.
Je vais essayer, si je n'y arrive pas, j'irai demander de l'aide à Sylvestre, animateur d'un cybercafé de la ville.
Très bon, très fort en tout. Je fais appel à lui quelquefois quand j'ai du mal à traduire un mot anglais en français.Ou quand une phrase anglaise me pose problème.
En informatique, il est assez bon, mais il m'arrive quelquefois de lui faire découvrir des manipulations.
Comme quoi avec internet il faut toujours être sur le qui-vive comme on dit.
Cette fois, c'est sûr, je vous laisse.
BONNE SOIREE !

Écrit par : CLAVEAU | jeudi, 17 novembre 2011

Répondre à ce commentaire

J'ai réussi il y a quelques semaines à installer le menu sur toutes mes pages et je suis super contente du résultat, mes lecteurs aussi apparemment !
Il faut bien faire attention à la largeur attribuée aux cellules du menu dans la CSS : il faut que la taille des cellules multipliée par leur nombre soit bien égale à la largeur du blog (quitte à modifier celle-ci), sinon bonjour les problèmes d'alignement.
J'ai même rajouté quelques lignes dans la CSS pour avoir une ligne en pointillés qui sépare chaque sous-catégorie du menu, et le surlignage de ces sous-catégories dans une couleur différente au passage de la souris.
Bref, je ne suis pas du tout une experte, mais si jamais ça peut aider quelqu'un ! :)

Écrit par : Katzina | mercredi, 01 février 2012

Répondre à ce commentaire

Merci pour ce tutoriel qui m'a permis d'intégrer un menu horizontal sur mon blog, tout en le personnalisant.
J'ai néanmoins une critique/un souhait : plutôt que d'avoir une largeur fixe de 100 px pour l'ensemble des cellules, ce serait mieux de pouvoir attribuer à chacune des cellules une largeur variable. Cela permettrait :
- d'adapter la largeur de la cellule à la longueur de l'intitulé (un intitulé trop long est tronqué...)
- d'adapter la longueur de l'ensemble des cellules à celle du bandeau, pour avoir à droite un alignement parfait au px près...

Merci par avance pour l'astuce.

Écrit par : Thierry Issartel | mardi, 01 mai 2012

Répondre à ce commentaire

bonjour ,
J'ai suivi vos indications , parfait .
j'en ai profité pour supprimer les colonnes .
j'aimerai mettre un espace d'un millimètre entre chaque bouton , auriez vous le code et ou le placer ?
merci
cordiales
fred

Écrit par : fred | dimanche, 13 mai 2012

Répondre à ce commentaire

Chapeau fred, moi j'ai essayé et je n'y arrive pas ! Je suis pas une flèche en chipotage du HTML alors j'ai appelé au secours..., mais comme il n'y a plus ni Pascal ni Alexandra...
je vais crever sans menu horizontal !

Écrit par : Pascale | lundi, 14 mai 2012

Répondre à ce commentaire

Paix a ton âme ;)
il faut ce faire une liste sur les éléments a changer sur ton blog , la barre de menu j'adore car elle te permet de tout supprimer et de garder ainsi plus d'espace pour tes ph ... ton contenu .
J'ai réussi au bout du 2nd essai , si tu veux je t'envoie le modèle de la page d'accueil ainsi que la feuille de style .
tu te copie les tiens dans word pour avoir une sauvegarde .
tu change mes liens par les tient ainsi que les noms , tu aura également la position ou les placer et le tour est joué :))
faut s'accrocher
fd

Écrit par : fred | lundi, 14 mai 2012

Ce serait hyper méga cool.

S'accrocher comment ???

Mon mail uupascale@gmail.com

Écrit par : Pascale | lundi, 14 mai 2012

Répondre à ce commentaire

@Katzina: Je suis désireux d'ajouter moi aussi une ligne de séparation entre les éléments de mon menu (ligne pointillée ou même ligne normale).
Quel est le code correspondant dans le CSS, SVP ?
Merci beaucoup.

Écrit par : Jeanbatman | mercredi, 19 décembre 2012

Répondre à ce commentaire

Voici la section que j'ai ajoutée pour la ligne de séparation :

#menu li ul li{
border-top:dotted 1px #E6C0D9;}

On peut changer le "dotted" en "solid" pour une ligne continue ou en "dashed" pour des tirets. Il y a ensuite l'épaisseur en px et la couleur de la bordure.

Bonne chance pour finir le menu ! :)

Écrit par : Katzina | samedi, 22 décembre 2012

Merci énormément, Katzina, je vais mettre cela en place !

Écrit par : jeanbatman | samedi, 22 décembre 2012

Répondre à ce commentaire

super tuto !! merci pour ca !!
Je voudrais savoir si on pourrait y ajouter un code pour le rendre deroulant ? car actuellement mes sous menus restent fixes sur la page...

merci d'avance :)

Écrit par : Charlotte | lundi, 07 janvier 2013

Répondre à ce commentaire

Bonsoir,

J'ai suivi les instructions, mais rien ne s'affiche sur ma page sous ma bannière. Par contre si j'enlève ma bannière, le menu s'affiche.

Quelqu'un pourrait-il m'aider? Merci

Écrit par : Charly | vendredi, 25 janvier 2013

Répondre à ce commentaire

Les commentaires sont fermés.