Fly-Out Menu
On the left there is a model of the Fly-Out menu.
Module setting
The module parameter "Show sub-menu items" is set to "Yes".
Print screen of the menu with no 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.
For this menu the main items have a width of 120 pixels. The width of the sub-items is 160 pixels. The height of the main and sub-menu items is 22 pixels.
2. Style the menu container
The Module Class Suffix of this example menu is: "_flyout".
We style the container of the menu as follows (applied for the menu at the top of this page).
/* ----------------
Module container
------------------- */
div.moduletable_flyout {
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_flyout ul,
div.moduletable_flyout ul li,
div.moduletable_flyout ul li ul,
div.moduletable_flyout ul li ul li {
list-style: none;
margin: 0;
padding: 0;
Print screen after applying CSS
4. Position the main and sub-items incl. IE6 and IE7 Fix
In this menu the main list items are in vertical position. Now you may think that you don't need to float them. However in IE6 and IE7 non floating list items have space between them. They do not fit together, there is a gap. That is why we use the float left statement here. For the <ul> of the floating list items we style a width of 120 pixels, so every floating list items will be forced to go to the next line.
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 main level item. So the main level items must be positioned relative.
/* --------------------------------
Postioning the main and subitems
----------------------------------- */
div.moduletable_flyout ul {
width: 120px; /* IE 6/7 fix */
}
div.moduletable_flyout ul li {
position: relative;
float: left; /* IE 6/7 fix */
width: 120px;
}
div.moduletable_flyout ul li ul {
position: absolute;
z-index: 2;
}
Print screen after applying CSS
All items are on top of each other. This is correct.
5. Styling the background images of the main 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
/* ----------------------------
Background images main items
------------------------------- */
div.moduletable_flyout ul li {
background-image: url(../images/flyout.png);
background-position: 0 0;
background-repeat: repeat-x;
}
div.moduletable_flyout ul li:hover {
background-image:url(../images/flyout.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
Print screen after applying CSS
6. Styling the links of the main items
CSS
/* ---------------------------
The links of the main items
------------------------------ */
div.moduletable_flyout ul li a {
display: block;
color: #004678;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 13px;
text-decoration: none;
padding: 4px 10px 5px 10px;
width: 100px; /* IE6 Fix */
height: 13px; /* IE6 Fix */
}
div.moduletable_flyout ul li a:hover,
div.moduletable_flyout 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 10px 5px 10px;
width: 100px; /* 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 apply at least a width (and if needed a height) in combination with the display:block statement.
Print screen after applying CSS
7. 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 items. We don't want any double borders.
CSS
/* -------
Borders
---------- */
div.moduletable_flyout ul li {
border: 1px #999 solid;
margin: -1px 0 0 0;
}
div.moduletable_flyout ul li ul {
margin: 1px 0 0 0;
}
div.moduletable_flyout ul li ul li {
border: 1px #999 solid;
margin: -1px 0 0 -1px;
}
Print screen after applying CSS
8. Styling the sub-items
The background image of the sub-items is different than the main items. We use the same image for the main items but with different position co-ordinates. The position of the list items itself has te be corrected with a negative top margin of -22 pixels to appear on the same horizontal position as the main items, and 121 pixels to the right (120 pixels = width main item + 1 pixel border). The second level must be 161 pixels to the right, because the width of sub-items is 160 pixels = 1 pixels for the border.
/* ---------
Sub items
------------ */
div.moduletable_flyout ul li ul {
margin: -22px 0 0 121px;
}
div.moduletable_flyout ul li ul li {
width: 160px;
background-image:url(../images/flyout.png);
background-position: 0 -80px;
background-repeat: repeat-x;
}
div.moduletable_flyout ul li ul li:hover {
width: 160px;
background-image:url(../images/flyout.png);
background-position: 0 -121px;
background-repeat: repeat-x;
}
div.moduletable_flyout ul li ul li ul {
margin: -22px 0 0 161px;
}
Print screen after applying CSS
9. Styling the sub-link items
CSS for all levels
/* --------------
Sub link items
----------------- */
/* level 1 normal */
div.moduletable_flyout ul li ul li a,
div.moduletable_flyout ul li.active ul li a,
/* level 2 normal */
div.moduletable_flyout ul li ul li ul li a,
div.moduletable_flyout ul li.active ul li.active ul li a,
/* level 3 normal */
div.moduletable_flyout ul li ul li ul li ul li a,
div.moduletable_flyout 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 10px 5px 10px;
width: 140px; /* IE6 Fix */
height: 13px; /* IE6 Fix */
}
/* level 1 hover and active*/
div.moduletable_flyout ul li ul li a:hover,
div.moduletable_flyout ul li.active ul li.active a,
/* level 2 hover */
div.moduletable_flyout ul li ul li ul li a:hover,
div.moduletable_flyout ul li ul li ul li ul li a:hover,
/* level 3 active */
div.moduletable_flyout ul li.active ul li.active ul li.active a,
div.moduletable_flyout 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 10px 5px 10px;
width: 140px; /* IE6 Fix */
height: 13px; /* IE6 Fix */
}
Print screen after applying CSS
10. Background images active menus
CSS
/* -----------------------
Background active menus
-------------------------- */
/* Main items */
div.moduletable_flyout ul li.active {
background-image:url(../images/flyout.png);
background-position: 0 -58px;
background-repeat: repeat-x;
}
/* Subitems */
div.moduletable_flyout ul li ul li.active {
background-image:url(../images/flyout.png);
background-position: 0 -120px;
background-repeat: repeat-x;
}
11. Display and hide sub-menus
CSS
/* -------------------------------
Display and hide submenus
---------------------------------- */
div.moduletable_flyout ul li ul {
left: -999em;
}
div.moduletable_flyout ul li:hover ul {
left: auto;
}
Print screens after applying CSS
12 Additional styles for multi level sub-menus
CSS
/* ---------------------------------------------
Additional styles for multi levels of submenus
------------------------------------------------ */
/* level 2 */
div.moduletable_flyout ul li ul li ul,
div.moduletable_flyout ul li:hover ul li ul {
left: -999em;
}
div.moduletable_flyout ul li:hover ul li:hover ul {
left: auto;
}
/* Level 3 */
div.moduletable_flyout ul li ul li ul li ul,
div.moduletable_flyout ul li:hover ul li ul li ul,
div.moduletable_flyout ul li:hover ul li:hover ul li ul {
left: -999em;
}
div.moduletable_flyout ul li:hover ul li:hover ul li:hover ul {
left: auto;
}