Actions

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

From Joomla! Documentation

(Corrected spelling, punctuation and wording.)
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Because I get so many emails asking for help on this topic I'll better edit this page to save me some work.
+
Here's how to get a real rollover image menu using on the Cascading Style Sheet (CSS).
  
First of all: No more code changes to php files are needed for this. Displaying images for menu items is standard in newer joomla releases.  
+
Displaying images for menu items is standard in newer Joomla releases. No code changes to PHP files are needed.
  
And here's the solution to get an real rollover image - CSS only - menu:
+
In this example we'll edit the horizontal menu on top of the '''rhuk_milkyway''' template. Here are the general style rules for this menu:
  
# OOps! Just found I missed one important point. In the settings of your menu module you have to enable both, "display menu icons" and "link menu icons"! You'll find these settings under "other params" in the module configuration.
+
<source lang="css">
# Upload a blank 1x1 pixel gif file to your images/stories folder. (' blank' means transparent. Usually, people take a 1 pixel transparent gif file.)  
+
#pillmenu {
# Edit your menu in backend. Click the menu item you want to edit.  
+
  white-space: nowrap;
# Open the system parameters of this menu item and change the menu image for this item to the transparent image you uploaded before.
+
  height: 32px;
# Repeat steps 2 and 3 for every menu item you want to replace with an image.
+
  float: left;
# Preview your site. Alle menu items should appear empty now. But dont worry we'll fix this now.
+
}
# Open the template.css file of your template. If you use the template edit function in the joomla backend check if the file is writeable first!
+
 
 +
#pillmenu ul {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style:none;
 +
}
 +
 
 +
#pillmenu li {
 +
  float: left;
 +
  background: url(../images/mw_menu_separator.png) top right no-repeat;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
#pillmenu a {
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  font-size: 12px;
 +
  font-weight: bold;
 +
  float:left;
 +
  display:block;
 +
  height: 24px;
 +
  line-height: 24px;
 +
  padding: 0 20px;
 +
  color: #000;
 +
  text-decoration: none;
 +
}
 +
</source>
 +
 
 +
Most important rules are:
 +
* '''float:left;''' for the &lt;li&gt; tags. This makes the menu displaying horizontal.
 +
and
 +
* '''display:block;''' for the &lt;a&gt; tags. This makes the link tags fill their whole width and height even if there is only a 1 x 1 pixel image inside.
 +
 
 +
# In the settings of your menu module, set both Show Menu Images and Menu Image Link to Yes. You'll find these settings under Other Parameters in the module configuration.
 +
# Upload a blank (tranparent) 1x1 pixel GIF file to your images/stories folder. (Usually, people take a 1x1 pixel transparent GIF file.)
 +
# Edit your menu in the backend. Click the menu item you want to edit.
 +
# Open the system parameters of this menu item and change the menu image for this item to the 1 x 1 pixel transparent image.
 +
# Repeat the two steps above for every menu item you want to replace with an image.
 +
# Preview your site. All menu items should appear empty now.
 +
# Open the template.css file of your template. If you use the template edit function in the Joomla backend, verify that the file is writeable.
 
# Now we need to define the "real" images as background images for our items as CSS rules.
 
# Now we need to define the "real" images as background images for our items as CSS rules.
  
Line 28: Line 67:
 
</source>
 
</source>
  
Thats it. In my example I use item28 because 28 is the itemId property of my menu item. You can see the itemIds when you open your menu in the backend.
+
In this example we used item28 because 28 is the itemId property of the particular menu item. You can see the item IDs when you open your menu in the backend.
  
You hav to enter these rules for every menu item you want to style. We use one rule for the normal state and another one for the hover state.  
+
Enter these rules for every menu item you want to style. Use one rule for the normal state and another for the hover state.
  
Of course you could use a third special image for the currently selected item too. Then you would just use a third rule like this:
+
Of course you could use a third special image for the currently selected (active) item. Then you would just use a third rule like this:
  
 
<source lang="css">
 
<source lang="css">
Line 40: Line 79:
 
</source>
 
</source>
  
That image would not change on hover! You would need a fourth rule if you want to change that too on rollover!
+
That image would not change on hover. You would need a fourth rule if you want to change that too on rollover.
  
 
<source lang="css">
 
<source lang="css">
Line 48: Line 87:
 
</source>
 
</source>
  
The final result is a nice rollover image menu without any line of javascript or an additional module :)
+
The final result is a nice rollover image menu without Javascript nor an additional module.
 
+
I provided an example page with an out of the box Joomla 1.5.14 install. You can see it [http://www.mad-d-sign.de/jmlatest here].
+
  
I modified the "pillmenu" on top of the page. That's why used #pillmenu in my CSS rules. I you want to mod another menu you will have to use the ID of its container div. Have a look at the HTML source of your template to find it out.
+
There is an example page using the rhuk_milkyway template. You can see it [http://www.mad-d-sign.de/jmlatest here]. Please note the first item of the top menu using the image instead of text.
  
Feel free to contact [http://forum.joomla.org/memberlist.php?mode=viewprofile&u=192392 me] if you like this little hack or have any questions.
+
I modified the "pillmenu" on top of the page. If you want to mod another menu you will have to use the ID of its container div. Look at the HTML source of your template to find it.
  
 
[[Category:Tips and tricks]]
 
[[Category:Tips and tricks]]
 
[[Category:Tips and tricks 1.0]]
 
[[Category:Tips and tricks 1.0]]
 
[[Category:Tips and tricks 1.5]]
 
[[Category:Tips and tricks 1.5]]

Latest revision as of 16:08, 16 May 2011

Here's how to get a real rollover image menu using on the Cascading Style Sheet (CSS).

Displaying images for menu items is standard in newer Joomla releases. No code changes to PHP files are needed.

In this example we'll edit the horizontal menu on top of the rhuk_milkyway template. Here are the general style rules for this menu:

#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}
 
#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}
 
#pillmenu li {
   float: left;
   background: url(../images/mw_menu_separator.png) top right no-repeat;
   margin: 0;
   padding: 0;
}
 
#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
}

Most important rules are:

  • float:left; for the <li> tags. This makes the menu displaying horizontal.

and

  • display:block; for the <a> tags. This makes the link tags fill their whole width and height even if there is only a 1 x 1 pixel image inside.
  1. In the settings of your menu module, set both Show Menu Images and Menu Image Link to Yes. You'll find these settings under Other Parameters in the module configuration.
  2. Upload a blank (tranparent) 1x1 pixel GIF file to your images/stories folder. (Usually, people take a 1x1 pixel transparent GIF file.)
  3. Edit your menu in the backend. Click the menu item you want to edit.
  4. Open the system parameters of this menu item and change the menu image for this item to the 1 x 1 pixel transparent image.
  5. Repeat the two steps above for every menu item you want to replace with an image.
  6. Preview your site. All menu items should appear empty now.
  7. Open the template.css file of your template. If you use the template edit function in the Joomla backend, verify that the file is writeable.
  8. Now we need to define the "real" images as background images for our items as CSS rules.

Here's an example:

#pillmenu li.item28 a {
  width: 31px;
  height:28px;
  background: url(../images/home.png) 0 0 no-repeat;
}
 
#pillmenu li.item28 a:hover {
  background: url(../images/home-over.png) 0 0 no-repeat;
}

In this example we used item28 because 28 is the itemId property of the particular menu item. You can see the item IDs when you open your menu in the backend.

Enter these rules for every menu item you want to style. Use one rule for the normal state and another for the hover state.

Of course you could use a third special image for the currently selected (active) item. Then you would just use a third rule like this:

#pillmenu li#current.item28 a {
  background: url(../images/home-current.png) 0 0 no-repeat;
}

That image would not change on hover. You would need a fourth rule if you want to change that too on rollover.

#pillmenu li#current.item28 a:hover {
  background: url(../images/home-current-over.png) 0 0 no-repeat;
}

The final result is a nice rollover image menu without Javascript nor an additional module.

There is an example page using the rhuk_milkyway template. You can see it here. Please note the first item of the top menu using the image instead of text.

I modified the "pillmenu" on top of the page. If you want to mod another menu you will have to use the ID of its container div. Look at the HTML source of your template to find it.