Menu déroulant avec jquery

**Grand Schtroumpf** · 25/03/2012, 11h09

Re : Menu déroulant avec jquery

Bonjour,
dans le module de menu, il faut cocher "afficher toujours les sous-menus" (ou environ)

**gemopa** · 25/03/2012, 12h35

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>

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 !

**gemopa** · 25/03/2012, 19h21

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"

**Grand Schtroumpf** · 25/03/2012, 22h41

Re : Menu déroulant avec jquery

Re,
j'avais bien dit "ou environ"

C'est "afficher tous les liens".

Menu déroulant avec jquery

[Problème] Menu déroulant avec jquery

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association