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

Funnily enough, we were recently doing a website design and realised that you if you choose to display images in the main menu, you still get the text content of the menu. To have you main menu display images only, you need to perform a small hack on the main menu module. The original main menu module has been changes slightly to create this module.

Download

Joomla 2.5 / 3.0

Joomla 1.5 (no longer available)

Installation

To install the module, simple go to Installers > Modules, choose the file you have downloaded above and click on the upload and install button. 

Compatibility

There are three versions of this module, one for Joomla 2.5 and 3.0, one for 1.5 and one for Joomla 1.0.

Configuration

Configuration of the module is done via Modules > Site Modules. Click on the Joomla Main Menu Images item, and you will see a screenshot similar to the one below. It is basically the same as the mainmenu module, with the Show Menu Icon choice selected by default.

Example Setup

Configuration happens in three steps.

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

imagesinstories

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

mainmenuitems

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

mainmenualbum

 4. In the Module Parameters (Modules > Site Modules > Joomla Main Menu Images) choose the menu you want to display in the module.

moduleparameters

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

Screenshot 

mainmenuimages

Please do vote for us or write a small review on the Joomla Extensions site if you like this 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.

 

Support

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

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 is another module develeped by www.collectiveray.com.

Please use the Donate button to donate via Paypal.

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

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 :-)

New! DIVI 3.1 WordPress Template + PageBuilder

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

Get an exclusive 20% OFF for CollectiveRay visitors until

Divi 3

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

 

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.

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