CSS Menu Using Rollover Images

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Post Reply
LeeUmm
Forum Members
Forum Members
Posts: 37
Joined: Mon Jan 28, 2008 3:14 am

CSS Menu Using Rollover Images

Post by LeeUmm »

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.

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}
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.
LeeUmm
Forum Members
Forum Members
Posts: 37
Joined: Mon Jan 28, 2008 3:14 am

Re: CSS Menu Using Rollover Images

Post by LeeUmm »

Any takers? This is pretty important and I'm a little stumped.
Post Reply

Return to “CMSMS Core”