Menu horizontal déroulant (1)

obtenir ces boutons

Créer une barre de liens horizontale (1) DÉROULANTE





Remarque préalable : la page suivante permet aussi de créer un menu horizontal DÉROULANT MAIS A 4 NIVEAUX au lieu de 2.

Passer le curseur au-dessus de "LIEN 2, "LIEN 3", "LIEN 4" ou "CONTACTS". Une barre verticale de 7 liens s'ouvre en-dessous. Cela permet d'afficher un maximum de liens dans un minimum d'espace.

Passer aussi le curseur de la souris au-dessus de "RADIOS" (à droite) sur la barre de liens en haut de l'écran.

* * * * *
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.

* * * * *
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.

* * * * *
Le code de la barre de liens figure sur la page suivante : ajouter une barre de liens horizontale (2) DÉROULANTE A 4 NIVEAUX : dans un premier temps, on peut en effet ne compléter les adresses de liens que sur deux niveaux.

Autres pages à consulter :

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

Afficher une barre de liens en permanence

10 commentaires:

axl890 a dit…

D'abord merci pour vos astuces précises et fonctionnelles.
J'ai pu intégré et adapté cette barre à mon blog
http://autrefois-la-lumiere-industrielle.blogspot.com/

Toutefois, serait-il possible d'ajouté des sous menu ?
par exemple : en pointant la souris sur 2.1: une nouvelle série de liens apparaitraient.
Merci d'avance de votre réponse.

Meiser a dit…

Consulter la page suivante.


GM a dit…

Bonjour,
Merci pour votre blog qui est très intéressant.
J’ai installé sur mon blog en construction une barre de liens horizontale, je cherche à augmenter la largeur du menu déroulant d’une part et à le déplacer vers la droite d’autre part.
Comment procéder.
Merci par avance
Cordialement GM

Meiser a dit…

1) Les largeurs des onglets sont fixées par l'instruction "px" :

exemple :

.d20ro li ul li a {width:125px;}

Si on la corrige, il faut aussi corriger la position des onglets de niveau inférieur, par exemple dans :

.d20ro li ul ul{margin: -34px 0 0 144px;min-height: 0;}

2) Normalement, la barre doit apparaître comme centrée. On peut toujours ajouter un espace à gauche avec : margin-left:30px; (par exemple).


GM a dit…

Bonjour,

Merci pour votre réponse.

Modifications apportées, résultat escompté.

Cordialement

Phanie Loving Photo a dit…

Bonjour a vous!
voila je construit un blog et j'ia deja reussi a mettre mes pages de blog a l'horizontale!
j'iamerai maintenant pourvoir faire un sous menu horizontale au niveau de la page "categories"
j'ai fiat beaucoup de site... mais je n'y comprend pas grand chose!!

et je suis sous Internet explorer!

merci d'avance si vous pouvez m'aider

Alcapone Livresacentalheure a dit…

Bonsoir,
J'aimerais intégrer un menu déroulant pour mon blog mais j'utilise déjà l'option des pages statiques comme barre de menu et je ne sais pas comment intégrer des sous liens à l'un de mes onglets. Pourriez-vous m'aider ? Voici l'adresse de mon blog : http://embuscades-alcapone.blogspot.fr/.
J'aimerais par exemple créer un nouvel onglet intitulé "Index des catégories" et pouvoir y ajouter "roman", "nouvelle", "BD", etc... Est-ce possible de faire cela sans casser la mise en page du blog ? Merci our vos réponses !

Dressingdes4saisons a dit…

Bonjour et merci pour votre blog très instructif !

Je souhaiterais installer tout en haut de mon blog http://www.dressingdes4saisons.com/ une barre horizontale de menu déroulant à 4 niveaux et surtout fixe. Ainsi, lorsque le lecteur fera défiler la page vers le bas, le menu sera toujours visible en haut de la bannière.

Pourriez-vous m'indiquer comment faire svp ?

Merci d'avance,

Cordialement,

D4S

Meiser a dit…

Bonjour.
La méthode est expliquée sur la page suivante. Un code est disponible.


Eric Lefevre a dit…

Bonjour,
Bravo pour tous ces précieux conseils que vous nous offrez !!!!!! et pour ce travail.

Je suis en train de faire mon blog ( www.oryke.ovh ) et je n'arrive pas a trouver :

1 - insérer un menu déroulant dans l'onglet BRESIL pour avoir accès aux 3 articles que j'ai écrit dans la page BRESIL.

Onglets ( tous les pays ) crées avec le gadget configurer la liste des pages

2 - insérer le drapeau français dans l'image de l'entête via un gadget ou en modifiant le modèle

Merci d'avance si vous pouvez m'aider