Actions

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

From Joomla! Documentation

Line 9: Line 9:
 
Code to be replaced:
 
Code to be replaced:
  
  if ($params->get('menu_images'))
+
<source lang="php">
   {
+
if ($params->get('menu_images')) {
  $menu_params = new stdClass();
+
   $menu_params = new stdClass();
  $menu_params = new JParameter($mitem->params);
+
  $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;
+
  }
+
  }
+
  }
+
  }
+
 
+
  
 +
  $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:'''
 
'''/modules/mod_mainmenu/mod_mainmenu.php line 41:'''
Line 36: Line 35:
 
Code to be added:
 
Code to be added:
  
  $params->def('menu_images_link', 0);
+
<source lang="php">
 
+
$params->def('menu_images_link', 0);
 +
</source>
  
 
'''/modules/mod_mainmenu/mod_mainmenu.xml line 58:'''
 
'''/modules/mod_mainmenu/mod_mainmenu.xml line 58:'''
Line 43: Line 43:
 
Code to be added:
 
Code to be added:
  
  <param name="menu_images_link" type="radio" default="0" label="Menu Icon Link" description="Link on Images Instead of Text">
+
<source lang="xml">
  <option value="0">No</option>
+
<param name="menu_images_link" type="radio" default="0" label="Menu Icon Link" description="Link on Images Instead of Text">
  <option value="1">Yes</option>
+
  <option value="0">No</option>
  </param>
+
  <option value="1">Yes</option>
 
+
</param>
 +
</source>
  
 
I wanted to get this working in "non legacy mode" so I made these additional two changes:
 
I wanted to get this working in "non legacy mode" so I made these additional two changes:
Line 53: Line 54:
 
'''Change in modules/mod_mainmenu/helper.php line 51:'''
 
'''Change in modules/mod_mainmenu/helper.php line 51:'''
  
  if (array_key_exists($row->parent, $ids)) {
+
<source lang="php">
 +
if (array_key_exists($row->parent, $ids)) {
 
   //Add 1 line:
 
   //Add 1 line:
 
   $row->ionly = $params->get('menu_images_link');
 
   $row->ionly = $params->get('menu_images_link');
 
   $menu->addNode($row);
 
   $menu->addNode($row);
 +
</source>
  
 
'''line 295:'''
 
'''line 295:'''
  
  if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
+
<source lang="php">
  $image = '<img src="'.JURI::base(true).'/images/stories/'.$iParams->get('menu_image').'" alt="" />';
+
if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
  //Aadd 3 lines:
+
  $image = '<img src="'.JURI::base(true).'/images/stories/'.$iParams->get('menu_image').'" alt="" />';
  if($tmp->ionly){
+
  //Aadd 3 lines:
  $tmp->name = null;
+
  if($tmp->ionly){
  }
+
    $tmp->name = null;
  } else {
+
  $image = null;
+
 
   }
 
   }
 +
} else {
 +
  $image = null;
 +
}
 +
</source>
  
 
That's it.
 
That's it.
Line 80: Line 85:
 
First the general setings for this menu:
 
First the general setings for this menu:
  
    /* horizontal top menu */
+
<source lang="css">
    #topmenu {
+
/* horizontal top menu */
      white-space: nowrap;
+
#topmenu {
      height: 32px;
+
  white-space: nowrap;
      float: right;
+
  height: 32px;
      vertical-align: top;
+
  float: right;
      margin-top: 14px;
+
  vertical-align: top;
    }
+
  margin-top: 14px;
 +
}
  
    #topmenu ul {
+
#topmenu ul {
      margin: 0;
+
  margin: 0;
      padding: 0;
+
  padding: 0;
      list-style:none;
+
  list-style:none;
    }
+
}
  
    #topmenu li {
+
#topmenu li {
    display: inline;
+
  display: inline;
    }
+
}
  
    #topmenu a {
+
#topmenu a {
      float:left;
+
  float:left;
      display:block;
+
  display:block;
      text-decoration: none;
+
  text-decoration: none;
    }
+
}
 +
</source>
  
and now the entries for every menu item you want to style:
+
And now the entries for every menu item you want to style:
  
    #topmenu li.item1 a {
+
<source lang="css">
      width: 31px;
+
#topmenu li.item1 a {
      height:28px;
+
  width: 31px;
      background: url(../images/home.png) 0 0 no-repeat;
+
  height:28px;
    }
+
  background: url(../images/home.png) 0 0 no-repeat;
 +
}
  
    #topmenu li.item1 a:hover, #topmenu li#current.item1 a {
+
#topmenu li.item1 a:hover, #topmenu li#current.item1 a {
      background: url(../images/home-over.png) 0 0 no-repeat;
+
  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...
+
#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;
 +
}
 +
</source>
  
As you can see you will have to use the item numbers to style the items directly.
+
And so on... As you can see you 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 :)
 
The result is a nice rollover image menu without any line of javascript or an additional module :)

Revision as of 08:56, 14 July 2008

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 parameter is 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 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 to be added:

$params->def('menu_images_link', 0);

/modules/mod_mainmenu/mod_mainmenu.xml line 58:

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:

First the general setings for this menu:

/* 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:

#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 you 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!