Actions

Talk

Difference between revisions of "Image only menu items with rollover effect"

From Joomla! Documentation

(roll over doesn't work)
 
(Joomla 2.5 MEnu Headache: new section)
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
 
 
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.
 
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 !
 
thanks !
 
Isabel
 
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.
 +
 +
#pillmenu li#current.item28 a:hover {
 +
  background: url(../images/home-current-over.png) 0 0 no-repeat;
 +
}
 +
 +
== 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:
 +
 +
#menuOne li.item-101 a
 +
{
 +
  width: 47px;
 +
  height: 37px;
 +
  background-image: url(../images/imgHome1_05.png) 0 0;
 +
  background-repeat: no-repeat;
 +
}
 +
#menuOne li.item-101 a:hover
 +
{
 +
  background: url(../images/imgHomeActive_06.png) 0 0 no-repeat;
 +
}
 +
 +
[[User:DigitariaGlobal|DigitariaGlobal]] 07:17, 7 April 2012 (CDT)

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;

}

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)