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

Joomla 2.5 / 3.0

Joomla 1.5 (no longer available)

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

The 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 display 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:

https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/main-menu-images/

Hover Images

The module now supports easy configuration of the hover images. We are now 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 parameters 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(https://cdn.collectiveray.com/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! This module is another module by CollectiveRay - the web design blog.

Please use the Donate button to donate via Paypal.

Support

Please post to the comments if you need help in configuring the module.

 

 

One more thing... Did you know that people who share AWESOME stuff like this post look awesome too? ;-) Share this on your favourite Facebook group who you think would find this useful and let's reap the benefits together!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 10% OFF for CollectiveRay visitors until

Divi 3

 

Monstroid2 (Updated!)

The best-selling template from TemplateMonster has been given an awesome upgrade!

We've got an exclusive 10% OFF for CollectiveRay visitors on Monstroid2 until - use Coupon Code: collectiveray

Monstroid2 Super Update

 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter