Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu Déroulant vers le haut Javascript et jQuery

nincha
    21 juillet 2010 à 17:16:55

    Bonjour !

    Je cherche à faire un menu déroulant à trois niveaux sous html/ javascript. Jusque là, tout va bien ! Après quelques recherches (et de longues heures) sur les forums, j'ai réussi à monter un code.

    Voila le noeud du problème : lors du premier rollOver de souris sur l'intitulé "Menu", j'aimerais que tout mon sous-menu se déroule vers le haut et non vers le bas. Mais que les sous-sous-menus se déroulent toujours vers le bas.
    Sauf que pour le moment, il se déroule vers le bas...

    Voici le code html :

    Citation


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Help javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery.collapsor.js"></script>
    <script type="text/javascript">
    <!--

    $(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $("ul.subMenu:not('.open_at_load')").hide();
    // On selectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'element span qu'ils contiennent par un lien :
    $("li.toggleSubMenu span").each( function () {
    // On stocke le contenu du span :
    var TexteSpan = $(this).text();
    $(this).replaceWith('<a href="index.php?page=La gamme" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
    } ) ;


    // pareil avec submenu2
    $("ul.subMenu2:not('.open_at_load2')").hide();
    $("li.toggleSubMenu2 span").each( function () {
    var TexteSpan = $(this).text();
    $(this).replaceWith('<a href="index.php?page=La gamme" title="Afficher le sous-menu" >' + TexteSpan + '</a>') ;
    } ) ;

    // On modifie l'evenement "mouseover" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $("li.toggleSubMenu > a").mouseover( function () {
    // Si le sous-menu etait deja ouvert, on le referme :
    if ($(this).next("ul.subMenu:visible").length != 0) {
    $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
    }
    // Si le sous-menu est cache, on ferme les autres et on l'affiche :
    else {
    $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
    $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
    }
    // On empêche le navigateur de suivre le lien :
    return false;
    });

    // pareil avec "toggleSubMenu2" :
    $("li.toggleSubMenu2 > a").mouseover( function () {
    if ($(this).next("ul.subMenu2:visible").length != 0) {
    $(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open2") } );
    }
    else {
    $("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open2") } );
    $(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open2") } );
    }
    return false;
    });


    } ) ;
    // -->
    </script>


    <ul class="navigation">

    <li class="toggleSubMenu"><span>MENU</span>
    <ul class="subMenu">
    <li class="toggleSubMenu2"><span>FACEBOOK</span>
    <ul class="subMenu2">
    <li><a href="#" title="Aller à la page 2.2">Foot</a></li>
    <li><a href="#" title="Aller à la page 2.3">Afrique</a></li>
    <li><a href="#" title="Aller à la page 2.3">Ouganda</a></li>
    </ul>
    </li>
    <li class="toggleSubMenu2"><span>TWITTER</span>
    <ul class="subMenu2">
    <li><a href="#" title="Aller à la page 2.9.1">Vache</a></li>
    <li><a href="#" title="Aller à la page 2.9.2">Normandie</a></li>
    <li><a href="#" title="Aller à la page 2.9.3">Camembert</a></li>
    </ul>
    </li>
    <li class="toggleSubMenu2"><span>GOOGLE</span>
    <ul class="subMenu2">
    <li><a href="#" title="Aller à la page 2.11.1">Banane</a></li>
    <li><a href="#" title="Aller à la page 2.11.2">Primeur</a></li>
    <li><a href="#" title="Aller à la page 2.11.2">Prune</a></li>
    <li><a href="#" title="Aller à la page 2.11.2">Mangue</a></li>
    <li><a href="#" title="Aller à la page 2.11.2">Mojito</a></li>
    </ul>
    </li>
    <li class="toggleSubMenu2"><span>FIREFOX</span>

    </li>
    <li class="toggleSubMenu2"><span>MEETIC</span>

    </li>
    <li class="toggleSubMenu2"><span>ANANAS</span>
    <ul class="subMenu2">
    <li><a href="#" title="Aller à la page 2.9.1">Sexe</a></li>
    <li><a href="#" title="Aller à la page 2.9.2">Alcool</a></li>

    </ul>
    </li>
    </ul>
    </li>

    </ul>

    </head>
    <body>



    et voici le css :

    Citation


    .navigation {
    margin: 300px 0 0 0;
    padding: 0;
    list-style: none;
    background: #000;
    color: #fff;
    width: 200px;
    font: 1.2em "Palatino", sans-serif;
    }
    .navigation a, .navigation span {
    display: block;
    padding: 4px 10px;
    color: #fff;
    text-decoration: none;
    background: #000 url(menu-item.png) left bottom no-repeat;
    }
    .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
    background-image: url(menu-item-deroule.png);
    }
    .navigation .open a, .navigation .open span {
    background-image: url(menu-item-enroule.png);
    }
    .navigation a:hover, .navigation a:focus, .navigation a:active {
    text-decoration: underline;
    }
    .navigation .subMenu {
    font-size: .8em;
    background: #ccc url(subMenu.png) 0 0 repeat-x;
    font-size: .9em;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #666;
    }
    .navigation ul.subMenu a {
    background: none;
    padding: 3px 20px;
    }



    Quelqu'un aurait-il des pistes pour éclairer mes lanternes ? :)

    MERCIIIIIII POUR VOTRE AIDE
    :):):)









    <citation nom="nincha"></citation>
    • Partager sur Facebook
    • Partager sur Twitter
    LCaba
    • Javascript
      21 juillet 2010 à 17:40:20

      Salut, commence par nous éclairer nous en utilisant les balise de code approprié (<code type="..."> pas <citation>)

      Les fonctions jQuery ne font que modifier la hauteur du sous-menu déroulant. Donc pour obtenir un déroulement vers le bas, tu dois t'arranger en CSS pour positionner ton bloc depuis sa base (et non depuis son sommet). Selon le cas, un position:absolute et un bottom:xxpx peuvent faire l'affaire.
      • Partager sur Facebook
      • Partager sur Twitter
      Cabinet vétérinaire à Angers

      Menu Déroulant vers le haut Javascript et jQuery

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown