[Solved] Image menu current item

[realrock]

Hi there,

I'm building a new website with a image menu. I want to make a "tab idea" menu so with some images, to do that I used the Advanced CSS Menu Styling from the documentation.

The roll-over works well, but I can't get get current item to display like it should be. I do not display any current items.

Here is a link to the website

This is what the button looks like (no worries, just a test image )


This is the menu code:

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}

{if $node->current == true}
<div class="{$node->menutext|replace:'Home':'home2'|replace:'Contact':'contact2'} nav">
<a href="{if $node->id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}></a></div>

{elseif $node->parent == true}
<div class="{$node->menutext|replace:'home':'home2'|replace:'Contact':'contact2'} nav">
<a href="{if $node->id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}></a></div>

{else}
<div class="{$node->menutext|replace:'Home':'home'|replace:'Contact':'contact'} nav">
<a href="{if $node->id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}></a></div>
{/if}

{/foreach}
{/if}

And the CSS:

Code: Select all

div.home {
    width: 93px;
    background: url(images/home.png) 0 -50px no-repeat;
  }
  div.home a {
    background: url(images/home.png) top left no-repeat;
  }
  div.home2 {   
    width: 93px;
    background: url(images/home.png) 0 -50px no-repeat;
  }
  div.home2 a {    
    background: url(images/home.png) 0 -150px no-repeat;
  }

 div.contact {
    width: 93px;
    background: url(images/contact.png) 0 -50px no-repeat;
  }
  div.contact a {
    background: url(images/contact.png) top left no-repeat;
  }
  div. contact2 {   
    width: 93px;
    background: url(images/contact.png) 0 -50px no-repeat;
  }
  div. contact2 a {    
    background: url(images/contact.png) 0 -150px no-repeat;
  }

  div.nav {
    height: 50px;
    margin: 0;
    float: left;
  }
  div.nav a {
    display: block;
    margin: 0; padding:0;
    width:100%; height:100%;
    overflow:hidden;
  }
  div.nav a:hover {
  background-image: none;
  }

I'v played around with the background positions of "contact2" and "home2", but it did't work out well.

Anyone any idea?

Peter

[Jeff]

Sorry, but just reading the code doesn't help me to know what you want it to do?

[realrock]

Sorry, but just reading the code doesn't help me to know what you want it to do?

I want to see the green part of the button when people open a page. Now only the rollover is visible, and you got no idea where you are when you take a look at the menu...

So i'm wondering why it just don't use that part of the CSS code to show that part of the button...

[Jeff]

My guess is that your replaces don't work because you are looking for 'Home' or 'Contact' and they actually are 'home' and 'contact'.

[realrock]

Thats the trick..

Thanks ajprog!