Het menu werkt prima zoals in onderstaande link te zien is echter ik zou graag willen dat de active link ook naar de betreffende pagina linkt.
In de voorbeeld url zie je bijvoorbeeld: Home, about us, work etc.
Als je op about us klik dan verschijnt wel het submenu maar opent niet de about us pagina in het content veld.
Dit gebuerd wel als je op een submenu van about us klikt.
Hoe krijg ik het voor elkaar om ook de about us pagina te openen wanneer ik op de about us link klik.
Hier de url naar de voorbeeld site: http://www.smomkenya.org/
Hieronder de gebruikte code:
menu template:
Code: Select all
{if $count > 0}
<ul class="menu" id="menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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 || $node->parent == true}
<li class="selected"><a href="{$node->url}">{$node->menutext}</a>
{else}
<li><a href="{$node->url}">{$node->menutext}</a>{/if}{/foreach}{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Code: Select all
.navi li a {
display:block;
font-family:Georgia, "Times New Roman", Times, serif;
background:#8D8D8D;
margin-bottom:2px;
color:#fff;
font-size:1.4em;
font-weight:normal;
text-decoration:none;
padding:12px 12px 4px 12px;}
.navi li a:hover {
background:#666}
.navi ul ul {
border-top:1px solid #8D8D8D;}
.navi ul ul a {
background:#ededed url(images/bullet.gif) no-repeat 20px center;
color:#8D8D8D;
margin:0;
font-family:arial, verdana;
border-bottom:2px solid #fff;
padding:10px 8px 8px 32px;
font-size:1.2em;}
.navi ul ul a:hover {
color:#8D8D8D;
background:#d8d8d8 url(images/bullet.gif) no-repeat 20px center}
.navi ul ul li.selected a {
background:#fff url(images/bullet.gif) no-repeat 20px center}
Code: Select all
<div class="navi">{menu}</div>
Code: Select all
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></__script>
Code: Select all
<__script__ type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu').find("li.selected").parent().show();
$('ul.menu li a').not('ul ul a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
if((String(parent).length > 0) && (String(this.className).length > 0)) {
$(this).next().slideToggle('normal');
}
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
})
/* ]]> */
</__script>