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)
  • C'est quoi un menu dynamique ?:

    il s'agit d'un menu avec des sous menu déroulant qui apparaissent au passage de la souris

    Chaque intitulé de menu ou de sous menu renvoyant par un lien vers un article, une page, une categorie, un album photo, une archive ou un lien sur un site externe

    Le menu dynamique proposé ci dessous remplacera le menu ob

    il est inspiré du menu de mon blog visible ici (theme legacy structure)
    http://www.mariage-franco-marocain.net/

    il vous suffira de modifier ensuite tout les intitulés et tous les liens pour l'adapter à votre blog

    Rendu sur un de mes blogs test avec le thème classical
    http://mehditest2.overblog.com/


    Principe du menu


    il y aura une partie css qui va déterminer le design du menu et une partie html qui seront les intitulés et liens du menus

    il va donc falloir intervenir à 2 endroits dans le code kiwi (css et html)


    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

    __________________

    Pour la partie css


    On peut laisser les lignes css du code kiwi relatif au menu original..elle seront remplacées par l'ajout du code du menu dynamique dans la partie css.

    on pourra bien sur, par la suite, changer les couleurs du menu, des texte etc.... en modifiant les code couleur de son css


    Ou doit on mettre la partie css du menu dynamique?
    la partie css ci-dessous se mettra avant la derniere balise </style> de votre code kiwi qui marque la fin du css de votre blog, vous verrez en dessous "head" et "body"

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

    récapitulatif;
    un ensemble de lignes de code a supprimer (ancien html du menu ob..;et 2 ajouts: 1 en css et l'autre en html pour remplacer le html supprimé.


    ________________________________

    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

    ce code html va se mettre vers la ligne 952  (1049 chez moi car mon code a subit pas mal d'ajout de ligne)......( juste aprés les code de la class "search" (le menu recherche)

     <div class="search">
                                <form class="search" method="post" action="/search">
                                    <input type="text" name="q" placeholder="{{ Lang.Get('Search') }}..." value="{{ Search }}" />
                                    <input type="submit" value="{{ Lang.Get('Search') }}" />
                                </form>
                            </div>
                        {% endif %}

    le html se met ici

    vous verrez a la fin du html


                        </div>
                        <div class="cb"></div>   (la class cb et en dessous la class main)
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="wrap">
                   <div class="content">
                        <div class="content-left">



    copie d'ecran du debut du code html..


    image



    copie d'ecran de la fin du html

    image


    copie d'ecran du css avant la derniere balise style

    image


    conseil d'integration


    En premier, créer un blog test avec le même thème.  vous travaillerez sur ce blog test et quand votre menu sera opérationnel vous ferez des copier/coller sur le blog original

    Bien faire attention au balise marquant le debut et surtout la fin du code html.

    si vous supprimer quelques sous menu, faire attention à bien supprimer les "ul" et "li" correspondant.

    sur le meme principe vous pouvez ajouter des sous menus suplémentaires.

    _______________
    j'espère ne pas avoir été trop "confus"..... ;)


    _______________________________

    Pour le theme elegant press


    code html ci-dessous
    http://data.over-blog-kiwi.com/1/18/77/42/20150406/ob_e43e89_html-elegant-press.txt

    Le html ira de (vers ligne 1800)

     </form>
                        {% endif %}
                        <br class="clear" />
                    </div>
                {% endif %}
            ici
                  <!-- menu -->  (debut du code html du menu elegant press)
                <nav class="menu" >
                    <ul class="nav">
                     <!--accueil-->
                    <!--menu  déroulant CCM-->               
                    <div id='cssmenu'>
                    <ul>

                  A


     <li><a href='#'><span>Cuisine</span></a></li>
                       <li><a href='#'><span>Contact</span></a></li>
                       <li><a href='http://about.me/mehdiblog' target="_blank"><span>A propos?</span></a></li>
                    </ul>
                    </div>
                </nav>
                       
        ici NAV marque la fin du menu sur elegant press

                <!--ARTICLE-->
                {% if isSpecial or isSingle %}
                    <div class="box">
                        <div class="container_12">
                            <div class="content">


    le css est legerement different pour s'adapter au theme elegant press (voir ci dessous)

    http://data.over-blog-kiwi.com/1/18/77/42/20150406/ob_07705f_css-menu-elegant-press.txt

    dans le code elegant press en dessous vous verrez


                /********************************************
                ***************** SLIDESHOW *****************
                ********************************************/
                .slideshow {
    display:none;
    }{
                    position: relative;
                }

    le css se met avant slideshow

    rendu sur le theme elegant press

    http://testmehdi.over-blog.com

    ______________________

  • Medhi, merci pour toutes ces bonnes infos, j'ai fait ce que tu as dit ici :
    http://essaisitecassiopee.over-blog.com/
    par contre maintenant lorsque j'écris un article (historique), il apparait aussi en dessous de ma ligne de menus et fait apparaitre le terme menu. Comment faire pour que ce ne soit pas le cas.
    Par avance merci
  • il y a une erreur sur le menu.....

    verifie le html (les "ul" et "li" )
  • il se peut aussi que tu a trop d'intitulé..le menu ne peut pas les afficher sur toute la largeur

    le menu est pas prevu pour un retour a la ligne
  • en simulation je vois la balise </nav> qui marque la fin du menu html et en dessous je vois encore du code concernant le menu ......


  • </nav>
    <li>
    <a href="#" sl-processed="1">MENU</a>
    <ul>
    <li>
    </ul>
    </li>
    <li>
    <a href="http://essaisitecassiopee.over-blog.com/mail/form" sl-processed="1">S'abonner</a>
    </li>
    <li class="last">
    <a href="http://essaisitecassiopee.over-blog.com/contact" sl-processed="1">Contact</a>
    </li>
  • au dessus tu peux lire

    </ul>
                    </div>
                </nav>
                       
        ici NAV marque la fin du menu sur elegant press

                <!--ARTICLE-->
                {% if isSpecial or isSingle %}
                    <div class="box">
                        <div class="container_12">
                            <div class="content">
  • copie d'ecran ci dessous de la fin de mon menu html sur un blog test utilisant elegant press

    http://img.over-blog-kiwi.com/1/54/56/31/20150410/ob_09cfbe_elegant-press.jpg

    image


    adresse du blog test!

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






  • ok merci je vais essayer tout ça

  • Merci désormais tout fonctionne
  • Bonjour

    je viens de regarder ton blog: FÉLICITATIONS

    implémenter ce menu t'a permis aussi de savoir que tu a bien des yeux de lynx et un bon fonctionnement des neurones......lol
  • Pour affiner...ton sous menu bleu ciel depasse un peu au passage de la souris (il déborde un peu sur la droite)

    cherche

    #cssmenu li li {
        background: url("http://idata.over-blog.com/2/25/98/74/01-juin-2012/sub_sep.gif") no-repeat scroll left bottom rgba(0, 0, 0, 0);
        display: block;
        float: none;
        margin: 0;
        padding: 0;
        width: 225px;
    }


    et met 220 px au lieu de 225 px
  • Exact, si je ne me trompe pas, j'avais déjà effectué la modif que tu proposes mais l'ai finalement abandonnée car coupait mes mots quand la description était trop longue. A vérifier quand même
  • Bonjour

    on va faire l'inverse alors..on va élargir à 225 px au lieu de 220 le fond bleu foncé des sous menu..l'alignement sera ainsi parfait avec le bleu ciel au passage de la souris

    #cssmenu li ul {
        background: none repeat scroll 0 0 #292b56;
        border: 0 none;
        display: none;
        height: auto;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 225px;
        z-index: 200;
    }

    __________________

    donc tu cherche #cssmenu li ul {

    et tu passe la largeur à 225px au lieu de 220px



  • rien a voir mais si tu veux centrer ton bouton "rechercher"

    ajoute les ligne de code ci-dessous avant la derniere balise </style>  de ton css

    pour te repérer,en dessous de cette balise tu verra "</head>"..et.."<body>"

    _______________
    donc avant </style> tu ajoute:

    .container input[type="submit"], .container input[type="reset"] {
        cursor: pointer;
        margin-right: 275px;
        text-transform: uppercase;
    }

    ______________

    j'ai ajouté une marge droite de 275 px

  • Bonjour Mehdi,

    Pour faire suite à ton premier message, il est déjà à 220 :
     
    #cssmenu li ul{
        background:#292B56;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:220px;
        z-index:200;
        /*top:1em;
        /*left:0;*/

    Ou peut être tu parles d'autres choses