[SOLVED]Graphical menu in CMSMS

[gmb]

Hi,

I am using jpg images in menu(i made 3: one for normal-grey , one for mouseover-yellow, and another for selected-black state), and i don't know how to make a mouseover or selected effect.

Basicly I want to call different button image for each state(normal, over, selected), if possible.

this image shows what i'm trying to do
http://www.intronaut.org/image/graphic_menu_problem.jpg

Currently my menu menager code is:

Code: Select all

{foreach from=$nodelist item=node} 

   <a  href="{$node->url}"><img src="menuBtn.png" border="0">
     <alt="  {$node->menutext}"></a>  

{/foreach}

and css:

Code: Select all

#galerije {
text-decoration:none;
display: inline;
padding:5px;
}

#galerije ul{
text-decoration:none;
display: inline;
list-style-type: none;
height: 15px;
}

#galerije li {
text-decoration:none;
background-image:url(menuBtn.png);
display: inline;
list-style-type: none;
}

#galerije li: hover
{
background-image:url(menuOverBtn.png);
}

But i think that CSS part isn't doing anithing.

Any help is appreciated!

[Dr.CSS]

The active state needs to be from the menu manager, look at some of the default menu templates...

The CSS for hover is incorrect...

li:hover w/o space...

[gmb]

Thanks Dr. CSS for the quick reply and a push in the right direction.

I've done just as you instructed, and used one of the default menus and with few modifications menaged to get all of the button states needed, default, active/selected, and (with a littlebit of java script) over to show. So now the menu menager code looks like this:

Code: Select all

{* 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. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}

<div id="menuwrapper">
	<ul id="primary-nav">
{foreach from=$nodelist item=node}

<div id="text_container">

{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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}
  {assign var='classes' value='menuactive'}

 
<a  href="{$node->url}"><img src="uploads/navigacija/thumb_menuActiveBtn.png" border="0">
     <alt="  {$node->menutext}"></a>

  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'} 

  {/if}

  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li>


{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}

<a href="{$node->url}">
{literal}
<img src="uploads/navigacija/menuBtn.png" border="0" alt="{$node->menutext}"
onmouseover="this.src='uploads/navigacija/menuOverBtn.png';" "alt='{$node->menutext}';" 
onmouseout="this.src='uploads/navigacija/menuBtn.png';" "alt='{$node->menutext}';" 
{/literal}
</a>

  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" 


{/if}
href="{$node->url}"></a>
{/if}
</div>

{/foreach}

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

{/if}</div></div>