Vraagje over JQUERY menu

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Vraagje over JQUERY menu

Post by rayring »

Ik heb een vraagje over het gebruik van een JQUERY accordion menu.

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}
styling:

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}
menu oproepen

Code: Select all

<div class="navi">{menu}</div>
javascript gebruikt

Code: Select all

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></__script>  
Javascript aanroepen in het template:

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>
mcDavid
Power Poster
Power Poster
Posts: 377
Joined: Tue Mar 31, 2009 8:45 pm

Re: Vraagje over JQUERY menu

Post by mcDavid »

Code: Select all

<a href="#">About us</a>
Die link gaat sowieso nergens heen...
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Vraagje over JQUERY menu

Post by rayring »

mcDavid wrote:

Code: Select all

<a href="#">About us</a>
Die link gaat sowieso nergens heen...
Dat klopt ik heb deze site even als voorbeeld gebruikt bij mij refereert deze gewoon aan een content pagina, ik kan deze dan ook rechts klikken en dan openen in een nieuw tabblad...
deactivated010521

Re: Vraagje over JQUERY menu

Post by deactivated010521 »

----------
Last edited by deactivated010521 on Tue Mar 12, 2013 6:03 pm, edited 1 time in total.
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Vraagje over JQUERY menu

Post by rayring »

arnoud wrote:Ik zou de button voorzien van een + teken of iets dergelijks. Als je op de + klikt schuift het accordion menu uit. Als je op de tekst klikt link je naar de contentpagina.

Het heeft niet zo veel zin om op 1 klik 2 acties: (accordion openen + content pagina openen) uit te voeren.
Bedankt voor de tip Arnoud, maar liever wil ik toch met de content pagina openen. Ik heb nog een site gevonden waar dit zo wel werkt maar geen idee hoe dit aangeroepen wordt:

http://www.anderidee.eu/
Post Reply

Return to “Dutch - Nederlands”