barre de liens deroulante en deux lignes

obtenir ces boutons

Menus horizontaux déroulants pour les
templates de 2010 de Blogger

Avec les TEMPLATES de BLOGGER de 2010, les onglets des sous-menus ne fonctionnent pas sous INTERNET EXPLORER et passent en-dessous des messages. Or, un grand nombre de lecteurs utilisent Internet Explorer ... Explication : avec ces templates, les différentes zones (en-tête, articles, barres latérales, ...) sont devenues étanches les unes par rapport aux autres.

On peut éviter cela en utilisant une des quatre méthodes proposées ci-dessous.

1) On peut d'abord placer la barre de liens tout en haut de la page, et ajouter en-dessous (dans l'en-tête) une image ou un diaporama au-dessus desquels les onglets des liens secondaires pourront s'afficher sans problème.

Exemple : cliquer ici.

2) S'il y a une image en haut de l'écran, on peut aussi forcer les onglets des liens secondaires à se déployer vers le haut, au-dessus de cette image.

Pour obtenir cela, il suffit de remplacer, pour chaque barre de liens secondaires,

<ul>

par :

<ul style="margin-top:-200px;" >

en adaptant la hauteur (-200px) en fonction du nombre d'onglets appelés par le lien principal. Il faut une distance précise pour que les onglets des liens secondaires apparaissent juste au-dessus des onglets de la ligne principale, sinon on n'y aura pas accès.

3) On peut aussi utiliser une barre de liens classique s'ouvrant vers le bas comme dans cet exemple. Des explications et le code nécessaire sont disponibles sur la page suivante accessible ici.

4) On peut aussi utiliser un code plus simple décrit ci-dessous : les onglets principaux se trouvent sur une ligne horizontale ; en passant avec le curseur de la souris au-dessus de certains d'entre eux (3, 4 et 5), un sous-menu apparaît dans une seconde ligne horizontale.

Cliquer ici pour voir un exemple.

Ce gadget peut être utilisé avec n'importe quel template de Blogger de 2010.

L'intérêt de ce gadget, comme pour tout menu déroulant, est que, sur un espace réduit, une ligne d'une dizaine d'onglets peut donner accès à une centaine d'autres onglets.

Sauf avec Internet Explorer, les coins supérieurs des onglets peuvent être arrondis : cliquer ici pour voir un exemple.

* * * * *
AVERTISSEMENTS.

1) Conseils de mise en œuvre pour toujours pouvoir revenir en arrière en cas de problème :
- Créer un second blog pour tester les modifications.
- Sauvegarder une copie du template.
- Déplacer la barre de liens existante dans la colonne latérale (avec l'écran "Mise en page").

2) Ce type de présentation des liens en deux lignes est adopté par de nombreux sites internet : voir un exemple ici.

Il ne sera toutefois esthétique que si les deux lignes ont une longueur proche, ou, en d'autres termes, si le nombre de liens dans les sous-menus est proche du nombre de liens dans la première ligne horizontale.

Si ce n'est pas le cas , on préférera la barre de liens classique présentée à la page suivante.

3) Il ne faut pas réduire la taille des liens de la seconde ligne. En effet, pour passer d'un lien à l'autre, il faut y déplacer le curseur de manière horizontale, ce qui est difficile si la hauteur des liens est trop faible.

* * * * *
Pour le second menu, l'arrière des onglets de la barre de liens bleue est une image.

Le code pour obtenir cette barre de liens bleue est le suivant :

<div class="d20bl">

<li><a href="#">ACCUEIL</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 2</a></li>

<li><a href="#">LIEN 3 ↓</a>

<ul><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.7 test test</a></li></ul></li>

<li><a href="#">LIEN 4 ↓</a>

<ul><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4</a></li></ul></li>

<li><a href="#">LIEN 5 ↓</a>

<ul><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.7</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 6</a></li>

<li><a href="http://radios-en-ligne.blogspot.com/" target="_blank">Radios</a></li>

<li><a href="http://televisions-en-ligne.blogspot.com/" target="_blank">Télévisions</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">CONTACT</a></li>

<a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a>

</div>

<style type="text/css">
.d20bl{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;margin-left:20px;height:70px;}
.d20bl li ul{display:none;position:absolute;left:50px; top:35px !important;width:736px;}
.d20bl li:hover ul{display:inline;}
.d20bl li ul li{position:relative;min-height:1%;}

.d20bl a {color:white !important;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(38,66,80);border-left: 1px solid rgb(38,66,80);padding:8px 14px!important;text-decoration: none; font-weight:bold !important;font-family: arial!important;font-size: 14px !important;line-height: 18px !important;}

.d20bl a:hover{color:red !important;background:white !important;}

</style>

<!--[if IE]><style type="text/css">.d20bl li ul{top:34px !important;width:765px !important;}</style><![endif]-->

Ce code doit être placé dans un gadget HTML/JavaScript ajouté sur le blog.

Rappel : comment ajouter un gadget HTML/JavaScript sur un blog.

* * * * *
La largeur fixée par "width" n'a qu'une utilité secondaire.

1) On peut ajouter autant d'onglets qu'on veut sans changer cette largeur.

2) Mais quand c'est terminé, cela permet de donner à la SECONDE LIGNE une longueur égale à la première et de passer de la première ligne à la seconde depuis les onglets de droite, même s'il n'y que peu d'onglets à gauche sur la seconde ligne.

3) Il y a deux instructions "width", une pour Firefox, la seconde pour Internet Explorer.

* * * * *
AUTRES RÉGLAGES.

Tous les codes concernant les onglets ne sont pas entièrement ... compatibles d'un template de 2010 à l'autre. Il faut donc procéder à un ou deux changement(s) mineur(s) dans le code du gadget.

1) Pour tous les templates de 2010 sauf "SIMPLE", l'espace à gauche de la seconde ligne est trop grand. Changer .d20bl li ul{.....left:50px;.....} : left:50px; devient par exemple left:-5px;.

2) Pour le template "SARL FANTASTIQUE", l'espace entre la première ligne et la seconde s'agrandit. Il faut donc diminuer l'espace entre les deux lignes et diminuer d'un pixel (px) à la fois à la fin du code : .d20bl li ul{..... top:35px;.....}

Pour l'affichage avec Internet Explorer, diminuer top:34px dans la dernière ligne : <!--[if IE]><style type="text/css">.d20bl li ul{top:34px !important;.....}</style><![endif]-->

Sans cela, le passage du curseur de la souris entre les onglets de la première et de la seconde ligne ne se fera pas.
* * * * *
CHANGER LES LIENS.

Chacun remplacera les adresses des liens qui figurent dans l'exemple par ses propres adresses.

Un lien est encodé comme ceci : <li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 2</a></li>

Pour ouvrir le lien dans la même fenêtre (et pas une autre), supprimer : target="_blank"

Un onglet qui donne accès à un sous-menu s'encode comme ceci : <li><a href="#">LIEN 3</a><ul>.....</ul></li>

* * * * *

CHANGER LA COULEUR DES MOTS DANS LES LIENS.

Dans l'exemple, les textes des liens sont affichés en blanc et rouge. Pour changer la couleur, corriger "white et "red" dans le code.

Le paragraphe (à la fin) commençant par ".d20bl a{" affiche les liens, et le paragraphe suivant commençant par ".d20bl a:hover{" affiche les liens quand on passe au-dessus avec le curseur de la souris.

On peut aussi utiliser les couleurs par défaut du template en supprimant les deux instructions "color: ...".

* * * * *
CHANGER LES COULEURS DE FOND.

Le paragraphe (à la fin) commençant par ".d20bl a{" affiche les liens, et le paragraphe suivant commençant par ".d20bl a:hover{" affiche les liens quand on passe au-dessus avec le curseur de la souris.

L'arrière des onglets de la barre de liens est une image bleue.

Le code pour obtenir la barre de liens bleue est le suivant :

background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG')

On peut d'abord utiliser les couleurs de fond par défaut du template en supprimant les deux instructions "background: ...".

Pour changer de couleur de fond, on peut supprimer l'image de fond "url('...')" et modifier la couleur de fond background:rgb(38,66,80).

On peut aussi changer l'image de fond et la couleur par défaut, en utilisant les codes ci-dessous :

- couleur rouge :
background:rgb(90,0,0) url('http://1.bp.blogspot.com/-LXIr9bIgAVU/TqVNn8_OWyI/AAAAAAAAA3Y/9r095VTWVKA/s400/onglet%2Bfond%2Brouge%2B3.PNG')

- couleur verte :
background:rgb(78,95,71) url('http://4.bp.blogspot.com/-fc95Tll9pnI/TqVNzqTuHtI/AAAAAAAAA3k/G_tKQjUdlS8/s400/onglet%2Bfond%2Bvert%2B3.PNG')

- couleur beige :
background:rgb(135,94,74) url('http://3.bp.blogspot.com/-rCJEBEaB0yI/TqVN_oRZ7GI/AAAAAAAAA3w/7SsUbTbyLBM/s400/onglet%2Bfond%2Bbeige%2B3.PNG')

* * * * *
UTILISER DES COULEURS DIFFÉRENTES POUR LA SECONDE LIGNE.

Méthode : juste avant </style> (à la fin du code), ajouter le code ci-dessous et modifier les couleurs selon ses besoins. Le premier paragraphe affiche les liens, et le paragraphe suivant affiche les liens quand on passe au-dessus avec le curseur de la souris.

.d20bl li ul a {color:white !important;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(38,66,80);border-left: 1px solid rgb(38,66,80);padding:7px 9px;text-decoration: none; font-weight:bold !important;font-family: arial;font-size: 18px;line-height: 18px;}

.d20bl li ul a:hover{color:red !important;background:white;}

* * * * *
ARRONDIR LES COINS SUPÉRIEURS DES ONGLETS.

Sauf avec Internet Explorer, les coins supérieurs des onglets peuvent être arrondis.

Les arrondis sont ajoutés d'office par les templates "FENÊTRE D'IMAGE" et ÉTHÉRÉ". Pour les autres, ajouter, juste avant </style> (à la fin du code), les instructions suivantes :

.d20bl li a {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius:10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Cliquer ici pour voir ce que cela donne.

28 commentaires:

Chris Tophe a dit…

Merci, ça marche!
Y a t-il un moyen de placer les sous-menus centrés sous le menu concerné (exemple avec le menu contact)?
Pour ma part j'ai rajouté des points et des espaces avant le nom de mon sous-menu. Mais ça me semble être une solution rustine :)

J'ai l'impression d'abuser, mais j'ai une autre question:
Comment faire pour que les liens sous-menus ne s'ouvrent pas dans une autre fenêtre mais dans la même?
Merci pour le boulot que vous faîtes

Meiser a dit…

Bonjour.

1) Il y a moyen de changer le code mais il y a pour l'instant un décalage de +/- 2 cms vers la droite. A revoir.
2) Ce n'est pas la solution idéale car on se prive de tous les onglets possibles plus à gauche.
3) Supprimer target="_blank" dans les liens.


Chris Tophe a dit…

MERCI

natureblog a dit…

bonjour,je n'arrive pas a insérer mes messages dans ma barre de liens en sous menu ,aidez moi s'il vous plais

Meiser a dit…

Bonjour.

Afficher un message seul.

Copier l'adresse en haut de l'écran.

Coller cette adresse dans le code à la place d'une des adresses qui s'y trouvent comme exemples.


Nima a dit…

Bonjour!
les onglets du menu principal apparaissent les uns en dessus des autres... a quel moment me suis je trompee!?
merci d avance!

Meiser a dit…

Bonjour.

En modifiant la valeur de "width".

S'il n'y a pas assez de place, on passe à la ligne suivante.


Noushka a dit…

Oui, merci, j'avais fini par comprendre pour le " après fr/
Pourriez-vous me dire à quel endroit dans le code je peux changer la largeur du menu déroulant?

Meiser a dit…

Bonjour.

Il y a deux instructions "width", une pour Firefox, la seconde pour Internet Explorer.

A augmenter progressivement en fonction des onglets ajoutés.


Noushka a dit…

En fait je pourrais supprimer la dernière ligne qui s'adresse à IE?
Plus précisément, je suis sur Linux-Ubuntu avec Firefox.
Si j'ai bien compris, la largeur n'augmentera que si je mets plus d'onglets...
Un grand merci pour votre aide!
Cdt,

Meiser a dit…

Bonjour.

Il faut laisser la ligne concernant IE car sinon les lecteurs qui ont IE ne pourront pas lire votre blog correctement.


Noushka a dit…

Oups!!
Non, je n'ai rien enlevé avant d'avoir votre réponse!
Un grand merci, peut-être que je repasserai vous demander d'autres conseils à l'occasion, vous être très "clued-up" comme on dit en anglais! ;-)
Cordialement,

Meiser a dit…

Bonjour.

Pour être complet, la largeur fixée par "width" n'a qu'une utilité secondaire.

Vous pouvez ajouter autant d'onglets que vous le souhaitez sans changer cette largeur.

Quand c'est terminé, cela permet de donner à la SECONDE LIGNE une longueur égale à la première et de passer de la première ligne à la seconde depuis les onglets de droite, même s'il n'y que peu d'onglets à gauche sur la seconde ligne.


Noushka a dit…

Ok, mais j'aimerais bien quand même que ce menu ait la même largeur que celle du blog.
Je ne sais pas où faire ce changement...

Meiser a dit…

Bonjour.

Il suffit que la barre ait le même fond que les onglets.

Ajouter
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG);

Juste après :
width:736px; (modifié selon vos besoins)


natureblog a dit…

bonjour, j'ai fait ce que vous m'avez demander mais ça ne marche pas surtout avec le sous menu j'ai un message d'erreur qui dit que la page que je cherche n'existe pas !

Meiser a dit…

Bonjour.

Communiquez-moi :
1) l'adresse à atteindre ;
2) la ligne du code où cette adresse a été encodée.


Noushka a dit…

Un grand merci Meiser, ça marche!!
Bien amicalement!

maurice a dit…

Bonjour,

J'ai appliqué votre manière de faire pour mon blog http://guzzismalltwins.blogspot.fr/2012/02/les-origines.html
Ca marche mais je voudrai savoir comment faire pour que la barre du bas(celle qui apparait quand je passe sur une des cellules de mon menu) soit centré par rapport à la cellule active sur laquelle je suis. Je sais bien que je pourrai rajouter des cellules vides mais si il y avait un autre moyen.....

merci de votre aide,

Meiser a dit…

Bonjour.

Cela poserait des problèmes à droite de la barre principale car il y aurait de moins en moins de place pour les sous-menus.

On peut cependant faire deux choses :
1) décaler à droite la seconde ligne : remplacer 50 px, par exemple par 212px, et diminuer d'autant la largeur totale de 736px dans :

left:50px; top:35px !important;width:736px;

2) utiliser le code se trouvant à la page suivante, avec un sous-menu qui se déroule verticalement en-dessous de chaque lien de la première ligne.


Meiser a dit…

Bonjour.

Je vois ce que vous avez réalisé.

1) Il serait sans doute mieux que les deux lignes commencent au même endroit.

Pour cela il suffit de remettre left:50px; dans la seconde ligne ou de réduire margin-left:20px; dans la première ligne ci-dessous :

.d20bl{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;margin-left:20px;height:70px;}
.d20bl li ul{display:none;position:absolute;left:50px; top:35px !important;width:736px;}

2) La seconde ligne pourrait descendre un peu pour ne pas recouvrir le bas de la première ligne : corriger top:35px !important; dans la seconde ligne.


Meiser a dit…

Bonjour.

Rappel : des menus déroulants sont disponibles avec les TEMPLATES de BLOGGER de 2010 et fonctionnent sous INTERNET EXPLORER .

Exemple avec des sous-menus verticaux : http://test-barre-deroulante-3.blogspot.be/

Exemple avec un sous-menu sur une seconde ligne horizontale :
http://test-barre-deroulante.blogspot.be/


Sapristi a dit…

Bonjour,

Le code pour utiliser des couleurs différentes pour la seconde ligne ne marche pas pour un sous-menu vertical.

Est ce qu'il existe un autre code qui marche pour avoir 2 couleurs (une pour les onglets, une pour les sous-onglets verticaux)?

En tout cas merci, vos tutoriels m'ont beaucoup aidée !!

Meiser a dit…

Bonjour.

Sur quel blog avez-vous installé le gadget ?


Bernard Sublet a dit…

Bonjour,
Petit souci avec le menu déroulant type 3 (et les autres aussi quelquefois après essai)
Je n'arrive pas à "choper" le menu qui se déroule sous la barre au passage de la souris !!!
Presque à chaque fois le menu remonte avant que je puisse sélectionner un libellé. Javais changé la couleur de fond (bleu > rouge) avec le code mais ça le fais encore.
Assez déroutant pour un blog d'association .

OS ubuntu 12.04 LTS sur Easy note Packard Bell
Mon template est Awesome
blog : leblogduclals.blogspot.com

Merci pour votre aide

Laura lexo a dit…

Bonjour,

1) On peut d'abord placer la barre de liens tout en haut de la page, et ajouter en-dessous (dans l'en-tête) une image ou un diaporama au-dessus desquels les onglets des liens secondaires pourront s'afficher sans problème.

Exemple : cliquer ici.


Le modèle de liens que vous donnez dans l'exemple me plait beaucoup, fond blanc, plusieurs liens, ...

Comment l'obtenir? Je galère

Cordialement

seynabou niang a dit…

BonjourMeiser !
Merci pour ce tuto
je l'ai suivi à la lettre, et j'obtiens le bon résultat. Mais j'aimerais que la barre soit de la même longueur que mon blog, comment faire ? Merci !

http://www.wanderlust-alafrancaise.com/

Thomas Brouard a dit…

Bonjour Meiser,

si tu es toujours là, ma barre de menu s'affiche mais en modifiant un peu ton code, les sous-menus ne se décalent plus sur la droite. Que faire stp?