29/05/2012, 21:13:11
Merci votre seigneurie Le Chauve
Mes styles s'appliquent très bien maintenant.
J'ai cependant un souci avec mon script qui déroule le menu. Dans les faits, il ne le déroule pas du tout...
Il y a t-il une fonction différente à appeler ou un bout de code à rajouter pour qu'il fonctionne?
Mon script:
Ma page:
Mon template Menu:
Je n'arrive pas à comprendre pourquoi il ne joue pas ce script alors que d'autres fonctionnent sur la page.
Un petit coup de main serait le bienvenu
En vous remerciant,
Cordialement,
Piet
Mes styles s'appliquent très bien maintenant.
J'ai cependant un souci avec mon script qui déroule le menu. Dans les faits, il ne le déroule pas du tout...
Il y a t-il une fonction différente à appeler ou un bout de code à rajouter pour qu'il fonctionne?
Mon script:
Code :
[== JavaScript ==]
{literal}<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>{/literal}Ma page:
Code :
[== XHTML ==]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{literal}<script type="text/javascript" src="uploads/js/jquery-1.4.4.js"></script>{/literal}
{literal}<script type="text/javascript" src="uploads/js/jquery.mousewheel.js"></script>{/literal}
{literal}<script type="text/javascript" src="uploads/js/jquery.jscrollpane.min.js"></script>{/literal}
{literal}<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
$('.scroll-pane-arrows').jScrollPane(
{
showArrows: true,
horizontalGutter: 10
}
);
});
</script>
{/literal}
{cms_stylesheet}
{metadata}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accueil - Reflexion[s]3</title>
</head>
<body class="oneColFixCtr">
<div id="bodybckgnd"><img src="uploads/images/background.jpg" alt="" style="display:block; width:100%; height:100%;" /></div>
<div id="bkcontent">
<div id="menu-container">
<div id="menu">
{menu}
<div id="logo"></div>
</div>
</div>
<div id="container">
<div id="entete">
<div id="controls" class="controls"></div>
</div>
<div id="mainContent">
<div id="accueil" class="scroll-pane-arrows">
{content}
</div>
<div id="thumbs">
<ul class="thumbs">
<li><img src="uploads/images/accueil-1.jpg" alt="" /></li>
<li>
<img src="uploads/images/accueil-2.jpg" alt="" />
</li>
<li>
<img src="uploads/images/accueil-3.jpg" alt="" />
</li>
</ul>
</div>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div class="slideshow-container">
<div id="slideshow" class="slideshow"><img src="uploads/images/accueil-big.jpg" alt="Title #1" /></div>
</div>
</div>
</div>
</div>
<div id="footer">
<p><b>Réflexion[s]<sup>3</sup></b> | +32 497 97 57 02
| <a href="mailto:info@reflexions3.be">info@reflexions3.be</a></p>
<p>©Copyright 2010 Réflexion[s]<sup>3</sup> All right reserved. </p>
</div>
</div>
{literal}<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>{/literal}
</body>
</div>
</html>Mon template Menu:
Code :
[== Indéfini ==]
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
{* ajout de topnav *}
<ul class="clearfix topnav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{* ajout de subnav à list des enfants *}
{repeat string="<ul class='subnav'>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
{* on transforme le section header de la page parent en lien # *}
<li class="sectionheader"><a href="#">{$node->menutext}</a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}Je n'arrive pas à comprendre pourquoi il ne joue pas ce script alors que d'autres fonctionnent sur la page.
Un petit coup de main serait le bienvenu
En vous remerciant,
Cordialement,
Piet