5.00 (1 votes)

If you wuold like to create a menu that uses images instead of text item, there's a quite simple solution.
Let's take for example JM-Teaching-Aids template. 

Take a look at the custom module that is placed under the header area (DJ-ImageSlider module).
The icons are located in this module as small custom images that can be linked to any articles.
However they are not menu items. 

jm-teaching-aids-customimages


Let's create the same visual effect but the main difference is that we will put images into the standard Joomla menu items.
At first we have to create the menu module, navigate Extensions -> Module Manager, then click New button and choose Menu type from the list:

creating-menu-module 

Then assign the module to the proper template layout position and select the menu name in the Basic Options tab that you would like to use.
Then go to the menu (previously choosed) and edit the item.
Link Type Options tab includes paramaters that allow to add Link Image  and exclude menu title - set Add Menu Title to "No".
Note that images have to be uploaded to the root/images.

add-icon-to-item


Let's see how our menu looks now:

icon-menu1

 

It's not perfect yet since it uses default template CSS styles of the standard Joomla menu:

standard-joomla-menu-style

so we have to introduce few changes in the template code to overwrite current CSS styles to suit our needs.

At fisrt we have to put any suffix to the menu module to change CSS styles for our menu only.
Let's enter "image-menu" suffix to the module.
Our module uses the second module suffix "blank",  remember to separete suffix names with space if you want to use more suffixes.


image-menu-suffix 


Now it's time to overwrite CSS styles for menu that is placed in div with "image-menu" class.
We have to add some changes to <li and <a tags:

The current menu styles looks as follows (you can use for example InspectElement web tool on Chrome to check CSS styles in your template):  

ul.menu li {
     padding: 0;
     background: none;
}

ul.menu li a:link,
ul.menu li a:visited,
ul.menu li span.separator {
     display: block; background: url(../images/arrow-blue.png) 0 8px no-repeat;
     padding: 5px 0 5px 20px;
     text-decoration: none;
}

Our modification:

div.image-menu ul.menu li{
     float: left;
}

div.image-menu ul.menu li a:link,
div.image-menu ul.menu li a:visited{
     background: none;
     padding: 0;
     margin-right: 10px;
}


And finally, our result:

icon-menu2

About the author

Izabela Kowalska
Izabela Kowalska is the manager, heart and brain of Joomla-Monster and PixelEmu brands. She’s IT Engineer passionate about Joomla, WordPress, sales and project management. For many years she successfully manages and develops new products and solutions for Joomla and WordPress.

Users' reviews

Total rating: 5.00 (1 votes) Log-in to add review

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.