Image Menu

Read this first !

Joomla 1.5 styles

Joomla 1.6 / 1.7 Styles

Sub Menus

Build your own template

Video Tutorials

Test Your Website

Project Support

Download

Visitors

50.1%		Netherlands
5.9%		Germany
5.2%		United States
5%		Belgium
3%		Poland
3%		India
2.6%		Spain
1.9%		France
1.8%		Japan
1.8%		Italy

Today:	149
Yesterday:	173
This Week:	498
Last Week:	1254
This Month:	3742
Last Month:	4840
Total:	14625

The menu model above is displaying only images and no link text.

1. Design your menu

When you want to create a menu it is recommended to design your menu first (Photoshop or simular software). It is easier to determine the size of the elements in pixels and to create background images for the menu items.

The width of the menu item is 125 pixels, the height is 94 pixels.

2. Style the container of the menu

The Module Class Suffix of this example menu is: "_afbeeldingen".

We style the container of the menu as follows (applied for the menu at the top of this page).

/* -----------------
   Module setting
----------------- */
div.moduletable_afbeeldingen {
   clear: both;
   height: 80px;
   margin-bottom: 20px;
}

Print screen without additional CSS

Image menu

3. Reset the list items

Be sure to reset all your list items of the menu first.

/* --------------------------------------------
   Reset the list items
-------------------------------------------- */
div.moduletable_afbeeldingen ul,
div.moduletable_afbeeldingen ul li {
   list-style: none;
   margin: 0;
   padding: 0;
}

Print screen after applying CSS

Image menu

4. Float the list items

CSS

/*  ---------------
   Float List items
------------------- */
div.moduletable_afbeeldingen ul li {
   float: left;
}

Print screen after applying CSS

5. Background image

We have created one background image in Photoshop for all items. The advantage for using only one image for a menu-item is that the browsers loads the image for normal, hover and active state in one time. The display of the background is changed by using the co-ordinates of the background position in the CSS statement.

Background image

The link items will have a font-size and line-height of 0. This makes the text of the link items invisible. In Joomla 1.5 there is a <span> around the text of the link items. You can use for Joomla 1.5 for the span visibility:hidden. Note that the CSS statements for list items with an ID are different for each Joomla version.

/* ----------------------
   Styling the link items
------------------------- */

/* Menu-item Sun */
/* div.moduletable_afbeeldingen ul li.item651  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-651  Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-651 a  /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* div.moduletable_afbeeldingen ul li.item651 a:hover,
   div.moduletable_afbeeldingen ul li#current.item651 a  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-651 a:hover,
div.moduletable_afbeeldingen ul li.current#item-651 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-651 a:hover,
div.moduletable_afbeeldingen ul li.current.item-651 a /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: 0 -94px;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* Menu-item Flower */
/* div.moduletable_afbeeldingen ul li.item652  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-652 a Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-652 a /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: -125px 0;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* div.moduletable_afbeeldingen ul li.item652 a:hover,
   div.moduletable_afbeeldingen ul li#current.item652 a  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-652 a:hover,
   div.moduletable_afbeeldingen ul li.current#item-652 a  Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-652 a:hover,
div.moduletable_afbeeldingen ul li.current#item-652 a  /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: -125px -94px;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* Menu-itenm Bike */
/* div.moduletable_afbeeldingen ul li.item653 a  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-653 a  Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-653 a  /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: -250px 0;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* div.moduletable_afbeeldingen ul li.item653 a:hover,
   div.moduletable_afbeeldingen ul li#current.item653 a  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-653 a:hover,
   div.moduletable_afbeeldingen ul li.current#item-653 a  Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-653 a:hover,
div.moduletable_afbeeldingen ul li.current.item-653 a  /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: -250px -94px;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* Menu-item Globe */
/* div.moduletable_afbeeldingen ul li.item654 a  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-654 a  Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-654 a  /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: -375px 0;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

/* div.moduletable_afbeeldingen ul li.item654 a:hover,
   div.moduletable_afbeeldingen ul li#current.item654 a  Joomla 1.5 */
/* div.moduletable_afbeeldingen ul li#item-654 a:hover,
   div.moduletable_afbeeldingen ul li.current#item-654 a  Joomla 1.6 */
div.moduletable_afbeeldingen ul li.item-654 a:hover,
div.moduletable_afbeeldingen ul li.current.item-654 a  /* Joomla 1.7 */
{
   background-image: url(../../../images/joomla15/afbeeldingenmenu.jpg);
   background-position: -375px -94px;
   background-repeat: no-repeat;
   display: block;
   text-decoration: none;
   width: 125px; /* IE6 Fix */
   height: 94px; /* IE6 Fix */
   color: #000;
   font-size: 0;
   line-height: 0;
}

Note IE6 fix

For most browsers the CSS statements for a link "display: block and padding" will activate the whole area around the link. This will not work in IE6. To activate the whole area in IE6 you must use at least a width (and if needed a height) in combination with the display:block statement.

RSS

ali mahmoodi (05.12.2011 (20:14:51))

thanks thanks and thanks again! very very very very very very very thanks!
it works perfect.
loooooooooooove !Quote