Joomla 1.5 Main Menu Images Module

Joomla 1.5 Main Menu Images Module

This module enables you to create a main menu with images only. 

Following the success of the original version of Main Menu Images module for Joomla 1.0, this version is a hack of the 1.5 menu module, which allows images in menus without any text.

Download

Jooomla 2.5 / 3.0

Joomla 1.5

Installation

To install the module, simple go to Extensions Install / Uninstall, choose the file you have downloaded above and click on the Upload File and Install button. 

Compatibility

This module has been written for Joomla 1.5 and thus supports Joomla 1.5 natively.

Configuration

Configuration of the module is done via Extensions > Module Manager. Click on the Joomla 1.5 Main Menu Images item. You will need to enter the images for the menu item when creating the actual menu items. The only configuration necessary at the module level will be the menu to display, and the normal module parameters such as position and ordering. There is also an option which allows you to hide the bullets. The only layout supported by this module is the List layout. Legacy layouts are not supported.

Example Setup

Configuration happens in three steps.

1. Upload the images you want to use to the stories folder via the Media Manager

joomlamediamanager

 

 

 

 

 

 

 

2. Click on the menu which you want to replace with main menu images

joomlaimagesmenujpg

 

 

 

 

 

 

 

 

 

 

 

 

joomlamenus

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Choose the picture you want to diplay from the images you have uploaded in the Menu Image parameter

joomlamenuitemimage

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 4. In the Module Parameters (Extensions > Module Manager > JoomlaMain Menu Images) choose the menu you want to display in the module.

joomlamodulemanager

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 The end result after you do this for each menu item is the following:

Screenshot 

joomlamainmenuimagesscreenshot

 Please do vote for us or write a small review on the Joomla Extensions site if you like this module:

http://extensions.joomla.org/extensions/core-enhancements/menu-systems/image-menus/3675/details

Hover Images

The module now supports easy configuration of the hover images. We are know including a javascript file which when enabled, will enable hover images.

The images possible are now:

1. Normal Image

2. Hover Image

3. Active Image

4. Active Hover Image

To enable the menu you need to add the following lines to the <head> section of the index.php of the template you are using.

<?php
  $document = &JFactory::getDocument();
  $document->addScript( 'modules/mod_j15mainmenuimages/imgchange.js' );
 ?>

Now in the same folder where there is your original image, you need to create the additional three versions of the image, and give them the exact following names:

1. Normal image: image.jpg

2. Hover image: image-hover.jpg

3. Active image: image-active.jpg

4. Active hover: image-active-hover.jpg

If you don't want any one of the images, simply create the image with that name, but put the normal image. This ensures that there isn't any error.  The menu style must be list, and if you want active highlighting, Full Active Highlighting must be on in the paramters of the module.

Change Background On Mouse Over

Changing the image when passing the mouse over the image is not strictly possible (currently). However, to achieve a similar effect, it is possible to change the background of the image using CSS.

The following is an example:

li.item55:hover {
  img:url(/images/stories/otherbackground.jpg); }

The above entry in the stylesheet will create an effect on the li with class "item55" will achieve the on mouse over background effect. You'd need to create an entry in the stylesheet for each menu item which you want this effect on. 

Do you like this module? - Buy me a beer (€3)

If you liked this module, please consider buying me a beer. Every drop counts! No guarantees that any donations will be spent on new development rather than beer, though every effort will be made to spend all donations on new developments!

Please use the Donate button to donate via Paypal.

Support

Please post to the forums of you need help in configuring the module.

 

 


Translate

 

10,000+ Users trust us - Subscribe