Look great where can I download it as an Joomla install module and can it be adapted to use images with hover.
Vertical Click Menu
By clicking a main item, the sub-menu will appear and stay active until you click another main item.
Module setting
The module parameter "Show sub-menu items" is set to "No".
Print screen of the menu without additional CSS
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.
For this menu the main items have a width of 190 pixels. The width of the sub-items is 170 pixels. The height of the main items is 22 pixels and the sub-items 16 pixels.
2. Style the container of the menu
The Module Class Suffix of this example menu is: "_klikmenu".
We style the container of the menu as follows (applied for the menu on this page).
div.moduletable_klikmenu {
float: left;
padding: 4px 15px 10px 0;
}
3. Reset the list items
Be sure to reset all your list items of the menu first.
/* --------------------------------------------
Reset list items
-------------------------------------------- */
div.moduletable_klikmenu ul,
div.moduletable_klikmenu ul li,
div.moduletable_klikmenu ul li ul,
div.moduletable_klikmenu ul li ul li {
list-style: none;
margin: 0;
padding: 0;
}
/* List item stijlen */
div.moduletable_klikmenu ul li {
width: 190px;
}
Print screen after applying CSS
4. Styling the link items with background images
This time we style the background images for the links and not for the list items.
We have created just one, partly transparent, background image in Photoshop for all the menu items. The advantage for using only one image is that the browsers loads the image for the normal, hover and active state in one time. The display of the background for the menu items is changed by using the co-ordinates of the background position in the CSS statement.
CSS
/* ---------------------------------------------------------
Styling the link items with background images
--------------------------------------------------------- */
/* Hoofd linkitems normal */
div.moduletable_klikmenu ul li a {
display: block;
text-align: left;
color: #004678;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 0;
background-repeat: repeat-x;
cursor: pointer;
padding: 5px 10px 4px 10px;
width: 170px; /* IE6 fix */
height: 13px; /* IE6 fix */
}
/* Main link items hover and active */
div.moduletable_klikmenu ul li a:hover,
div.moduletable_klikmenu ul li.active a {
display: block;
text-align: left;
color: #a50000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 -56px;
background-repeat: repeat-x;
cursor: pointer;
padding: 5px 10px 4px 10px;
width: 170px; /* IE6 fix */
height: 13px; /* IE6 fix */
}
/* Sub link items normal */
div.moduletable_klikmenu ul li ul li a,
div.moduletable_klikmenu ul li.active ul li a {
display: block;
text-align: left;
color: #ffbcbc;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 -80px;
background-repeat: repeat-x;
cursor: pointer;
padding: 3px 10px 3px 10px;
width: 150px; /* IE6 fix */
height: 13px; /* IE6 fix */
}
/* sub link items hover and active */
div.moduletable_klikmenu ul li ul li a:hover,
/* div.moduletable_klikmenu ul li ul li#current a Joomla 1.5 */
div.moduletable_klikmenu ul li ul li.current a {
display: block;
text-align: left;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
background-image: url(../images/vertikaal_klik.png);
background-position: 0 -120px;
background-repeat: repeat-x;
cursor: pointer;
padding: 3px 10px 3px 10px;
width: 150px; /* IE6 fix */
height: 13px; /* 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
5. Indent the sub-menus on both sides
CSS
/* -------------------------
Indent the sub menu items
---------------------------- */
div.moduletable_klikmenu ul li ul {
margin: 0 0 0 10px;
}
div.moduletable_klikmenu ul li ul,
div.moduletable_klikmenu ul li ul li {
width: 170px;
}
Print screen after applying CSS
6. Styling the borders
This is a little more complex than styling a simple border around the items. We don't want any double borders. Note that the CSS statements for list items with an ID or Class are different for each Joomla version.
CSS
/* -------------------------
Borders of the main items
---------------------------- */
div.moduletable_klikmenu ul li a {
border-left: 1px #999 solid;
border-right: 1px #999 solid;
border-top: 1px #999 solid;
}
/* Border bottom last main item */
/* div.moduletable_klikmenu ul li.item628 a Joomla 1.5 */
/* div.moduletable_klikmenu ul li#item-628 a Joomla 1.6 */
div.moduletable_klikmenu ul li.item-628 a /* Joomla 1.7/2.5 */
{
border-bottom: 1px #999 solid;
}
/* Border bottom active main items */
div.moduletable_klikmenu ul li.active a {
border-bottom: 1px #999 solid;
}
/* Remove Border bottom of main item with no subitems */
/* div.moduletable_klikmenu ul li.active.item617 a Joomla 1.5 */
/* div.moduletable_klikmenu ul li.active#item-617 a Joomla 1.6 */
div.moduletable_klikmenu ul li.active.item-617 a /* Joomla 1.7/2.5 */
{
border-bottom: 0 none;
}
/* ----------------------------------------
Styling the borders of the subitems
----------------------------------------- */
/* Remove double top borders */
div.moduletable_klikmenu ul li.active ul li a {
border-top: 0 none;
}
/* Remove double bottom borders Joomla 1.5 */
div.moduletable_klikmenu ul li.active ul li.item622 a,
div.moduletable_klikmenu ul li.active ul li.item624 a,
div.moduletable_klikmenu ul li.active ul li.item627 a {
border-bottom: 0 none;
}
/* Remove double bottom borders Joomla 1.6 */
div.moduletable_klikmenu ul li.active ul li#item-622 a,
div.moduletable_klikmenu ul li.active ul li#item-624 a,
div.moduletable_klikmenu ul li.active ul li#item-627 a {
border-bottom: 0 none;
}
/* Remove double bottom borders Joomla 1.7/2.5 */
div.moduletable_klikmenu ul li.active ul li.item-622 a,
div.moduletable_klikmenu ul li.active ul li.item-624 a,
div.moduletable_klikmenu ul li.active ul li.item-627 a {
border-bottom: 0 none;
}
Print screens after applying CSS step by step
