Mega-menu

[joe2]

hi, I tried to make a mega-menu. It's almost working but I find myself unable to close anything properly Nor the <li> , nor the ul or the div. (On the 1.9.4.2 version - default install)

Here's my template :

Code: Select all

{* CSS classes used in this template:

#main-nav - The id for the <ul>
div.dropdown - The class for each droplist
.ssmenu - The class for each <ul> inside a droplist *}

{if $count > 0}
<ul id="main-nav" class="kwicks">
{foreach from=$nodelist item=node}
   {if $node->depth == 2}
      {repeat string='<div class="dropdown"> <ul>' times=$node->depth-$node->prevdepth}
   {elseif $node->depth == 3}
      {repeat string='<div><ul class="ssmenu">' times=$node->depth-$node->prevdepth}
   {elseif $node->depth < $node->prevdepth}
      {repeat string="</li></ul></div>" times=$node->prevdepth-$node->depth}</li>
   {elseif $node->index > 0}</li>
   {/if}
   
   {if ($node->parent == true and  $node->depth == 1) or ($node->current == true and $node->haschildren == true and  $node->depth == 1)}
         <li class="Menu1 {$node->alias}"><a class=" {$node->alias}" 
   {elseif $node->current == true}
         <li class=""><a class="" 
{elseif $node->haschildren == true and  $node->depth == 1}
   <li class="Menu1 {$node->alias}"><a class="{$node->alias}" 
{elseif $node->type == 'sectionheader' and  $node->depth == 1}
        <li class="Menu1 {$node->alias}"><h2>{$node->menutext}</h2>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
   <li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><h2>{$node->menutext}</h2></a>
{/if}

{/foreach}

   {repeat string="</li></ul>" times=$node->depth-1}      </li>
   </ul>


{/if}

Any help, suggestion really appreciated!

[joe2]

Ok, it was a big big headache, but I think I got it. I only tried it with 3 levels but for now it seems to work!

Here's the new template :

Code: Select all

{if $count > 0}
<ul id="main-nav" class="kwicks">
{foreach from=$nodelist item=node}
   {if $node->depth == 2}
      {repeat string='<div class="dropdown"> <ul>' times=$node->depth-$node->prevdepth}
	  {repeat string="</ul></div></li>" times=$node->prevdepth-$node->depth}
	  {elseif $node->depth == 3}
      {repeat string='<div><ul class="ssmenu">' times=$node->depth-$node->prevdepth}
   {elseif $node->depth < $node->prevdepth}
      {repeat string="</ul></div></li>" times=$node->prevdepth-$node->depth}
   {elseif $node->index > 0}</li>
   {/if}
   
   
   {if ($node->parent == true and  $node->depth == 1) or ($node->current == true and $node->haschildren == true and  $node->depth == 1)}
         <li class="Menu1 {$node->alias}"><a class=" {$node->alias}" 
   {elseif $node->current == true}
         <li class=""><a class="" 
{elseif $node->haschildren == true and  $node->depth == 1}
   <li class="Menu1 {$node->alias}"><a class="{$node->alias}" 
{elseif $node->type == 'sectionheader' and  $node->depth == 1}
        <li class="Menu1 {$node->alias}"><h2>{$node->menutext}</h2>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
   <li><a 
{/if}

{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" 
{/if}

{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}
{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a></li>
{elseif $node->type == 'sectionheader'}
><h2>{$node->menutext}</h2></a>
{else}
   
{/if}

{/foreach}

   {repeat string="</li></ul>" times=$node->depth-1}      </li>
   </ul>


{/if}

If you see something wrong or something better, don't hesitate, any help is appreciated.

[carasmo]

Really helpful. Do you have any css that goes with this? Thanks!