Actions

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

From Joomla! Documentation

(New page: 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...)
 
(Corrected spelling, punctuation and wording.)
 
(12 intermediate revisions by 4 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:'''
+
<source lang="css">
 +
#pillmenu {
 +
  white-space: nowrap;
 +
  height: 32px;
 +
  float: left;
 +
}
  
Code to be replaced:
+
#pillmenu ul {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style:none;
 +
}
  
  if ($params->get('menu_images'))
+
#pillmenu li {
  {
+
  float: left;
  $menu_params = new stdClass();
+
  background: url(../images/mw_menu_separator.png) top right no-repeat;
  $menu_params = new JParameter($mitem->params);
+
  margin: 0;
 
+
  padding: 0;
  $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;
+
  }
+
  }
+
  }
+
  }
+
  
 +
#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.
  
'''/modules/mod_mainmenu/mod_mainmenu.php line 41:'''
+
# 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.)
Code to be added:
+
# 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.
  $params->def('menu_images_link', 0);
+
# 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.
'''/modules/mod_mainmenu/mod_mainmenu.xml line 58:'''
+
# Now we need to define the "real" images as background images for our items as CSS rules.
 
+
Code to be added:
+
 
+
  <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>
+
 
+
 
+
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:'''
+
 
+
  if (array_key_exists($row->parent, $ids)) {
+
  //Add 1 line:
+
  $row->ionly = $params->get('menu_images_link');
+
  $menu->addNode($row);
+
 
+
'''line 295:'''
+
 
+
  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;
+
  }
+
 
+
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.
+
 
+
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:'''
 
'''Here's an example:'''
  
First the general setings for this menu:
+
<source lang="css">
 
+
#pillmenu li.item28 a {
    /* horizontal top menu */
+
  width: 31px;
    #topmenu {
+
  height:28px;
      white-space: nowrap;
+
  background: url(../images/home.png) 0 0 no-repeat;
      height: 32px;
+
}
      float: right;
+
      vertical-align: top;
+
      margin-top: 14px;
+
    }
+
 
+
    #topmenu ul {
+
      margin: 0;
+
      padding: 0;
+
      list-style:none;
+
    }
+
 
+
    #topmenu li {
+
    display: inline;
+
    }
+
  
    #topmenu a {
+
#pillmenu li.item28 a:hover {
      float:left;
+
  background: url(../images/home-over.png) 0 0 no-repeat;
      display:block;
+
}
      text-decoration: none;
+
</source>
    }
+
  
and now the entries for every menu item you want to style:
+
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.
  
    #topmenu li.item1 a {
+
Enter these rules for every menu item you want to style. Use one rule for the normal state and another for the hover state.
      width: 31px;
+
      height:28px;
+
      background: url(../images/home.png) 0 0 no-repeat;
+
    }
+
  
    #topmenu li.item1 a:hover, #topmenu li#current.item1 a {
+
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:
      background: url(../images/home-over.png) 0 0 no-repeat;
+
    }
+
  
    #topmenu li.item64 a {
+
<source lang="css">
      width: 27px;
+
#pillmenu li#current.item28 a {
      height:28px;
+
  background: url(../images/home-current.png) 0 0 no-repeat;
      background: url(../images/links.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;
+
    }
+
  
    and so on...
+
<source lang="css">
 +
#pillmenu li#current.item28 a:hover {
 +
  background: url(../images/home-current-over.png) 0 0 no-repeat;
 +
}
 +
</source>
  
 +
The final result is a nice rollover image menu without Javascript nor an additional module.
  
As you can see you will have to use the item numbers to style the items directly.
+
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.
  
The result is a nice rollover image menu without any line of javascript or an additional module :)
+
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.
  
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!
+
[[Category:Tips and tricks]]
 +
[[Category:Tips and tricks 1.0]]
 +
[[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.