Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
***[RÉSOLU] Menu déroulant dynamique sur classical (adaptable aux autres thèmes)
  • tout ça grace a ton calme et tes compétences... encore merci pour ton aide

    cordialement
  • il faut en effet rester "zen" et avoir des yeux de lynx  quand on touche au code car la moindre virgule en trop bloque tout......lol
  • point positif tu a compris "la mécanique" d'un menu dynamique"......cela servira plus tard si tu ouvre un autre blog

    le plus "ardu" pour moi est de ne pas s’emmêler les pédales" avec les "ul" et les "li"...des sous menus
  • tout est ok pour moi ....

    merci
  • Bonsoir Medhi,
    J'ai passé pas mal (beaucoup même) de temps à essayer de modifier mon CSS en vain, toujours des soucis de comptabilité entre les codes CSS que je trouvais à droite et à gauche et l'intégration dans le classical.

    Je me demande si tu pourrais jeter un coup d’œil à mon code CSS, et me dire ce que je dois modifier pour qu'il puisse se dérouler en gardant son apparence actuelle, qui me convient bien en l'état.


    /*---- Navigation ----*/
    .navigation {background: url("http://assets.over-blog.com/t/classical/images/nav.png") no-repeat; width: 926px; margin: 20px auto 36px; float: left; height: 61px; overflow: hidden; padding: 0 30px;}
    .navigation li {float: left; background: url("http://assets.over-blog.com/t/classical/images/nav-sep.png") no-repeat scroll 0 10px transparent; margin-right: 20px; padding-left: 20px;}
    .navigation li.first {padding-left: 0px;background: none;}
    .navigation li.last {margin-right: 0px;}
    .navigation a {color: white; display: block; font-weight: bold; margin: 2px 0; padding: 17px 0; text-shadow: 0px 1px 0px #000; text-transform: uppercase;}
    .navigation a:hover {text-decoration: none; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}


    Après pour l'html et les ul, pas de soucis, je m'arrangerai pour faire directement dans le code source une arborescence intéressante pour les visiteurs.

    En te remerciant par avance,

    David,

    http://onvqf.over-blog.com/


  • Bonsoir

    pour le thème classical page 1 de ce post tu a tous le detail du css et de l'html


    voici le code css


    toue la partie "navigation" est a supprimer du code original kiwi comme stipulé page 1 de ce post


    je te conseil de faire la manipulation sur un blog test avec un theme classical et quand tout est bon, tu aura juste a faire un copié/coller sur ton blog

    tu peux lire page 1

    Que doit on supprimer.

    On doit supprimer les lignes de code du menu ob dans la partie html du code kiwi (explication plus bas) pour le remplacer par ce menu "maison"

    Sur classical cela sera "div class navigation" mais sur d'autre thème cela sera div class nav...ou div class menu....etc.......


    sur classical on suprime donc  de  <div class="navigation">

    à

    <div class="cb"></div>
     
     (on laisse cette ligne)

    ici lignes a supprimer

    http://data.over-blog-kiwi.com/1/18/77/42/20150406/ob_440174_menu-a-suprimer.txt


  • Merci beaucoup Medhi, pour ta réponse et sa réactivité, je vais faire mes essais.
    Encore Merci à toi.
    Bon courage pour ton blog.
  • Bonsoir Medhi,
    Tout d'abord désolé d'avoir été si long à faire mes essais, mais j'ai eu pas mal de choses sur le feu ces derniers temps.
    Cà avance pas mal, mais c'est pas encore cela d'où mon soucis :P
    Après réflexions et essais, je n'ai pas pris le CSS que tu nous a gentiment partagé, car il me faut un module avec une seconde arborescence de sous menu pour mon blog.
    J'ai trouvé ce code assez simple pour le CSS :
    <style>
    body { font:14px/1.5em "Segoe UI", Arial, Helvetica, sans-serif; background: #bfe8f6 }
    a { text-decoration:none }
    #menu { margin-top:30px }
    /* État par défaut */
    #menu ul { margin:0; padding:0; list-style:none; text-align:center; font-size:.1em; letter-spacing:-2px }
    #menu li { display:inline-block; position:relative }
    #menu li li { display:block }
    #menu a { display:block; width:150px; height:40px; font-size:14px; letter-spacing:normal; line-height:40px; color:#fff; background:#2ab2df }
    #menu .sous-menu { background:#2ab2df url("puce.png") no-repeat 95% center }
    #menu li ul { left:-4000px; position:absolute }
    /* Survol d'un lien racine */
    #menu a:hover, #menu li:hover > a { color: #2ab2df; background: #fff }
    #menu li:hover > ul { left: 0 }
    /* Survol d'un lien de sous-menu */
    #menu li li:hover > ul { left: 150px; top: 0 }
    </style>
    et concernant l'HTML, il se présentes comme cela :
    <nav id="menu">
    <ul>
    <li><a href="#">Sans sous-menu</a></li>
    <li><a href="#">Un niveau</a>
    <ul>
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Lien 2</a></li>
    <li><a href="#">Lien 3</a></li>
    <li><a href="#">Lien 4</a></li>
    <li><a href="#">Lien 5</a></li>
    </ul>
    </li>
    <li><a href="#">Deux niveaux</a>
    <ul>
    <li><a href="#" class="sous-menu">Lien 1</a>
    <ul>
    <li><a href="#">Sous-menu 1</a></li>
    <li><a href="#">Sous-menu 2</a></li>
    <li><a href="#">Sous-menu 3</a></li>
    </ul>
    </li>
    <li><a href="#" class="sous-menu">Lien 2</a>
    <ul>
    <li><a href="#">Sous-menu 1</a></li>
    <li><a href="#">Sous-menu 2</a></li>
    <li><a href="#">Sous-menu 3</a></li>
    <li><a href="#">Sous-menu 4</a></li>
    <li><a href="#">Sous-menu 5</a></li>
    </ul>
    </li>
    <li><a href="#" class="sous-menu">Lien 3</a>
    <ul>
    <li><a href="#">Sous-menu 1</a></li>
    <li><a href="#">Sous-menu 2</a></li>
    <li><a href="#">Sous-menu 3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Sans sous-menu</a></li>
    <li><a href="#">Sans sous-menu</a></li>
    </ul>
    </nav>

    Jusque là tout va bien, mais lorsque je le rentre en remplaçant les lignes comme tu nous l'as présenté.

    Mon menu n’apparaît pas. 
    Un cas de figue que j'avais déjà eu en faisant ta manipulation
    Mais j'avais remarqué qu'en intégrant ta première ligne de code : <div id="cssmenu"><a href="http://www.mariage-franco-marocain.net/" title="Mariage franco marocain 2015"><img alt="mariage-franco-marocain-2015" class="CtreTexte" height="125" src="http://idata.over-blog.com/2/25/98/74/02-fond/mariage-franco-marocain-2014-5.png" width="968"></a>
    Cela marchait.
    Et cela est encore cas, le menu est bien visible grâce à ton code.
    image
    Mais j'ai deux soucis comme tu peux le voir, les sous menu ne sont pas visible car caché par le corps de ma liste d'articles, et de plus lorsque je modifie ta ligne de codes de ta bannière, je n'arrive pas à enlever le cadre de l'image.
    Je te donne le lien du blog test, sur lequel j'effectue ces essais : http://testmenus.over-blog.com/

    Si tu aurais quelques minutes, pour m'aiguiller sur ces deux soucis.

    En te remerciant par avance,

    David,

    body { font:14px/1.5em "Segoe UI", Arial, Helvetica, sans-serif; background: #bfe8f6 }
    a { text-decoration:none }
    #menu { margin-top:30px }
    /* État par défaut */
    #menu ul { margin:0; padding:0; list-style:none; text-align:center; font-size:.1em; letter-spacing:-2px }
    #menu li { display:inline-block; position:relative }
    #menu li li { display:block }
    #menu a { display:block; width:150px; height:40px; font-size:14px; letter-spacing:normal; line-height:40px; color:#fff; background:#2ab2df }
    #menu .sous-menu { background:#2ab2df url("puce.png") no-repeat 95% center }
    #menu li ul { left:-4000px; position:absolute }
    /* Survol d'un lien racine */
    #menu a:hover, #menu li:hover > a { color: #2ab2df; background: #fff }
    #menu li:hover > ul { left: 0 }
    /* Survol d'un lien de sous-menu */
    #menu li li:hover > ul { left: 150px; top: 0 }
  • bonsoir

    relit la page 1 de ce post.....

    je vois pas ou tu a pris le code que tu a inséré car il y a pas de bannière dans le code du menu

  • Ou mettre la partie html?  (ici sur le thème classical)
    (il faudra chercher le code du menu ob sur les autres thèmes)


    code html à inserer ci dessous


    http://data.over-blog-kiwi.com/1/18/77/42/20150406/ob_03e865_menu-html.txt


  • Bonjour Medhi,

    Merci de nouveau pour tes réponses, j'avais bien lu. Et j'ai bien un soucis en faisant comme tu le dis.
    Le menu s'affiche sur la droite sous la barre de recherche.

    image













  • En insérant ton code de ta bannière le menu s'affiche bien :

    image



    Lorsque l'insère le code à 3 niveaux tout va bien sauf que j'ai toujours le code de ta bannière ^^ et que si je mets  modifie, le menu s'affiche comme marqué avant ta réponse.


    image















  • Bonjour

    je ne comprend pas ce que la bannière fait la car dans le code du menu,il y a une partie html (les adresses du menu) 
  • pour récapituler

    le menu est composé de 2 partie...

    1 partie html qui determine les adresse des liens du menu et leur titre et sous titre


    1 partie css a mettre avant la balise style qui determine le design du menu (sa couleur, ses marges ,sa largeur etc...) 


    ___________________

    a partir de la, il faut trouver dans le code original l'emplacement du code du menu existant sur classical et ensuite insérer le html du nouveau menu ( voir page 1 du post les lignes a supprimer avant d’insérer le menu)

    il y a donc pas de code banniere dans le code du menu que cela soit en css ou en html