Menu déroulant avec jquery

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Menu déroulant avec jquery

    Bonjour,

    pourriez-vous me dire pourquoi mes sous-menus ne s'affichent pas dans le menu jquery

    http://asor.fr

    cela devrait ressembler à cela :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : menuderoulant.png 
Affichages : 1 
Taille : 3,0 Ko 
ID : 1815271

    merci d'avance

  • #2
    Re : Menu déroulant avec jquery

    Bonjour,
    dans le module de menu, il faut cocher "afficher toujours les sous-menus" (ou environ)
    Schtroumpfe toi le Schtroumpf t'aidera.
    Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

    Commentaire


    • #3
      Re : Menu déroulant avec jquery

      Envoyé par Grand Schtroumpf Voir le message
      Bonjour,
      dans le module de menu, il faut cocher "afficher toujours les sous-menus" (ou environ)
      Bonjour Grand Schtroumph

      le souci c'est que je n'ai pas créé de Module ni de menu spécifique à ce menu déroulant

      j'ai juste inséré dans l "index.ph" du template beez_20:
      cemoceau de code juste avant "</head>
      Code PHP:
         <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/jquerymenu.css" />
               <!--[if lte IE 7]>
      <style type="text/css">
      html .jqueryslidemenu{height: 1%;} /*Correction pour IE7 et anterieures */
      </style>
      <![endif]-->

       
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

      <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquerymenu.js"></script>
      et ensuite le code pour le menu inséré juste après <body>
      <div id="myslidemenu" class="jqueryslidemenu">
      <ul>
      <li><a href="http://asor.free.fr">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a>
      <ul>
      <li><a href="http://gemopa.free.fr">Sous menu 3.1</a></li>
      <li><a href="#">Sous menu 3.2</a></li>
      <li><a href="#">Sous menu 3.3</a></li>
      <li><a href="#">Sous menu 3.4</a></li>
      </ul>
      </li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a>
      <ul>
      <li><a href="#">Sous menu 5.1</a></li>
      <li><a href="#">Sous menu 5.2</a>
      <ul>
      <li><a href="#">Sous menu 5.2.1</a></li>
      <li><a href="#">Sous menu 5.2.2</a></li>
      <li><a href="#">Sous menu 5.2.3</a>
      <ul>
      <li><a href="#">Sous menu 5.2.3.1</a></li>
      <li><a href="#">Sous menu 5.2.3.2</a></li>
      <li><a href="#">Sous menu 5.2.3.3</a></li>
      <li><a href="#">Sous menu 5.2.3.4</a></li>
      <li><a href="#">Sous menu 5.2.3.5</a></li>
      </ul>
      </li>
      <li><a href="#">Sous menu 5.2.4</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li><a href="#">Menu 6</a></li>
      </ul>

      <br style="clear: left" />
      </div>
      et à par cela le fichier "jquerymenu.js"
      /**************************
      //* menu avec jQuery 1.4x
      ***************************/

      //Specifier URL pour images fleche down et right :
      var arrowimages={

      down:['downarrowclass', 'http://asor.fr/templates/beez_20/down.gif', 23],

      right:['rightarrowclass', 'http://asor.fr/templates/beez_20/right.gif']

      }
      var jqueryslidemenu={
      animateduration: {over: 200, out: 100}, //duree de l'animation, en milliseconds

      buildmenu:function(menuid, arrowsvar) {

      jQuery(document).ready(function($){

      var $mainmenu=$("#"+menuid+">ul")
      var $headers=$mainmenu.find("ul").parent()
      $headers.each(function(i){

      var $curobj=$(this)
      var $subul=$(this).find('ul:eq(0)')
      this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
      this.istopheader=$curobj.parents("ul").length==1? true : false
      $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
      $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
      '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
      +'" style="border:0;" />'
      )
      $curobj.hover(
      function(e){
      var $targetul=$(this).children("ul:eq(0)")
      this._offsets={left:$(this).offset().left, top:$(this).offset().top}
      var menuleft=this.istopheader? 0 : this._dimensions.w
      menuleft=(this._offsets.left+menuleft+this._dimens ions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
      if ($targetul.queue().length<=1) //if 1 or less queued animations
      $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqu eryslidemenu.animateduration.over)
      },
      function(e){
      var $targetul=$(this).children("ul:eq(0)")
      $targetul.slideUp(jqueryslidemenu.animateduration. out)
      }
      ) //fin hover
      $curobj.click(function(){

      $(this).children("ul:eq(0)").hide()
      })
      }) //fin $headers.each()
      $mainmenu.find("ul").css({display:'none', visibility:'visible'})
      }) //fin document.ready

      }
      }

      //creation menu avec ID="myslidemenu" :
      jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
      et le fichier "jquerymenu.css"
      .jqueryslidemenu{
      font: bold 12px Verdana;
      background: #414141;
      width: 100%;
      }

      .jqueryslidemenu ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      }

      /* Elements de liste de haut niveau */

      .jqueryslidemenu ul li{
      position: relative;
      display: inline;
      float: left;
      }

      /* Style des liens de menu de haut niveau */

      .jqueryslidemenu ul li a{
      display: block;
      background: #414141;
      color: white;
      padding: 8px 10px;
      border-right: 1px solid #778;
      color: #2d2b2b;
      text-decoration: none;
      }

      * html .jqueryslidemenu ul li a{
      /* Correction pour IE6 */
      display: inline-block;
      }

      .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited { color: white; }

      .jqueryslidemenu ul li a:hover{
      background: black;
      color: white;
      }

      /* Premier niveau de sous-menu */
      .jqueryslidemenu ul li ul{
      position: absolute;
      left: 0;
      display: block;
      visibility: hidden;
      }

      /* Elements de liste du premier niveau de sous-menu */
      .jqueryslidemenu ul li ul li{
      display: list-item;
      float: none;
      }

      /*Tous les sous-menu niveau ulterieur, decalage vertical à partir du 1er niveau de sous-menu */
      .jqueryslidemenu ul li ul li ul { top: 0;}

      /* Style des liens des sous-menu */
      .jqueryslidemenu ul li ul li a{
      font: normal 13px Verdana;
      width: 160px;
      padding: 5px;
      margin: 0;
      border-top-width: 0;
      border-bottom: 1px solid gray;
      }

      .jqueryslidemenuz ul li ul li a:hover{
      background: #eff9ff;
      color: black;
      }

      /* pour les images fleche down et right */
      .downarrowclass{
      position: absolute;
      top: 12px;
      right: 7px;
      }

      .rightarrowclass{
      position: absolute;
      top: 6px;
      right: 5px;
      }
      et là le menu s'est affiché tout seul au dessus de ma page , mais sans les sous-menus !

      Le problème c'est que avec mes autres menus j'ai bien des sous-menus que j'ai créé le module menu
      mais là je ne vois plus comment faire.

      Même les deux flèches (down.gif) et (right.gif) ne s'affichent pas et je les ai bien dans le template !
      Dernière édition par gemopa à 25/03/2012, 13h38

      Commentaire


      • #4
        Re : Menu déroulant avec jquery

        Envoyé par Grand Schtroumpf Voir le message
        Bonjour,
        dans le module de menu, il faut cocher "afficher toujours les sous-menus" (ou environ)
        mais moi je ne vois pas la partie "afficher toujours les sous-menus"

        Cliquez sur l'image pour l'afficher en taille normale

Nom : menu1.jpg 
Affichages : 1 
Taille : 24,1 Ko 
ID : 1800927

        Cliquez sur l'image pour l'afficher en taille normale

Nom : menu2.jpg 
Affichages : 1 
Taille : 39,1 Ko 
ID : 1800928

        Commentaire


        • #5
          Re : Menu déroulant avec jquery

          Re,
          j'avais bien dit "ou environ"
          C'est "afficher tous les liens".
          Schtroumpfe toi le Schtroumpf t'aidera.
          Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X