I’ve wanted a versatile menu system for web pages using only CSS for a while. I’ve finally came up with one to suit my needs. It is based on some from other creators. I made it as simple as possible, testing every attribute to see its affects and removing it if it wasn’t necessary (some of the examples I’ve seen have stuff that doesn’t seem to do much). The menu requires no special markup to work, just a simple unordered list, though current selections do require class tags to be shown differently. It can easily be changed from a vertical to a horizontal menu. It also allows theoretically unlimited submenus, though the edge of the screen will prevent those from a certain point on to be accessed.
This is the css as it stands now, though I have some plans to improve it in the future:
/* css based on examples from
http://css.maxdesign.com.au/listamatic2/index.htm
Homepage
http://www.seoconsultants.com/css/menus/tutorial/
*/
/******* all menus, positioning ********/
.navbar{
margin: 0; /*removes margins around nav*/
padding: 0; /*removes padding list margin*/
}
.navbar a{
display: block; /*makes links act like buttons*/
}
.navbar li>ul{
display: none; /*hides normally*/
position: absolute; /*becomes seperate block*/
border-bottom: 8px solid transparent;
}
.navbar li:hover>ul{
display: block; /*shows submenu on hover*/
}
/******* all menus, appearance only ********/
.navbar li{
width: 100px; /*button width*/
text-align:center; /*center text on buttons*/
border: thin solid black; /*button border*/
background: blue; /*color of button background*/
color: red; /*color of nonlink text*/
list-style-type: none; /*removes all list bullets*/
}
.navbar a{
text-decoration: none; /*removes underlines*/
color: lime; /*color of link text*/
}
.navbar li:hover{
background:silver; /*color of buttons on mouseover*/
}
.navbar .active{
background:yellow; /*color of buttons denoted active*/
}
/******* horizontal menu ********/
.horizontal>li{
float: left; /*displays inline, easierly,for only first row*/
}
.horizontal li{
position:relative; /*allows subsubmenus to have relative tops*/
}
.horizontal li ul{
padding-left: 0em; /*positions submenus*/
}
.horizontal li ul li ul{
/* subsubmenus go vertical*/
left: 100%; /*moves to far left of container*/
top: 0; /*moves to level with containing button*/
}
/******* vertical menu ********/
.vertical li{
position: relative; /*allows submenus to be positioned*/
}
.vertical li ul{
padding-left: 100%; /*positions submenus*/
top: 0; /*moves to level with containing button*/
}
Make a simple unordered list (ul) and give it the class of navbar and either horizontal or vertical (with neither type, it is currently an unusable vertical version).
See the example.