Menu horizontal déroulant à 4 niveaux (2)

obtenir ces boutons

Créer une barre de liens horizontale (2)
DÉROULANTE A QUATRE NIVEAUX

Dans la barre de liens ci-dessus, passer avec le curseur de la souris au-dessus de "RADIOS". Un sous-menu se déploie. Descendre jusqu'à "Radios belges" : un sous/sous-menu se déploie.

18 exemples permettent de tester cette barre de liens : cliquer ici.

* * * * *
LES CODES nécessaires SONT DISPONIBLES ICI :
codes des exemples 1 à 4
codes des exemples 5 et 6
codes des exemples 7 à 9
code de l'exemple 10
codes des exemples 11 à 14
codes des exemples 19 à 22

Dans les codes fournis, un 4° niveau est disponible, LIEN 5.1.2 se subdivisant en L. 5.1.2.1 et L. 5.1.2.2.

TOUTES LES COULEURS SONT POSSIBLES : pour le fond comme pour les caractères.

* * * * *
AVERTISSEMENT : ces barres de liens déroulantes ne sont pas utilisables, sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger : les liens des sous-menus passent derrière les messages ou ne fonctionnent pas.

On peut par contre utiliser les deux barres horizontales de liens déroulantes qui sont disponibles ici.

* * * * *

On peut obtenir ici un template classique modernisé à 2 ou 3 colonnes avec une barre de liens déroulante intégrée.

notebook cahier à anneaux
Autre template avec barre de liens intégrée : design : cahier à anneaux

* * * * *
La barre de liens peut apparaître au-dessus d'un autre élément sans que cela ne soit désiré.

Exemple : au-dessus d'une image agrandie.

Pour éviter cela, supprimer deux fois z-index:999; dans le code.

* * * * *
La barre de liens déroulante peut, comme sur ce site, rester visible en permanence et ne pas défiler avec le reste du blog. C'est un avantage certain pour le site car tous les liens qui peuvent intéresser les visiteurs restent accessibles. Afficher une barre de liens en permanence

* * * * *
On peut facilement installer ces barres de liens déroulante DANS UN GADGET HTML/JavaScript, et donc SANS MODIFIER LE "MODÈLE" ("TEMPLATE") DU BLOG.

Le gadget peut être installé en quelques secondes et testé par chacun.

Comment ajouter un gadget HTML/JavaScript sur un blog.

* * * * *
Chacun remplacera les liens par les adresses (http://...) qui lui conviennent : vers l'intérieur (page, libellé, ...) ou l'extérieur du blog.

Il faudra aussi modifier les significations de ces liens (LIEN 2, ...) qui apparaissent à l'écran.

* * * * *
Le principe est simple. Un lien s'ajoute entre <li> et </li>

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

Le code target="_blank" ouvre le lien dans une nouvelle fenêtre. Cela concerne les liens extérieurs au blog, afin que les lecteurs reviennent automatiquement au blog de départ après lecture.

Si on veut ajouter un sous-niveau, on insère, juste avant </li>, les codes <ul> et </ul>. Entre ces deux derniers codes on insère (entre <li> et </li>) autant de liens que l'on veut.

* * * * *
IMPORTANT : si on insère dans un blog plusieurs barres de liens, on ne doit mettre qu'UNE SEULE FOIS DANS UN CODE LA MISE EN PAGE comprise entre <style type="text/css"> et </style>. Elle s'appliquera automatiquement à tous les boutons.

* * * * *
Les liens, mais uniquement vers d'autres pages ou sites, changent de couleur au passage de la souris : à la première ligne ("ACCUEIL" ...) ou en-dessous. La couleur ne change donc pas pour "LIEN 4" ou LIEN 4.4" qui donnent accès à des sous-menus.

Les couleurs des liens et du fond peuvent être différentes selon les mots. Par exemple, dans des codes fournis, le mot "ACCUEIL" s'affiche en rouge. Pour obtenir cela
1) remplacer : <li><a href="#">ACCUEIL</a></li>
par : <li><div class="couleurrouge"><a href="#">ACCUEIL</a></div></li>
2) entre <style type="text/css"> et </style>, juste après ".blhd33 a{...}" (ou équivalent), ajouter : .couleurrouge a {color:red;}

On peut placer des images ou une couleur à l'arrière (background) des liens :

- exemple : une couleur :

background:#ddd;

- exemple : une image :

background:url('http://storage.canalblog.com/27/32/794548/58887868.jpg') no-repeat;

* * * * *
On peut aussi corriger (à la fin du code) :

- la taille des caractères : font-size ;

- la largeur des boutons des niveaux inférieurs : width: 125px; : pour gagner de la place en largeur, les boutons de la première ligne ont une largeur réduite correspondant au mot encodé ;

- l'espace autour des caractères : padding ;

- ...

* * * * *
Ce paragraphe ne concerne pas les barres de 19 à 22. Pour celles-ci, il suffit de régler l'espace à gauche des liens : 2° ligne après <style type="text/css"> : "margin-left: 0px;"

POUR CENTRER LA BARRE DE LIENS, la LONGUEUR ("width:925px") de la barre a été encodée (2° ligne après <style type="text/css">).

Cela doit doit être corrigé lorsque les liens de la barre seront définitifs.

Une longueur encodée trop importante déplacera la barre vers la gauche. Si une partie de la barre passe à 2° ligne, c'est que la longueur encodée est trop courte.

Avec "Internet Explorer", il y aura un petit décalage. "Internet Explorer" allonge la barre de quelques pixels (px). Il faut donc :
- régler la valeur de "width" avec "Internet explorer" ;
- ou allonger la valeur de "width" (normalement 4 pixels);
- ou faire une correction uniquement pour Internet Explorer : pour cela, à la fin du code, juste après </style>, ajouter :

<!--[if IE]><style type="text/css">.d50bl{width:929px;}</style><![endif]-->

"929px" n'est qu'un exemple qui doit être adapté.

* * * * *
IMPORTANT : si les dimensions des onglets (boutons) sont modifiées, il faut aussi corriger le décalage des sous/sous-menus, en adaptant l'instruction (ou une instruction équivalente):

.d30bl li ul ul{margin: -34px 0 0 143px;

-34 : augmenter pour remonter les sous/sous-menus
143px : augmenter pour les déplacer vers la droite

* * * * *
Pour corriger la longueur de la barre de quelques pixels, il suffit d'ajouter des pixels devant ou derrière un des liens : exemple :

<span style="padding:0px 11px 0px 0px;">CONTACT</span>

* * * * *
Autres pages à consulter :

Ajouter une barre de liens horizontale (1) DÉROULANTE

Ajouter une barre de liens verticale (2) DÉROULANTE

Afficher une barre de liens en permanence

33 commentaires:

Mél a dit…

Bonjour,
Est il possible que la largeur des boutons de la première ligne soit fixe (défini) et non pas correspondant au mot encodé (variable)
Merci d'avance.

Meiser a dit…

Très facilement :

ajouter par exemple width:125px; comme ceci :

.d20bl a {width:125px;

Mais on perd de la place.


Mel a dit…

Bonsoir,
Merci, ça fonctionne très bien.
il me reste un dernier réglage :
lorsque les boutons des sous-menu et sous/sous menu (en bas puis à droite) se déroule, ceux ci sont espacés de quelques pixels.
Comment puis je réduire ces espaces autour des boutons ? (espace haut, bas et droite je pense)
la encore, je pense que je dois rajoutée une ligne de code ...
Encore merci d'avance.

Thierry et Anaïs a dit…

Bonjour,

Sur ce blog : http://deux-par-le-monde.blogspot.fr/
Si je souhaite que le menu déroulant que j'ai installé fonctionne sous explorer que dois-je faire ? Peut-on ajouter une ligne de code ?

Merci pour le temps consacré

Thierry et Anaïs a dit…

Bonjour,

J'ai trouvé mon problème. Je donne la solution si cela peut servir à d'autres.
Lorsque l'on supprime les z-index (d'ailleurs pour que cela fonctionne je n'en ai supprimé qu'un des deux) pour avoir les images devant le menu déroulant il peut arriver que sous IE le menu déroulant ne soit plus accessible car derrière le modèle de blogger. Du coup après "style" j'ai ajouté cette ligne (modifiez le 70 par la valeur que vous avez habituellement)


A+

Thierry et Anaïs a dit…

''
Enlever les deux '

axl890 a dit…

Fonctionne bien avec tous les navigateurs sauf opéra.
Avez vous une idée du problème ?
Merci.

http://autrefois-la-lumiere-industrielle.blogspot.fr/

Anonyme a dit…

j'ai un problème

LES menu fonction mai le sous menu ne fonction pas !!

aider moi SVP

Anonyme a dit…

j'ai un problème

LES menu fonction mai le sous menu ne fonction pas !!

aider moi SVP

http://maroc-hiphop.blogspot.com/

anis a dit…

merci, ça m'a très bien aidé pour finaliser le design de mon blog

http://gain-passif.blogspot.com/

Dominique a dit…

Merci pour toutes ces explications, j'ai essayé de créer des onglets sous mon titre, c'est en effet assez simple maintenant. Mon seul problème, les onglets créés s'affichent non sur un fond blanc, comme je le souhaite, mais avec le fond de mon blog en transparence (du coup ce n'est pas très visible). J'ai finalement tout retiré pour ne pas perturber mes lecteurs. Merci de votre aide...
http://devousamoi-dominique.blogspot.fr/

Meiser a dit…

Bonjour.

Le fond des onglets est toujours une image colorée.

Si ce n'est pas le cas, c'est sans doute dû à une instruction contraire du template : chercher le mot "background".


Meiser a dit…


Bonjour.

Les templates de Blogger de 2010 ne permettent pas l'utilisation de barres de menu déroulantes (par exemple disponibles sur cette page). Sous Internet Explorer, les onglets des sous-menus passent en effet en-dessous des messages.

Une alternative est proposée à la page suivante (adresse 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.

http://modifier-les-modeles-de-blogger.blogspot.be/2012/10/barre-de-liens-deroulante-en-deux-lignes.html


Meiser a dit…

Bonjour.

à Thierry et Anaïs

"Du coup après "style" j'ai ajouté cette ligne (modifiez le 70 par la valeur que vous avez habituellement)"

La ligne n'apparait pas en raison des codes < et > qui s'y trouvent. Pouvez-vous me l'envoyer à "contact" ou remplacer ces caractères par & l t ; et & g t ; (sans espace entre les lettres) ?


Daydream a dit…

bonjour

est-il possible d'avoir une barre liens fixe c'est a dire qui ne se deroule pas des onglest simples en fait,merciii

Meiser a dit…

Bonjour.

Aucun problème.

3 solutions :

1) si le blog contient des "pages statiques", choisir de placer les liens vers ces pages à cet endroit (voir sur ce site la page concernant les "pages statiques") ;

2) choisir une des barres des pages précédentes ;

3) choisir une barre déroulante mais sans mettre de liens dans les sous-menus entre <ul> et </ul>


Régis AIRAUT a dit…

Bonjour,
Pour ma part, les liens fonctionnent (j'ai modifier le code pour avoir les noms de liens que je souhaite) mais par contre quand je fait pointer mes liens vers des messages (et non vers des pages) cela ne fonctionne pas (ca me renvoie vers l’accueil au lieu du message).
Voici un exemple de message vers lequel je voudrais qu'un lien pointe: http://regisairaut.blogspot.fr/2013/03/vanuatu-le-pays-elu-le-plus-heureux-du.html
Merci merci ... Régis

Meiser a dit…

Bonjour.

Normalement cela fonctionne (comme sur ce site).

Mais vous pouvez insérer une adresse réduite comme ceci :

/2013/03/vanuatu-le-pays-elu-le-plus-heureux-du.html


Association La Bidouillerie a dit…

Bonjour,
Je rencontre un problème déjà cité mais je n'ai pas comprs la solution, mes sous menus sont caché pas le contenu de la page

IAM Chaingy Karaté a dit…

Bonjour,
Tout d’abord merci pour votre site et vos conseils qui m’ont permis de mettre en forme mon 1er blog.
Il me reste toutefois un problème. Le 3ème niveau se déroule en dessous et non pas à coté comme dans le modèle 3 et cache le 2ème niveau. J’ai essayé de faire varier les valeurs de ‘’width’’, de ‘’{margin: -34px 0 0 144px;min-height: 0;} sans résultat.
http://iamchaingykarate.blogspot.fr/ => Photos/2010-2011
Merci d’avance.

Meiser a dit…

Bonjour.

Réponse à Association La Bidouillerie :

Ces barres de liens déroulantes ne sont pas utilisables, sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger : les liens des sous-menus passent derrière les messages ou ne fonctionnent pas.

On peut par contre utiliser les deux barres horizontales de liens déroulantes qui sont disponibles à cette adresse :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/10/barre-de-liens-deroulante-en-deux-lignes.html


Meiser a dit…

Bonjour.

A IAM Chaingy Karaté :

Vous avez bien repéré les instructions qui devraient être modifiées.

Votre template est peut-être responsable.

Vous pouvez ajouter !important à la fin des instructions, ce qui neutralise une instruction contraire figurant par après : les instructions sont toujours exécutées dans l'ordre où l'ordinateur les lit.


Meiser a dit…

A : Association La Bidouillerie :

Bonjour.

Dans le mode d'emploi figure ceci :

AVERTISSEMENT : ces barres de liens déroulantes ne sont pas utilisables, sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger : les liens des sous-menus passent derrière les messages ou ne fonctionnent pas.

On peut par contre utiliser les deux barres horizontales de liens déroulantes qui sont disponibles ici :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/10/barre-de-liens-deroulante-en-deux-lignes.html


IAM Chaingy Karaté a dit…

Bonjour,
Après plusieurs heures d’essais je reviens vers vous pour avoir d’autres conseils.
J’ai dans un premier temps essayer de nombreux template, le résultat était identique (sauf certain ou le menu passait derrière le diaporama d’accueil).
J’ai ensuite supprimé le diaporama d’accueil et ajouté "!important" à la fin des instructions du code de la barre des menus. Les sous-menus se sont déplacés vers la gauche sans dépasser la largeur de la colonne. J’ai modifié le width de ".d20ve li ul" pour la largeur du sous-menu et ".d20ve li ul li a" pour la largeur de la case du sous-menu.
Comment fait-on pour insérer des commentaires dans le code (ex ; largeur colonne sous-menu) ? J’ai essayé< !-- **** --> mais cela modifie le menu.

Un autre souci, sous IE le fond d’écran n’est pas transparent et sur tablette Android, il y a des bandeaux gris en haut et en bas de la page (pas très grave…).

Encore merci pour le temps passé à nous aider.

Cordialement

Meiser a dit…


Bonjour.

1) Commentaires : exemple :

<!-- place this code on a page in your blog -->

2) Pour IE et Android, posez des questions simplifiées (tel code donne un fond non transparent en IE, ...) à d'autres utilisateurs sur le forum Blogger :

https://groups.google.com/a/googleproductforums.com/forum/#!categories/blogger-fr


Aryow a dit…

Bonjour je n'arrive pas a faire en sorte que la barre face toutes la largeurs du blog : http://cubeworld-wiki.blogspot.fr/

Tic-Tac-Toe a dit…

Bonjour,

Merci beaucoup pour cet article qui m'a beaucoup aidée !

J'ai juste une petite question : est-il possible de changer la police des textes des onglets ?

Merci d'avance !

Tic-Tac-Toe a dit…

En fait c'est bon ! :)

Tic-Tac-Toe a dit…

J'ai un autre problème : le bouton Accueil ne marche pas…

Tic-Tac-Toe a dit…

Héhé, j'ai encore trouvé ! :)

Meiser a dit…

Bravo !!!


The Allig' a dit…

Bonjour,
Merci pour ces explications, tout fonctionne parfaitement bien, mais j'ai cependant 2 questions :
- dans les onglets déroulants, la couleur ne prend pas toute la case. C'est à dire que lorsque la case est un peu grande en hauteur, la couleur s'applique bien sur le haut de la case mais le bas reste blanc. Comment y remédier ?
- d'autre part, je n'ai pas réussi à trouver comment modifier la couleur de la barre (j'ai choisi la beige de l'exemple 4). Est-ce que d20be définit la couleur ou est-ce autre chose ?
Merci d'avance !

seynabou niang a dit…

Merci pour ce tuto qui ma bien aidé !
petite question:
J'aimerais que la barre soit de la même largeur que mon blog, et je bloque je n'y arrive pas, comment faire ? Merci d'avance

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