[SOLVED]want to make menu highlight based on page

[tonyg]

Hi,
  Ok, let me see if I can explain...Currently, I have a top nav menu that works pretty well, I have a hover image that highlights the menu selection when the mouse is over the menu item (as you would expect).  I would like to change the menu so that the menu item stays 'lit' or highlighted after the menu item has been selected and the mouse moves away.
  I know this cannot be done is css alone, I have to make changes to my menu manager template.  Currently, this is my template, any idea's

thanks

Code: Select all

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-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 class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{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'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

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

[tophers]

Hi tonyg,

I'm not quite sure what you're looking to do - the default navigation system, both the css-based dropdowns and the simple navigation, have that functionality built in - they highlight the selected section. If you want something a little trickier (having the section name displayed for the side navigation when you have it set to start at level 2, for instance), then you can always modify the .tpl and javascript files - CalGuy has some great extensions that allow you to grab the node alias and pull it into the page (you can see an example of it in action at http://www.ajmpetroleumconsultants.com/)

[tonyg]

Tophers,
  Thanks for your reply, i will try to clarify.  The functionality I am trying to add is I want the menu item to stay lit once that item has been chosen.  If I use the hover in css, when the mouse moves away, the background image reverts back to the off position.  If this functionality is built in, please let me know where.
  I looked at the site you pointed me to, If you notice, when you hover over the menu items, they underline.  but when you move off the item, the underline goes away, even if you pick the menu item, the underline goes away.  this is how my site works now.

Please let me know if I am still not clear and thanks for your help

[tophers]

When you click on a section within the site I listed, does the text turn to black? I have purposely not kept the underline on the 'On' State, but rather changed the text color, so that the 'underline' would remain as the 'Over' state.

Here's another example (no design yet, just a port to the CMS for functionality) - http://www.energynavigator.com/
The sections in the main menu turn a darker shade when you roll over them, and stay that way once clicked.

Sorry for any confusion - maybe you could post a link to your site so we can get a better idea of what you intend? You mention images in your message - you can accomplish the same result, but it's a bit trickier, especially with the CSS menus.

[tonyg]

Tophers,
  I see it now, I missed that the menu item turned black when the site was selected....In essance, that is what I want to do, only instead of turning it black, I want the background image to stay up.  right now, when you click the menu item and mouse away, the background image goes off.  to take a look at the site, please add this to your host file

24.39.171.195  wwwstage.ultra-fei.com

and go to that url.

how did you get the text to stay black when picked?

[tophers]

You're almost there - just write a style for #primary-nav li.menuactive (and I add #primary-nav a.menuactive as well - it depends on your style cascade). It looks like you currently have nothing there (and one instance commented out). Add in:
  background-image: url(uploads/images/menuon.jpg);

And you should get the result you're looking for. Let me know if it works.

[tonyg]

THATS IT!!!!

thanks so much for you help, I did not realize it was that easy.

thanks again

[tophers]

My pleasure. And you can add the same 'on' states to your vertical simple menu as well by styling 'menuactive' in the appropriate style sheet.

Good looking site, by the way.

[tonyg]

Tophers,
  One more thing, now, if you go to products and see the left nav, there is a sub nav.  if you click anything on the sub nav, they all underline.....why??

thanks for the compliment on the site, but I did not design, I am just implementing.

[tophers]

It's the cascade that's causing that effect - by assigning underline to all .li, it applies all the way down once a section is 'turned on'. To overcome this simply cancel it out for the next level of nav (#leftColumnBoxes #primary-nav ul ul li).

It looks like you've implemented a variation of the css menu style used in the top nav for the side nav - it would be advisable to use two distinct stylesheets, based on the original supplied styles ('Navigation: CSSMenu - Horizontal' and 'Navigation: Simple - Vertical'). The Simple - Vertical sheet has rules written to help overcome the cascading styles.

[tonyg]

ok, i will check into that, thanks again