Dropdown Menu Vertical List
Module setting
Set the "show sub-items always" in the "Module parameters" for this type of menu to "Yes".
The sub-items will be hidden en displayed with CSS statements.
Without any additional CSS the menu looks like the image below. There are 5 main items. Every main item has one or more sub-items. The second main item has a structure of sub-items.
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.
For this menu the main list items have no width set. The width is determined by the width of the menu text. the height of the main items is 22 pixels. The width of the subitems is 180 pixels and the heigth is 18 pixels.
2. Style the container div of the menu
The Module Class Suffix of this example menu is: "_dropdownvertikaal".
We first style the container of the menu (applied for the menu at the top of this page).
div.moduletable_dropdownvertikaal {
height: 22px;
margin-bottom: 20px;
}
3. Reset the list items
Be sure to reset all your list items of the menu first.
/* ---------------------------------------
Reset list items
--------------------------------------- */
div.moduletable_dropdownvertikaal ul,
div.moduletable_dropdownvertikaal ul li,
div.moduletable_dropdownvertikaal ul li ul,
div.moduletable_dropdownvertikaal ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
Print screen after applying CSS
4. Position the main and sub items
All the menu items are now in one vertical list. That is not what we want. We want the main items in a row (float: left) and the sub items in a vertical list below each main item.
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 content. The sub items need a relative reference point. This point is the main level item. So the main level items must be positioned relative.
The width of the <ul> of the sub-items is 180 pixels, because the submenu items have inherited a float left style from the main items. You also could style the sub items (li) with a float: none statement. This statement will give some spacing problems in IE6 en IE7. That's why we don't use it here.
CSS
/* ------------------------------
Position the main and sub items
----------------------------------- */
div.moduletable_dropdownvertikaal ul li {
float: left;
position: relative;
}
div.moduletable_dropdownvertikaal ul li ul {
position: absolute;
z-index: 2;
width: 180px;
}
After applying the CSS above the menu looks messy. The main level items are positioned as wanted, next to each other. If you look closely you see that de sub-items are positioned below each main item, so they are also in the right position, but all are on top of each other.
5. Style the background images and links of the main items
We have created just one, partly transparent, background image in Photoshop for all the menu items. The advantage of using only one image is that the browsers loads the image for the normal, hover and active state in one time. The display of background of the menu items are changed by using the co-ordinates of the background position in the CSS statement.
CSS for the main menu items
/* -----------------------------------------------------------------------
The background for the main menu items
----------------------------------------------------------------------- */
/* Background image main items */
div.moduletable_dropdownvertikaal ul li {
background-image: url(../images/dropdown_vertikaal.png);
background-position: 0 0;
background-repeat: repeat-x;
}
div.moduletable_dropdownvertikaal ul li:hover {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
/* The links of the main items */
div.moduletable_dropdownvertikaal ul li a {
display: block;
color: #004678;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 4px 14px 5px 14px;
}
div.moduletable_dropdownvertikaal ul li a:hover,
div.moduletable_dropdownvertikaal ul li.active a {
display: block;
color: #a50000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 4px 14px 5px 14px;
}
The background image of li:hover (the active state will be styled later) has a vertical position of -58 pixels.
Print screen after applying CSS
The main items have the correct background image. The width is determined by the text of the menu item. The submenu items have inherited the styles from the main items. The main and sub-items of the Home button have a different colour, because they are active.
6. Styling the borders
Before we style the sub-items, we first style the borders of the menu items. This is a little more complex than styling a simple border around the list items. We don't want any double borders.
CSS
/* --------------------------------------------
Borders
-------------------------------------------- */
div.moduletable_dropdownvertikaal ul li {
border: 1px #999 solid;
margin: 0 0 0 -1px;
}
div.moduletable_dropdownvertikaal ul li ul {
margin: 1px 0 0 0;
}
div.moduletable_dropdownvertikaal ul li ul li {
border: 1px #999 solid;
margin: -1px 0 0 -1px;
}
Print screen after applying CSS
7. Styling the sub items
The sub items have a different width, background and link colours than the main items.
CSS
/* ---------------------------------
Subitems
---------------------------------- */
/* Background */
div.moduletable_dropdownvertikaal ul li ul li {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -80px;
background-repeat: repeat-x;
}
div.moduletable_dropdownvertikaal ul li ul li:hover {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -120px;
background-repeat: repeat-x;
}
/* Links normal */
/* 1e level */
div.moduletable_dropdownvertikaal ul li ul li a,
div.moduletable_dropdownvertikaal ul li.active ul li a,
/* 2e level */
div.moduletable_dropdownvertikaal ul li ul li ul li a,
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li a,
/* 3e level */
div.moduletable_dropdownvertikaal ul li ul li ul li ul li a,
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li.active ul li a {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
color: #ffbcbc;
text-decoration: none;
padding: 4px 0 0 14px;
width: 166px;
height: 18px;
}
/* Links hover and active */
/* 1e level */
div.moduletable_dropdownvertikaal ul li ul li a:hover,
div.moduletable_dropdownvertikaal ul li.active ul li.active a,
/* 2e level */
div.moduletable_dropdownvertikaal ul li ul li ul li a:hover,
div.moduletable_dropdownvertikaal ul li ul li ul li ul li a:hover,
/* 3e level */
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li.active a,
div.moduletable_dropdownvertikaal ul li.active ul li.active ul li.active ul li.active a {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
color: #fff;
text-decoration: none;
padding: 4px 0 0 14px;
width: 166px;
height: 18px;
}
Print screen after applying CSS
It seems to look OK, but the sub items from the second level are behind the subitems of the first level. We correct this later.
8. Styling the background of the actieve menus
Before we go on with the sub-items we first style the background of the active main and sub items.
CSS
/* ------------------------------------------------------------------
Background active menus
------------------------------------------------------------------- */
div.moduletable_dropdownvertikaal ul li.active {
background-image:url(../images/dropdown_vertikaal.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
div.moduletable_dropdownvertikaal ul li ul li.active {
background-image:url(../images/dropdown_vertikaal.png);
background-position: left -120px;
background-repeat: repeat-x;
}
Print screen after applying CSS
9. Display and hide the submenus
So far all the sub-menus are (partly) visible. The intention of this menu is to default hide the sub-items and display them when hovering a menu item.
CSS
/* -------------------------------------------
Display and hide the submenus
-------------------------------------------- */
div.moduletable_dropdownvertikaal ul li ul {
left: -999em;
}
div.moduletable_dropdownvertikaal ul li:hover ul {
left: auto;
}
It is possible to use the CSS display:none statement as alternative to hide the sub-items and display:block to display the items. Display:block however has its own behaviour that is not needed here for styling the menu and can cause some layout problems in IE. So our advice is not to use this here.
Print screen after applying CSS
10. Change the position of the last sub-items
The last sub-items are not within the size of the menu. This does not have to be a problem. If you want the sub-items within the size of the menu, there is a way to change the position of the last sub items.
For the example menu on this page the last sub-item has an ID or Class of 574. With the following CSS the position is changed. Note that the CSS statements for list items with an ID or Class are different for each Joomla version.
/* -------------------------------------------------------------------------
Position the last subitems
-------------------------------------------------------------------------- */
/* div.moduletable_dropdownvertikaal ul li.item574 ul (Joomla 1.5) */
/* div.moduletable_dropdownvertikaal ul li#item-574 ul (joomla 1.6) */
div.moduletable_dropdownvertikaal ul li.item-574 ul /* (joomla 1.7/2.5) */
{
left: -999em;
}
/* div.moduletable_dropdownvertikaal ul li:hover.item574 ul (Joomla 1.5) */
/* div.moduletable_dropdownvertikaal ul li:hover#item-574 ul (Joomla 1.6) */
div.moduletable_dropdownvertikaal ul li:hover.item-574 ul /* (Joomla 1.7/2.5) */
{
left: -68px;
}
Print screen after applying CSS
11. Positioning from the second level of sub-items
When there is more than one level of sub-items the position of the sub-items have to be styled.
CSS
/* --------------------------------------------
CSS for multi level subitems
--------------------------------------------- */
/* From the second level */
div.moduletable_dropdownvertikaal ul li ul li ul,
div.moduletable_dropdownvertikaal ul li:hover ul li ul {
left: -999em;
}
div.moduletable_dropdownvertikaal ul li:hover ul li:hover ul {
left: auto;
margin: -22px 0 0 181px;
}
/* From the third level */
div.moduletable_dropdownvertikaal ul li ul li ul li ul,
div.moduletable_dropdownvertikaal ul li:hover ul li ul li ul,
div.moduletable_dropdownvertikaal ul li:hover ul li:hover ul li ul {
left: -999em;
}
div.moduletable_dropdownvertikaal ul li:hover ul li:hover ul li:hover ul {
left: auto;
margin: -22px 0 0 181px;
}
Print screen after applying CSS
-
Joomla 1.5 has no default possibilitye to create a multi language website. You have to use a extension. A very good extension is JoomFish. You can find it on http://extensions.joomla.org. Search for JoomFish.
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - RE: Dropdown Menu Vertical List -TutorialIf you send me your website adress I can have a look at your menu. Send it to info@joomla-css.nl
-
1901-12-13 20:45:52 |Unregistered| JoeSheen - Dropdown Menu Vertical List -TutorialFirst of all I want to thank you for sharing your code with all that work inclined! As a beginner in Joomla-Templates and CSS I was wandering if I ever get a suitable manual for making menues like that!
After reaching the end of it I have still some problems left and maybe you could give me some help:
• Unlike your example menu my main menu items don't get back to normal when the mouse leaves it. In consequence only at the active main menu item the submenu flys out. The inactive items just change background. I've checked it twice but I can't find it.
• for Non-CSS-Pros like me it would be very helpful to get some more explenation to several settings why they were chosen and what effect they will bring in order to be able to customize the values later for an individual styling.
Regards, JoeSheen
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - Re: Changes in 1.7Hello Luke,
Thank you for your positive comment. I was a little behind in updating this website. I updated all pages about submenus with list-item IDs.
Regards,
Rob van Oudheusden.
-
1901-12-13 20:45:52 |Unregistered| Luke - Changes in 1.7to point 10:
In Joomla 1.7 the former li#item-id is changed back to classes.
It now looks something like this: li.item-id.
Just so you know and can add a remark on the corresponding paragraph.
And in addition to this I want to say thank you, for your really great work! You saved me (and I'm sure many others) lots of time and made several things more clearly. Keep up the great work!
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - Re: Dropdown hover in JoomlaIn your template css file.
If you want support you have to give more information. Like your site url and what you want.
Rob van Oudheusden
-
1901-12-13 20:45:52 |Unregistered| gurbir - Dropdown hover in joomlanot working the above code , where to implement no idea
-
1901-12-13 20:45:52 |Unregistered| zikri - where to insert the code above?hi there.
i am practicing your tutorial right now,
where (CSS file name) i should insert the code above?
eg:
div.moduletable_dropdownvertikaal {
height: 22px;
margin-bottom: 20px;
}
where should i copy and paste the code above?
thanx
best regards