5 déc. 2012

Ajouter Un Menu Horizontal Déroulant Dans Blogger

Menu Horizontal Déroulant Blogger
Nous allons voir dans ce tutoriel comment ajouter un menu horizontal déroulant à quatre niveaux (Menu et Sous Menus) dans Blogger Blogspot.
Le menu de navigation à niveaux multiple vous aidera à bien organiser les catégories et les liens importants de votre blog. Ainsi, il permettra à vos lecteurs de naviguer facilement à travers le blog et le déplacement entre les différentes rubriques devient plus confort.





Comment Ajouter Un Menu Horizontal Déroulant à Blogger

Avant de commencer, vous pouvez voir la démo ici : blogueur- test.blogspot.com

Allez à "Mise En Page" et juste en dessous de l'entête de votre blog, cliquez sur "Ajouter Un Gadget".
Dans la liste proposée par Blogger choisissez "HTML/JavaScript", collez le code du menu dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".

Voici le code du menu à insérer :
 <script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */  
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul> 

Comment Personnaliser Le Menu De Navigation

  • Pour changer la couleur du fond, il suffit de changer background: #414141;
  • Remplacez toutes les signes # avec votre propres liens.
  • Remplacez LINKS x et Item x avec les titres des liens.
  • Pour créer un sous-menu à l'intérieur d'un menu il suffit de lui ajouter l'attribut "rel" comme indiqué dans le code ci-dessus : rel="ddsubmenu1" et changez le nombre du menu en conséquence.  
Note: Les liens de libellés dans Blogger prennent la forme suivante :
<a href="http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De-Libellé">Titre-De-L'URL</a>
Par défaut, les libellés Blogger affiche 20 articles par page.
Utilisez alors l'URL ci-dessous pour afficher le nombre d'articles que vous voulez:
<a href='http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De- Libellé?&amp;max-results=X'>Titre-De- L'URL</a>

X: le nombre d'articles à afficher.

Des problèmes ? des questions à propos de ce tutoriel ?
Vous pouvez me contacter via les commentaires.

103 commentaires:

  1. bravo pour ce tutoriel mais étant grand débutant, j'ai qq questions précises.
    1) comment changer la police des Menus et sous menus et sous sous menus
    2) Comment étendre le nombre de menus, par exemple 15
    3)il y a t'il un moyen d'automatiser l'archivage des posts dans les menus, sous menus etc sans être obligé de créer un lien par post et les les lister un par un dans le code.
    Désolé si ces questions semblent naïves mais je suis vraiment débutant et peu doué
    Merci d'avance
    Michael

    RépondreSupprimer
  2. Bonjour et un grand merci pour ce menu qui fonctionne très bien !
    Est il possible :
    De changer la petite flèche rouge ?
    De forcer le texte du menu principal à gauche ?
    De réduire les marges à gauche/droite du titre ?

    Merci

    RépondreSupprimer
  3. Bonjour ,
    Ces modifications se font dans le script du menu; donc pour modifier les flèches rouge par exemple vous devez :
    - télécharger le script :
    http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js

    - retrouver les liens d'images :
    http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif

    http://3.bp.blogspot.com/-NjdLcKUwgLA/T8o5oRsLskI/AAAAAAAAB3Q/CY1mCsobpdA/s1600/helperblogger.com-arrow-right.gif
    et les remplacer avec les url de vos images.

    - ensuite vous devez uploder le script et récupérer son lien.

    je sais que ce n'est pas très pratique :)
    je vais très prochainement publier un nouveau menu plus esthétique et facile à personnaliser.

    RépondreSupprimer
  4. Vivement le prochain alors :)

    Encore une question de débutant:
    Comment uploader le script ? Et où ?

    RépondreSupprimer
  5. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  6. Bonjour, Un grand merci pour ce tutoriel de menu. Cependant, étant un novice dans les pratique de HTML, je voudrais savoir s'il y a un tutoriel qui montre comment ajouter un lien pour être rediriger vers la page de rubrique sur laquelle on a cliqué ? Merci.

    RépondreSupprimer
  7. Bonjour, j'aimerai simplement savoir si il est possible de centrer ce menu, histoire qu'il ne soit pas "coller" contre le coté gauche et que le côté droit soit vide si le menu n'est pas aussi long que la largeur de la page ? Merci :)

    RépondreSupprimer
  8. salut
    merci beaucoup pour ton aide j'ai pu réaliser la modification des flèches rouge a partir du script, et j'ai un autre problème.
    je veux que lorsque en met la souris sur le sous menu, le bloc de sous sous menu (2e child) s'ouvre à gauche et pas à droite. puisque j'utilise un menu en arabe.
    merci d'avance et bonne journée.
    abdou de la tunisie

    RépondreSupprimer
  9. Bonjour,
    Eh bien je suis totalement perdue. Je ne comprends vraiment pas ce que je dois faire. Ca veut dire quoi remplacer # par mes propres liens?
    Ca fait maintenant une semaine que je veux faire un menu déroulant et rien à faire je bloque sur tout, pffff

    RépondreSupprimer
  10. @Biname, cela signifie que tu dois les remplacer par les liens des pages vers lesquelles tu souhaite sque l'utilisateur soit dirigé. il suffit de faire un copier/coller des url.

    Ma question : Quelqu'un as-t-il pu enlever la flèche rouge indiquée à côté des menus verticaux ?

    RépondreSupprimer
  11. bonjour,

    j'ai reussi a copier le code ds le html/java script

    j'ai bien les menus qui apparaisse ds mon blog

    mais je ne comprend pas comment mettre mes articles dans ce menu deroulant ou je dois copier coller mes liens ,dans le code dans la mise en page ? ou ailleur ?

    RépondreSupprimer
  12. Voici le bout du code du menu corresponant à la première colonne:

    LINK1

    Entre ces crochets > < tu remplace LINK1 par Accueil. Pour afficher la page d'accueil de ton blog tu remplace ensuite le signe # situé juste avant(entre les deux guillemets) par le lien (http...) de ton blog.

    Pour les articles il faudra mettre le titre de l'article et son lien. Si tu n'a pas encore publié tu ne pourra pas le faire.

    RépondreSupprimer
  13. merci beaucoup de votre réponse jai reussi

    une derniere question concernant les couleur jai reussi à modifier les couleur sur la barre principale du menu.
    Mais comment peut on faire pour modifier les couleur de fond et de texte à l'interieur des sous menu ? (ds lexemple c'est: ecriture noir sous fond blanc)

    merci d'avance

    RépondreSupprimer
  14. J'ai beau chercher je ne vois pas comment simplement retirer les petites flèches rouges... qui ne vont pas du tout avec le skin de mon blog :/
    merci!

    RépondreSupprimer
  15. Bonjours

    Merci pour ce menu. Il fonctionne impec chez moi sous Chrome mais sur Internet explorer (Windows 8). Les flèches apparaissent en double et je ne peut pas accéder aux sous menu.

    http://adelpheuniverse.blogspot.fr/

    Si vous pouviez m'aider. Merci d'avance

    RépondreSupprimer
  16. Bonjour, merci pour ce gadget. Comment agrandir la longueur du menu ? j'ai essayé via la personnalisation dans blogger, je n'arrive pas à décaler le menu ni le mettre à la même taille que ma bannière, du coup il y a toujours un décalage. merci !

    RépondreSupprimer
  17. Pour changer la taille de la bannière, c'est pas le plus pratique mais vous pouvez rajouter ca :   avant et après les titres de vos catégories : c'est l'équivalent d'un espace, donc en en rajoutant plusieurs, vous pouvez adapter la largeur des colonnes.
    Exemple : |LINK2| devient | LINK2 | si vous écrivez :   LINK1   au lieu de LINK1

    RépondreSupprimer
  18. Pour changer la taille de la bannière, c'est pas le plus pratique mais vous pouvez rajouter ca : & nbsp; (en enlevant l'espace après &) avant et après les titres de vos catégories : c'est l'équivalent d'un espace, donc en en rajoutant plusieurs, vous pouvez adapter la largeur des colonnes.
    Exemple : |LINK2| devient | LINK2 | si vous écrivez : & nbsp;& nbsp;LINK1& nbsp;& nbsp; au lieu de LINK1

    RépondreSupprimer
  19. Après y avoir passé une bonne soirée à comprendre comment il fallait faire, j'ai réussi à faire exactement ce que je voulais. Merci beaucoup.
    http://smb13116.blogspot.fr/

    RépondreSupprimer
  20. Bonjour et merci pour ce code. je voudrais sa savoir si il est possible de garder sélectionné l'onglet une fois activé? Si oui, pourriez vous m'orienter vers la solution?

    RépondreSupprimer
  21. Je confirme, Adelphe : ce beau menu fonctionne sous Chrome, mais pas sous IE ...
    En allant sur ton blog, j'ai vu que tu n'avais pas résolu le problème !
    Nous sommes maintenant deux à réclamer de l'aide. Merci d'avance.

    RépondreSupprimer
  22. Hello NA

    Je viens de passer sous windows 8.1 (Mise à jour) et il s'avère qu'avec la dernière version de IE (11.0.9600 pour moi) donc celle fournis avec Windows 8.1 cela refonctionne.

    Pour combien de temps, je sais pas !

    RépondreSupprimer
  23. Bonjour,
    Je souhaite juste supprimer la flêche rouge, comment faire ?
    Merci

    RépondreSupprimer
  24. Ce menu déroulant m'a l'air bien sympa, mais trop compliqué pour moi ! J'ai mis le menu horizontal tout simple...

    Merci bien pour ces petites astuces pour embellir nos blogs

    RépondreSupprimer
  25. Merci http://www.blogger.com/profile/12614402270361561257 ou @Adelphe pour ton conseil : je ne sais pas quelle version de Windows est installée actuellement sur mon ordinateur, mais je vais voir si je suis à jour ...
    Bonne journée à toi ! Signé : NA !

    RépondreSupprimer
  26. Bonjour !!!
    Merci pour le tutoriel très bien fait mais je galèèère quand même :(
    Pouvez vous m'aider concrètement en privé ?

    Merci

    RépondreSupprimer
  27. Bonjour, j'ai du mal à enlever les flèches rouges (en réalité, je ne comprend pas l'étape : "uploder le script et récupérer son lien". Quelqu'un pourrait il m'aider ? Merci beaucoup !

    RépondreSupprimer
  28. Bonjour,

    Comme une précédente question, j'ai réussi a copier le code ds le html/java script.

    J'ai bien les menus qui apparaisse ds mon blog, mais je ne comprend pas comment mettre mes articles dans ce menu déroulant et ou je dois copier coller mes liens ,dans le code dans la mise en page ? ou ailleurs ? D'avance merci.

    RépondreSupprimer
  29. Thank You So Much! Can see this drop down menu at my blog

    RépondreSupprimer
  30. Bonjour et merci pour ce tutoriel. Il fonctionne à merveille.
    Une petite question, comment puis-je modifier la largeur des onglets afin qu'ils couvrent la totalité de ma page? Je n'ai effectivement que 4 onglets qui sont "tassés" sur la droite.

    RépondreSupprimer
  31. Bonjour, tuto tres intéressant cela dit j'ai des petits soucis, mon menu déroulant n'apparait pas et je ne comprends pas pourquoi. J'ai remplacé LINK1 ITEM1 par le nom du menu et le nom du sous menu. c'est bien ça qu'il faut faire.

    RépondreSupprimer
  32. Salut TheBlogueur !
    Ton tuto est génial, ça m'a permis de rendre mon blog bien plus élégant, mais j'ai cependant un petit problème. Dans mon premier menu déroulant, 2012, j'ai voulu introduire d'autres menus déroulants tels Mars, Mai, Août, etc, mais je n'arrive pas à ajouter des lignes dans le menu, ces lignes sont mises juste au-dessus de mon premier article et je n'arrive pas à les introduire au menu déroulant horizontal :(
    Merci à toi en tout cas pour cette aide !

    RépondreSupprimer
  33. merci beaucoup !! Mais quelqu'un sait-il comment changer la couleur de la petite flèche rouge ?? Merci d'avance !

    RépondreSupprimer
  34. merci pour ce menu qui fonctionne bien ! mais comment je l'aligne de droite a gauche?

    RépondreSupprimer
  35. comment changer ou carrément enlever la flèche rouge SVP!!!

    RépondreSupprimer
  36. Bonjour, est-ce qu'un MAJ a été faite ? Et comment peut-on télécharger le script ? Le fichier est "inouvrable" sur mon PC. Merci

    RépondreSupprimer
  37. A tous ceux qui se demandent comment enlever les flèches rouges:

    Enlever le < ul > (qui est sans les espaces)
    qui est juste sous la ligne de script que vous avez titré!


    J'espère que ça servira a plein de gens! ^^'

    RépondreSupprimer
  38. merci beaucoup ! grâce à toi j'ai obtenu le resultat que j'attendais et c'est assez facile a personnaliser une fois qu'on a bien compris ( en meme temps j'ai fais une petite leçon sur le codage HTML avec ça ^^ ) si vous voulez voir le résultat -> http://lepauloo.blogspot.fr/

    RépondreSupprimer
  39. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  40. Bonjour , il y a quelque chose que je ne comprend pas .

    J'explique :

    Défois apparait la fleche rouge sur un sous menu alors que dans le script je ne vois rien qui puisse la mettre . Mes scripts de sous menus finissent bien par li li et non ul li

    Pourquoi cette fleche apparait ? ce beug fait que je ne peux pas acceder au menu du coup car il disparait dès que je met la souris desssus . Etrangement ça le fait souvent sur le premier sous menu .

    Merci de m'aider :)

    RépondreSupprimer
  41. Bonjour! Merci pour le tutoriel! J'ai cependant une question, comment changer les paramètres du modèle blogger qui forcent sur la mise en page du menu. Je m'explique : J'ai un modèle "picture window", et j'ai beau changer tout ce que je peux dans le code CSS de mon gadget, il n'y a rien à faire, mon modèle écrase tout et applique son apparence. J'aimerais changer parce que du coup mon menu déconne sur certains endroits (facilement remarquable en cliquant sur http://bigoudenblues.blogspot.fr). Quelqu'un aurait une idée?

    RépondreSupprimer
  42. Bonjour! merci pour cet excellent tutoriel, je viens de terminer l'ajout de mon menu déroulant, que j'ai réussi à personnaliser (preuve que ce n'était pas si difficile^^) : http://lecturesvesperales.blogspot.fr/ . En revanche, j'ai essayé de suivre vos instructions pour modifier la flèche rouge, mais j'ai eu un message d'erreur en essayant de l'ouvrir. Serait-il possible d'y remédier? Merci!

    RépondreSupprimer
  43. Tuto très clair, vous pouvez admirer le résultat ici :
    ► http://criticomicsleblog.blogspot.fr/
    Bravo et merci beaucoup.

    RépondreSupprimer
  44. bonjour, merci pour ce tuto, avec l'aide de mon copain nous avons réussi à faire quelque chose, cependant j'ai un bug de couleur dans mon menu principal mais ca n'est pas le plus grave.
    Je n'arrive pas à axéder aux sous menu, ni sur chrome, ni sur IE. et cela peut importe la version... Quelqu'un peut il m'aider?
    Voilà le lien de mon blog: http://tresor-nomade.blogspot.fr/

    RépondreSupprimer
  45. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  46. Bonjour
    J’ai suivi la procédure pour créer un menu horizontal à bande déroulante et voici le résultat. Le menu apparaît comme suit: je réussis à voir le menu LINK 1 À 5 ainsi que les items sous- jacent, mais lorsque je glisse la flèche pour aller consulter chaque item individuellement tout disparaît. Exemple: LINK 2 lorsque je glisse la flèche sur celui-ci, je vois apparaître verticalement Link2 Item 1 - Link2 Item 2 - Link2 Item 3 - Link2 Item 4....Lorsque je descends le curseur sur Link 2 Item1-2-3-4 tout disparaît donc je ne peux rien voir de ces items...Qui peut m'aider????

    RépondreSupprimer
  47. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  48. Salut! svp comment je peux aligner mon barre de menu de gauche à droite.
    en bas sa marche bien mais en haut non. merci.

    RépondreSupprimer
  49. Hello ! Je ne sais pas si ce site est encore en activité, je tente tout de même le coup.
    J'ai utilisé ce code pour créer un menu déroulant pour mon blog et avec un peu de persévérance, j'ai réussi à le personnaliser selon mon gout.

    Pour changer les flèches rouges par des flèches grises, j'ai suivi les indications de The Blogger laissé dans le 3éme commentaire en remplaçant ses images de flèches par les miennes dans son propre script. La dernière étape est d'uploader le "nouveau" script, de récupérer le lien et de faire le remplacement dans le code html du menu.

    Est ce que quelqu'un sait comment "uploader un script" ? Je suppose qu'il faut l’héberger quelque part, mais je n'ai aucune idée de où ni comment. Merci d'avance !

    RépondreSupprimer
  50. Et aussi : est ce que quelqu’un à une idée de ce qu'il faut faire pour centrer le menu sur la page? Faut il modifier le script là aussi, ou faire quelques changements un peu comme pour changer la couleur, la police ?

    RépondreSupprimer
  51. Merci pour votre aide ! bon continuation

    RépondreSupprimer
  52. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  53. Merci pour ce tuto , mais mnt je change mon avis et je veux le supprimer , comment faire ??

    RépondreSupprimer
  54. tres cool ton blog, u,me sauve la vie

    RépondreSupprimer
  55. bonjour, tout ça a l'air simple sauf que je suis plus que débutante sur blogger et je ne vois pas où insérer ce code... je bascule sur "Ajouter un gadget" puis "créer votre propre gadget". Lorsque je j'enregistre j'ai ces "gros mots : L'URL se termine par une extension de domaine incorrecte."
    Je me doutais un peu que cela n'allait pas fonctionner...
    Pouvez-vous m'aider ?
    merci d'avance.

    RépondreSupprimer
  56. Merci beaucoup cela m'a beaucoup aidée! Je n'ai pas réussi à changer les flèches mais pour l'instant elle me conviennent!

    RépondreSupprimer
  57. Bonjour. C'est exactement ce que je cherchais. J'ai tout de même un problème. Je n'arrive pas à mettre le lien de la page qui doit être vue lorsqu'on clique sur mon onglet ou une de ses sous-rubriques. Je ne sais pas où trouver le lien http comme vous dites... Merci.

    RépondreSupprimer
  58. Les menus ne fonctionnent plus depuis qqs joirs.
    Le fichier theblogueur_menu.js est-il toujours accessible ?
    Merci
    Cdt

    RépondreSupprimer
  59. Bonjour,
    Les menus ne fonctionnent également plus depuis qqs jours.
    Que faut-il faire pour rétablir la situation ?
    Merci.
    Cordialement

    RépondreSupprimer
  60. les sous menus ne fonctionnent plus depuis quelques jours sur mon blog
    Les fleches pour accéder aux sous menus ont disparu et l'acces aux sous menu ne se fait plus!!!!
    Help

    RépondreSupprimer
  61. Résolu :-)
    j'ai eu le même problème, le fichier theblogueur_menu.js n'est plus accessible.
    J'ai réussi à en trouver une version sur le web (http://blogavecblogger.blogspot.fr/2014/03/creer-un-menu.html). Il faut donc remplacer :


    Par : rendez-vous sur http://fra790.blogspot.fr/
    Afficher le code source de la page et copier les lignes 613 à 617
    ( à )
    Ligne 615 : code minifié du js

    et pis roule :-)
    A bientôt

    RépondreSupprimer
  62. Mince, mes commentaires html ne sont pas passés, normal me direz-vous.
    Les voici :
    "code remplaçant TheBlogueur_Menu.js"
    jusqu'à "fin code remplaçant TheBlogueur_Menu.js"

    RépondreSupprimer
  63. Merci merci et merci Laurent, tu me sauves la vie... j'administre un blog éducatif et j'utilise ce fameux bandeau... et donc en pleine rentrée et bien c'était la galère.
    Donc ta solution a résolu mon problème.

    Encore merci.

    RépondreSupprimer
  64. Super merci, ça marche à nouveau :D

    RépondreSupprimer
  65. Super !!! merci beaucoup Laurent, tout fonctionne de nouveau.

    Bonne soirée.

    RépondreSupprimer
  66. Pour le problème de Menu,je vous propos un dépannage sur mon blog
    voir en bas de cet article
    http://blogavecblogger.blogspot.fr/2014/03/creer-un-menu.html

    J'ai repositionné le fichier manquant et vous donne une nouvelle adresse qu'il suffit de changer dans le début du code du menu

    RépondreSupprimer
  67. de même sur Blogavecblogger.blogspot.fr (http://blogavecblogger.blogspot.fr/2014/03/creer-un-menu.html) pour un menu avec des flèches blanches (au lieu de rouge) j'indique une adresse fonctionnelle du fichier Menu.js modifié avec icônes de flèches blanches
    Cdt

    RépondreSupprimer
  68. Merci Gilles et Laurent, bravo les gars.
    Bonne continuation !
    http://www.autrefois-la-lumiere.com/

    RépondreSupprimer
  69. Bonjour Laurent !
    Je n'arrive pas à comprendre comment faire pour que le menu déroulant soit de nouveaux visible...
    Pourriez vous venir me l'expliquer à cet email : Audrey.cori@gmail.com s'il vous plait ?
    C'est un blog très important que je ne peux pas laisser sans menu longtemps...
    Merci à vous !

    RépondreSupprimer
  70. Voir cet article qui donne toutes les explications

    http://blogavecblogger.blogspot.fr/2014/03/creer-un-menu.html

    RépondreSupprimer
  71. Bonjour,

    j'ai ajouté une section blogspot sur mon forum, et un sujet sur ce problème.
    Merci à Gilles de mettre à disposition la bibliothèque javascript.
    Audrey, je t'ai répondu par mail, ça fonctionne ?
    A++

    RépondreSupprimer
  72. Bonjour

    Le code sur http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js n'est plus disponible
    Pourriez vous nous fournir une nouvelle source pour ce fichier ?

    Merci

    RépondreSupprimer
  73. Bonjour,

    Merci beaucoup à Gilles pour la résolution du non affichage des sous-menus ! C'est très clair et surtout cela fonctionne !

    RépondreSupprimer
  74. bonjour de nouveau le menu déroulant ne fonctionne plus :(

    RépondreSupprimer
  75. Bonjour,
    Je ne sais pas pourquoi mais quel que soit le tuto que je lis sur un blog je n'arrive jamais à creer mes pages pourrais tu m'aider ?

    RépondreSupprimer
  76. Bonjour, je viens de créer un nouveau blog dont voici l'adresse: https://ecussonspenitentiaires.blogspot.fr/
    J'ai créé un menu déroulant sur 3 niveaux. Quand je vais dans le menu déroulant de "RECENSEMENT", j'ai des pages qui s'affiche correctement comme celle de "Unités Cynotechniques", par contre d'autre comme celle de "ENAP" m'affichent un méssage d'erreur: " Désolé, la page que vous recherchez dans ce blog n'existe pas." Pourquoi?.
    2 eme problème que je n'arrive pas à résoudre: dans le menu déroulant "recensement/disp" toutes les pages m'affichent également ce message d'erreur: " Désolé, la page que vous recherchez dans ce blog n'existe pas." Pourquoi?.
    Merci beaucoup pour l'aide que vous pourrez m'apporter dans la compréhension et la résolution de mes erreurs de script (complet dans commentaire suivant car pas assez de place).

    RépondreSupprimer
  77. script trop long, je peux vous l'envoyer par email si vous me contactez, merci d'avance

    RépondreSupprimer
  78. @Eric Rombeaux
    Dans vos liens, il ne faut pas de '/' à la fin (erreur 404):
    https://ecussonspenitentiaires.blogspot.fr/p/enap.html ok
    https://ecussonspenitentiaires.blogspot.fr/p/enap.html/ nok
    Vérifier les http au lieu e https

    Dans votre script, il y a 'ddlevelsmenu.setup("ddtopmenubar", "topbar")' encadré par une ouverture et fermeture de la balise javascript (script type="text/javascript"), alors qu'on est déjà dans une section de type javascipt. Pas la peine d'ouvrir une deuxième fois le javascript, et surtout, ne pas le fermer avant que le js soit terminé.

    Problème deuxième menu : il faut fermer la balise li après le lien ddsubmenu2 :
    li
    a href="https://ecussonspenitentiaires.blogspot.fr/p/disp.html/" rel="ddsubmenu2"...
    /li <--MANQUANT
    Ca devrait aller mieux, à tester
    A bientôt

    RépondreSupprimer
  79. Bonjour Laurent,

    Tout d’abord, merci beaucoup pour votre réponse ultra rapide !

    J'ai tout testé. En fait tout le script est bon sauf les slashs à la fin des liens que j'avais oublié de supprimé. Merci beaucoup.

    Pour le reste j'ai testé mais ça m'affiche du texte sous les onglets, je suis donc revenu en arrière et tout semble fonctionner correctement: https://ecussonspenitentiaires.blogspot.fr/

    Encore merci !
    bien cordialement, Eric

    RépondreSupprimer
  80. Cool :-)
    J'avais raté la fermeture /script du js sur la même ligne... dsl

    En observant le flux, il reste pas mal de ressources non trouvées (GET https://ecussonspenitentiaires.blogspot.fr/ddlevelsfiles/arrow-down.gif 404 () par exemple). Visible avec la vue développeur sous chrome (F12 onglet console)
    Si vous voulez que vos pages s'ouvrent dans le même onglet, il ne faut pas 'target="_blank"' dans vos liens.

    Bon courage
    A bientôt

    RépondreSupprimer
  81. Bonjour,

    J'utilise ce menu depuis deux ans et depuis peu il ne se déroule plus....

    RépondreSupprimer
  82. Bonjour, cela marche t'il sur un blog avec affichage dynamique ? merci

    RépondreSupprimer
  83. bonjour,
    Concerne :Comment Ajouter Un Menu Horizontal Déroulant à Blogger

    J'ai copié le code comme indiqué, mais rien n'apparaît ?

    RépondreSupprimer
  84. merci
    http://virtuelcampus.univ-msila.dz/facscience

    RépondreSupprimer
  85. merci pour vos efforts
    http://virtuelcampus.univ-msila.dz/facscience

    RépondreSupprimer
  86. Bonjour, j'ai suivi votre tuto (après avoir essayé celui de NoTuxedo que j'avais trouvé avant) mais j'ai un souci avec les sous-menus. Quand je passe sur le libellé (qui remplace LINK5), il ne se passe rien. J'ai remplacé les "LINK X" par mes titres d'onglets, les "ITEM X" par le nom des libellés, les # par les adresses (copiées-collées depuis les pages du site). Je ne vois pas ce que je pourrais changer de plus. Auriez-vous une idée ?

    RépondreSupprimer