CSS Menu Using Rollover Images
Posted: Fri Feb 01, 2008 6:26 am
I've posted in a couple peoples' threads about this with no luck, so I'm making my own topic to hopefully get some help. This is a very important issue as I have a few sites built like this, so I have to find a solution.
My menu is setup like this:
Home | Parent1 | Parent2 | Parent3 etc
A few of the parents have children. I'm only going to show the menu 2 levels deep.
What I need is for a tag to be placed around ONLY the parent tag, NOT the children. The reason for this is to call css to apply a height and background image, which is then a rollover.
I've hacked at the code a bit but I'm stuck. Here is a working version of the default cssmenu top code with slight modifcations.
I'm sure it could be cleaned up a lot. This works how I want, except I can't get a tag just around the top most parent. It has to be a div tag around the whole link, not just the menu text.
My menu is setup like this:
Home | Parent1 | Parent2 | Parent3 etc
A few of the parents have children. I'm only going to show the menu 2 levels deep.
What I need is for a tag to be placed around ONLY the parent tag, NOT the children. The reason for this is to call css to apply a height and background image, which is then a rollover.
I've hacked at the code a bit but I'm stuck. Here is a working version of the default cssmenu top code with slight modifcations.
Code: Select all
{if $count > 0}
<div id="navBar">
<ul id="nav">
{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->parent == true or ($node->current == true and $node->haschildren == true)}
<li id="nav-{$node->alias}"><span><a
{elseif $node->current == true}
<li id="nav-{$node->alias}"><a
{elseif $node->haschildren == true}
<li id="nav-{$node->alias}"><a
{elseif $node->type == 'sectionheader'}
<li id="nav-{$node->alias}">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li id="nav-{$node->alias}"><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}"
{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a></span>
{elseif $node->type == 'sectionheader'}
{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
</div>
{/if}