www.wimb.net - CSS Menu Demo
My Test Menu
During the construction of my site I did several test with HTML and CSS to make a simple and good looking menu. I tried to do it without JavaScript: CSS only. After looking around on Internet, watching more source code then real pages, I combined a few things together and the above menu was made.
The mouseover effect is done by changing the background on a:hover
As you can see there are two types of menus:
- A simple text menu (at the right)
- The menu used for the Delphi pages (see below)
These two menus are almost the same. The base is a <ul> list, on a text browser a simple list menu is visible.
The structure is like this:
<li> link </li>
<li> link </li>
<li> link </li>
</ul>
The rest of the menu is all done with CSS.
The setup for the menus is the same, the difference is in the CSS. The button menu has an image change:
background-image :
url(button_down.gif);
To simulate a real button press, the text is shifted 1 pixel to the right:
and the text menu:
Problems:
On several places I've put:
height : 16px;
Without this, Opera 7 shows a lot of space between two menu items.
For Internet Explorer 6 the line-height had to be set:
line-height : 14px;
When you don't do, it may look good, but when someone tries to change the font size, then only the space between the menu items changes; the font size itself remains the same.
With My favorite browser, Firefox it is all OK. Last, but not least, this menu works only in the newer browsers; with Netscape 4.7 you won't see anything.
It is tested with the following browsers:
- Firefox 1.0
- Mozilla 1.4
- Internet Explorer 6
- Opera 7
- Netscape 7
To see the menus in a normal HTML page, look here.
CSS and HTML file download
CSS listing
/* button menu demo */
ul.testmenu {
list-style-type : none ;
list-style : none ;
/* bottom margin */
margin : 0px 0px 16px 0px ;
padding : 0px ;
text-align : center ;
font-size : 11px ;
border : 0px solid #000 ;
}
ul.testmenu li { /* only for Opera7 */
height : 16px ;
margin : 0px ;
padding : 0px ;
line-height : 14px ; /* for IE */
}
ul.testmenu a {
background-repeat : no-repeat ;
/* shows bg img*/
background-image : url(button_up.gif) ;
display : block ;
color : #004 ;
height : 16px ;
width : 119px ;
margin : 0px ;
padding : 0px ;
text-decoration : none ;
line-height : 14px;
}
ul.testmenu a:link {
color : #004 ;
height : 16px ;
width : 119px ;
margin : 0px ;
font-size : 11px ;
font-weight : 200 ;
line-height : 14px ;
}
ul.testmenu a:visited {
color : #004 ;
height : 16px ;
margin : 0px ;
width : 119px ;
font-size : 11px ;
font-weight : 200 ;
line-height : 14px ;
}
ul.testmenu a:hover {
background-repeat : no-repeat ;
background-image : url(button_down.gif) ;
height : 16px ;
width : 119px ;
/* move text 1px right +*/
margin : 0px 0px 0px 1px ;
padding : 0px ;
color : #004 ;
font-size : 11px ;
font-weight : normal ;
text-decoration : none ;
line-height : 14px ;
}
/* text testmenu */
ul.testmenutxt {
list-style-type : none ;
list-style : none ;
/* bottom margin */
margin : 0px 0px 16px 0px ;
padding : 0px ;
text-align : center ;
font-size : 11px ;
border : 0px solid #fff ;
line-height : 14px;
}
ul.testmenutxt li { /* only for Opera 7 */
height : 16px ;
margin : 0px ;
padding : 0px ;
line-height : 14px ;
}
ul.testmenutxt a {
display : block ;
color : #fff ;
height : 16px ;
width : 119px ;
margin : 0px ;
padding : 0px ;
text-decoration : none ;
line-height : 14px;
}
ul.testmenutxt a:hover {
height : 16px ;
width : 119px ;
margin : 0px ;
padding : 0px ;
color : #fff ;
font-weight : normal ;
text-decoration : underline ;
line-height : 14px;
}
H4
{
background-color : #000066 ;
color : #a9d6d6 ;
border : 1px solid #000000 ;
margin : 0px ;
font-size : 11px ;
height : 16px ;
text-align : center ;
font-style : normal ;
cursor : default ;
border-bottom : 1px solid #000 ;
}
/* ----- divs are for the position ---- */
div#nav1 {
position : absolute ;
top : 110px ;
left : 50px ;
border : 1px solid #000 ;
padding : 0px ;
margin : 0px 0px 16px 0px ;
width : 119px ;
overflow : hidden ;
}
div#nav2 {
position : absolute ;
top : 110px ;
left : 250px ;
border : 1px solid #000 ;
padding : 0px ;
margin : 0px 0px 16px 0px ;
width : 119px ;
overflow : hidden ;
}
div#nav3 {
position : absolute ;
top : 110px ;
left : 450px ;
border : 1px solid #000 ;
padding : 0px ;
margin : 0px 0px 16px 0px ;
width : 119px ;
background : #3B4E7A ;
overflow : hidden ;
}
Updated 2007 Oct. 09