Actions

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

From Joomla! Documentation

m
(Corrected spelling, punctuation and wording.)
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
I wondered why it's not possible to create an "images only" menu in Joomla. While searching the forums I found this [http://forum.joomla.org/viewtopic.php?f=304&t=262138&p=1241101#p1191715 original post] by [http://forum.joomla.org/memberlist.php?mode=viewprofile&u=4101 mSalcher].
+
Here's how to get a real rollover image menu using on the Cascading Style Sheet (CSS).
  
His solution adds an additional parameter "Menu Icon Link" to the menu module. If this parameter is set and an image has been selected for a menu item then this item will be displayed without text as "image only".
+
Displaying images for menu items is standard in newer Joomla releases. No code changes to PHP files are needed.
  
Here are the changes to be made to get this working in "legacy mode":
+
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:
 
+
'''/modules/mod_mainmenu/legacy.php line 144:'''
+
 
+
Code to be replaced:
+
 
+
<source lang="php">
+
if ($params->get('menu_images')) {
+
  $menu_params = new stdClass();
+
  $menu_params = new JParameter($mitem->params);
+
 
+
  $menu_image = $menu_params->def('menu_image', -1);
+
  if (($menu_image <> '-1') && $menu_image) {
+
    $image = '<img src="'.JURI::base(true).'/images/stories/' . $menu_image . '" border="0" alt="' . $mitem->name . '"/>';
+
+
    if( $params->get('menu_images_link') ){
+
      $txt = '<a href="'.$mitem->url.'" class="'.$menuclass.'" '.$id.'>'.$image.'</a>';
+
    } else {
+
      if ($params->get('menu_images_align')) {
+
        $txt = $txt . ' ' . $image;
+
      } else {
+
        $txt = $image . ' ' . $txt;
+
      }
+
    }
+
  }
+
}
+
</source>
+
 
+
'''/modules/mod_mainmenu/mod_mainmenu.php line 41:'''
+
 
+
Code to be added:
+
 
+
<source lang="php">
+
$params->def('menu_images_link', 0);
+
</source>
+
 
+
'''/modules/mod_mainmenu/mod_mainmenu.xml line 58:'''
+
 
+
Code to be added:
+
 
+
<source lang="xml">
+
<param name="menu_images_link" type="radio" default="0" label="Menu Icon Link" description="Link on Images Instead of Text">
+
  <option value="0">No</option>
+
  <option value="1">Yes</option>
+
</param>
+
</source>
+
 
+
I wanted to get this working in "non legacy mode" so I made these additional two changes:
+
 
+
'''Change in modules/mod_mainmenu/helper.php line 51:'''
+
 
+
<source lang="php">
+
if (array_key_exists($row->parent, $ids)) {
+
  //Add 1 line:
+
  $row->ionly = $params->get('menu_images_link');
+
  $menu->addNode($row);
+
</source>
+
 
+
'''line 295:''' (Joomla! 1.5.14 : line 302)
+
 
+
<source lang="php">
+
if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
+
  $image = '<img src="'.JURI::base(true).'/images/stories/'.$iParams->get('menu_image').'" alt="" />';
+
  //Aadd 3 lines:
+
  if($tmp->ionly){
+
    $tmp->name = null;
+
  }
+
} else {
+
  $image = null;
+
}
+
</source>
+
 
+
That's it.
+
 
+
And here's a way to get an real rollover image - CSS only - menu with this solution. Make the changes above and enable the new parameter for your menu module. Then upload a blank 1x1 pixel gif file to your images/stories folder and select this blank image as menu image for your menu items. (' blank' means transparent. Usually, people take a 1 pixel transparent gif file.)
+
 
+
Now your menu appears empty because your itmes are displayed as 1x1 transparent gifs only. Now go to the template.css and define the "real" images as background images for your items.
+
 
+
'''Here's an example:'''
+
 
+
First the general setings for this menu:
+
  
 
<source lang="css">
 
<source lang="css">
/* horizontal top menu */
+
#pillmenu {
#topmenu {
+
 
   white-space: nowrap;
 
   white-space: nowrap;
 
   height: 32px;
 
   height: 32px;
   float: right;
+
   float: left;
  vertical-align: top;
+
  margin-top: 14px;
+
 
}
 
}
  
#topmenu ul {
+
#pillmenu ul {
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
Line 101: Line 18:
 
}
 
}
  
#topmenu li {
+
#pillmenu li {
  display: inline;
+
  float: left;
 +
  background: url(../images/mw_menu_separator.png) top right no-repeat;
 +
  margin: 0;
 +
  padding: 0;
 
}
 
}
  
#topmenu a {
+
#pillmenu a {
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  font-size: 12px;
 +
  font-weight: bold;
 
   float:left;
 
   float:left;
 
   display:block;
 
   display:block;
 +
  height: 24px;
 +
  line-height: 24px;
 +
  padding: 0 20px;
 +
  color: #000;
 
   text-decoration: none;
 
   text-decoration: none;
 
}
 
}
 
</source>
 
</source>
  
And now the entries for every menu item you want to style:
+
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.
 +
 
 +
'''Here's an example:'''
  
 
<source lang="css">
 
<source lang="css">
#topmenu li.item1 a {
+
#pillmenu li.item28 a {
 
   width: 31px;
 
   width: 31px;
 
   height:28px;
 
   height:28px;
Line 121: Line 62:
 
}
 
}
  
#topmenu li.item1 a:hover, #topmenu li#current.item1 a {
+
#pillmenu li.item28 a:hover {
 
   background: url(../images/home-over.png) 0 0 no-repeat;
 
   background: url(../images/home-over.png) 0 0 no-repeat;
 
}
 
}
 +
</source>
  
#topmenu li.item64 a {
+
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.
  width: 27px;
+
 
  height:28px;
+
Enter these rules for every menu item you want to style. Use one rule for the normal state and another for the hover state.
   background: url(../images/links.png) 0 0 no-repeat;
+
 
 +
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">
 +
#pillmenu li#current.item28 a {
 +
   background: url(../images/home-current.png) 0 0 no-repeat;
 
}
 
}
 +
</source>
  
#topmenu li.item64 a:hover, #topmenu li#current.item64 a {
+
That image would not change on hover. You would need a fourth rule if you want to change that too on rollover.
   background: url(../images/links-over.png) 0 0 no-repeat;
+
 
 +
<source lang="css">
 +
#pillmenu li#current.item28 a:hover {
 +
   background: url(../images/home-current-over.png) 0 0 no-repeat;
 
}
 
}
 
</source>
 
</source>
  
And so on... As you can see you will have to use the item numbers to style the items directly.
+
The final result is a nice rollover image menu without Javascript nor an additional module.
  
The result is a nice rollover image menu without any line of javascript or an additional module :)
+
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'd like to thank the author of the original post again!
+
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.