Combination Menu
The menu model above is a combination of horizontal and vertical dropdown styles. It is a more complex menu. There is no need for javascript to get the menu working in IE6. Just use the htc script (Introduction - Read this first).
Module setting
The module parameter "Show sub-menu items" is set to "Yes".
There are 3 main items. Every main item has a different number of sub-items. The menu is based on the menu of the website from Logistiek Nederland (www.logistiek.nl). But for this menu you don't need any javascript.
Print screen without additional CSS
1. Design your menu
When you want to create a menu it is recommended to design your menu first (e.g. 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 is 528 pixels. The width of the main and sub items is 176 pixels. The height of the main items is 25 pixels and the sub items is 20 pixels.
2. Style the container of the menu
The Module Class Suffix of this example menu is: "_combinatie".
We style the container of the menu as follows (applied for the menu at the top of this page).
div.moduletable_combinatie {
width: 528px;
height: 85px;
position: relative;
margin-bottom: 20px;
}
3. Reset the list items
Be sure to reset all your list items of the menu first.
/* -----------------------
Reset the list items
----------------------- */
div.moduletable_combinatie ul,
div.moduletable_combinatie ul li,
div.moduletable_combinatie ul li ul,
div.moduletable_combinatie ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Print screen after applying CSS
4. Floating the main list items
We want to float the main items next to each other.
/* ---------------
Main list items
------------------ */
div.moduletable_combinatie ul li {
float: left;
width: 176px;
}
Print screen after applying CSS
5. Styling the links of the main items
CSS
/* --------------------
Main link items
----------------------- */
div.moduletable_combinatie ul li a {
display: block;
padding: 5px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: #000;
text-decoration: none;
width: 166px; /* IE6 fix */
height: 20px; /* IE6 fix */
}
div.moduletable_combinatie ul li a:hover,
div.moduletable_combinatie ul li.active a {
display: block;
padding: 5px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: #fff;
text-decoration: none;
font-weight: bold;
width: 166px; /* IE6 fix */
height: 20px; /* IE6 fix */
}
/* -------------------
Sub link list items
---------------------- */
div.moduletable_combinatie ul li ul li a,
div.moduletable_combinatie ul li.active ul li a {
display: block;
padding: 4px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
width: 166px; /* IE6 fix */
height: 16px; /* IE6 fix */
}
div.moduletable_combinatie ul li ul li a:hover,
div.moduletable_combinatie ul li.active ul li.active a {
display: block;
padding: 4px 0 0 10px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
color: #fff;
text-decoration: none;
font-weight: normal;
width: 166px; /* IE6 fix */
height: 16px; /* IE6 fix */
}
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.
Print screen after applying CSS
Background images
We have created 2 background images in Photoshop, one for the main items and one for the sub-items. The advantage of using only one image for a menu item is that the browser 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.
6. Position sub-items
Important !
The sub-items must be positioned "absolute". In this way the sub-items are set free from the other elements, so they can be positioned on top of the other content. The sub-items need a relative reference point. This point is the <div> of the menu.
The width of the <ul> of the sub-items is 528 pixels. That is needed because the sub-menu items need to use the full width of the menu. The width of every sub-items is 176 pixels.
The sub-items of main item 2 will indent 176 pixes and main item 3 will indent 352 pixels (use padding).
The backgrounds of the <ul) of the sub-items are on top of each other. Because the sub-items of main item 2 will indent 176 pixels only the first 3 subitems of main item 1 are visible. The other sub-items of main item 1 are behind the other sub-items, etc. Note that the CSS statements for list items with an ID or Class are different for each Joomla version.
/* --------------------
Positioning subitems
----------------------- */
/* div.moduletable_combinatie ul li.item630 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-630 ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-630 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 0;
background-repeat: repeat-x;
position: absolute;
width: 528px;
height: 63px;
left: 0;
}
/* div.moduletable_combinatie ul li.item640 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-640 ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-640 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 176px 0;
background-repeat: no-repeat;
position: absolute;
width: 352px;
height: 63px;
padding-left: 176px;
left: 0;
}
/* div.moduletable_combinatie ul li.item647 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-647 ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-647 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 352px 0;
background-repeat: no-repeat;
position: absolute;
width: 176px;
height: 63px;
padding-left: 352px;
left: 0;
}
div.moduletable_combinatie ul li:hover ul,
div.moduletable_combinatie ul li.active ul {
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 0;
background-repeat: repeat-x;
}
Print screen after applyling CSS
7. Styling background main items
CSS
/* ----------------------------------
Background image of the main items
------------------------------------- */
div.moduletable_combinatie ul li {
background-image: url(../images/combinatiemenu_hoofditem.png);
background-position: 0 0;
background-repeat: no-repeat;
}
div.moduletable_combinatie ul li:hover,
div.moduletable_combinatie ul li:hover.parent,
div.moduletable_combinatie ul li.active {
background-image: url(../images/combinatiemenu_hoofditem.png);
background-position: 0 -25px;
background-repeat: no-repeat;
}
Print screen after applying CSS
CSS for removing the inherited backgrounds of the sub-items
/* -----------------------------
Removing backgrounds subitems
-------------------------------- */
div.moduletable_combinatie ul li ul li,
div.moduletable_combinatie ul li:hover ul li,
div.moduletable_combinatie ul li ul li:hover,
div.moduletable_combinatie ul li.active ul li,
div.moduletable_combinatie ul li.active ul li:hover {
background: none;
}
Print screen after applying CSS
We have to correct the hover and active state of the main items. This is done by reversing the z-indexes. Note that the CSS statements for list items with an ID or Class are different for each Joomla version.
8. Reversing the z-indexes
/* -----------------------
Reversing the z-indexes
------------------------- */
/* div.moduletable_combinatie ul li:hover.item630 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li:hover#item-630 ul Joomla 1.6 */
div.moduletable_combinatie ul li:hover.item-630 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
z-index: 70;
}
/* div.moduletable_combinatie ul li:hover.item640 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li:hover#item-640 ul Joomla 1.6 */
div.moduletable_combinatie ul li:hover.item-640 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
z-index: 60;
}
/* div.moduletable_combinatie ul li:hover.item647 ul Joomla 1.5 */
/* div.moduletable_combinatie ul li:hover#item-647 ul Joomla 1.6 */
div.moduletable_combinatie ul li:hover.item-647 ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
z-index: 50;
}
Print screen after applying CSS
Note that the CSS statements for list items with an ID or Class are different for each Joomla version.
9. Styling the active items
/* --------------------
Styling active items
----------------------- */
/* div.moduletable_combinatie ul li.item630.active ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-630.active ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-630.active ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
left: 0;
z-index: 1;
}
/* div.moduletable_combinatie ul li.item640.active ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-640.active ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-640.active ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
left: 0;
z-index: 1;
}
/* div.moduletable_combinatie ul li.item647.active ul Joomla 1.5 */
/* div.moduletable_combinatie ul li#item-647.active ul Joomla 1.6 */
div.moduletable_combinatie ul li.item-647.active ul /* Joomla 1.7/2.5 */
{
background-image: url(../images/combinatiemenu_subitem.png);
background-position: 0 -63px;
background-repeat: repeat-x;
position: absolute;
left: 0;
z-index: 1;
}