I am trying to create a menu template that will look like this (the blue boxes are section headers):
Basically I just need the structure that will allow me to add borders on top and below each menu item. I don't think I can use unordered lists because the borders will not span the full width of the menu since lists are nested.
Has anyone been successful in doing this? I have tried replacing the lists with but I cant seem to get it to work and not have missing or extra html tags.
Here is the menu template I am using now in case it is needed:
Code: Select all
{if $count > 0}
<div id="menu">
<ul class="root">
{foreach from=$nodelist item=node}
{if $node->depth != $node->prevdepth}
{if $node->depth > $node->prevdepth}
<ul>
{elseif $node->depth < $node->prevdepth}
</li></ul>
{/if}
{elseif $node->index > 0}
</li>
{/if}
{if $node->current == true}
<li class="current">
{elseif $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="parent">
{elseif $node->haschildren == true}
<li class="parent">
{elseif $node->type == 'sectionheader'}
<li class="sectionheader depth{$node->depth}">
{elseif $node->type == 'separator'}
<li>
{else}
<li>
{/if}
{if $node->type == 'sectionheader'}
<div>{$node->menutext}</div>
{else}
<a href="{if $node->id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
</div>
{/if}
