HOWTO: Image only menu items with rollover effect

[nk111]

Ok, I wondered why it's not possible to create an "images only" menu in Joomla. While searching the forums I found this original post by mSalcher.

His solution adds an additional parameter "Menu Icon Link" to the menu module. If this parameteris set and an image has been selected for a menu item then this item will be displayed without text as "image only".

Here are the changes to be made to get this working in "legacy mode":

/modules/mod_mainmenu/legacy.php line 144:

Code: Select all

code to be replaced:
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;
           }
          }
      }
   }

/modules/mod_mainmenu/mod_mainmenu.php line 41:

Code: Select all

code to be added:
$params->def('menu_images_link', 0);

/modules/mod_mainmenu/mod_mainmenu.xml line 58:

Code: Select all

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:

Code: Select all

if (array_key_exists($row->parent, $ids)) {
add 1 line:
                $row->ionly = $params->get('menu_images_link');
                $menu->addNode($row);

line 295:

Code: Select all

if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
         $image = '<img src="'.JURI::base(true).'/images/stories/'.$iParams->get('menu_image').'" alt="" />';
add 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:

First the general setings for this menu:

Code: Select all

/* horizontal top menu */
#topmenu {
  white-space: nowrap;
  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 {
  float:left;
  display:block;
  text-decoration: none;
}

and now the entries for every menu item you want to style:

Code: Select all

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

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

#topmenu li.item64 a {
  width: 27px;
  height:28px;
  background: url(../images/links.png) 0 0 no-repeat;
}

#topmenu li.item64 a:hover, #topmenu li#current.item64 a {
  background: url(../images/links-over.png) 0 0 no-repeat;
}

and so on...

As you can see u will have to use the item numbers to style the items directly.

The result is a nice rollover image menu without any line of javascript or an additional module

Feel free to contact me if you like this little hack or have any questions. I'd like to thank the author of the original post again!

[user deleted]

Moderator note; moving to Tips and Tricks