Talk:Image only menu items with rollover effect

Latest revision as of 07:17, 7 April 2012

I wanted to apply the roll over menu image as described in the post. But it doesn't work.... Can someone help me ? Maybe look in de php files from mod_main menu. Maybe I have made some changes incorrect.

thanks ! Isabel

Hey Isabel,

As shown in the example, if you want a rollover effect, you have to make sure you have the "a:hover" id for all of the "item##" in your list.

1. pillmenu li#current.item28 a:hover {

 background: url(../images/home-current-over.png) 0 0 no-repeat;

}

[edit] Joomla 2.5 MEnu Headache

Hello

This method does not seem to work in 2.5

I have used firebug to analyse the screen output and noticed that the background css property is not been picked up by Joomla. I can change the height, width etc. but no background image is loading.

Now I deliberately but the repeat property on another line just to see what would happen and I can see that property in firebug but not the background-image. I have used just "background: url()" on some of the the "li" and nothing works.

id - #menuOne is for the UL so a I even tried this ul#menuOne and still no image.

Here is the css fo one link:

1. menuOne li.item-101 a

{

 width: 47px;
 height: 37px;
 background-image: url(../images/imgHome1_05.png) 0 0;
 background-repeat: no-repeat;

}

1. menuOne li.item-101 a:hover

{

 background: url(../images/imgHomeActive_06.png) 0 0 no-repeat;

}

DigitariaGlobal 07:17, 7 April 2012 (CDT)