Instructions:
This menu is highly experimental. It shows a few different ways to use CSS
as menus. This has been tested and works in IE6+, NS6+ and Mozilla 1+. It
may work in Opera6+ but some versions cannot handle the mouseover script very
well. There is a slight flicker in the submenus when using NS6 and Mozilla.
A few points to remember:
The script for this entire menu system is large and may look confusing at
first. But remember these are all the codes for all the different aspects
of design.
You can pick and choose what you like to use and then cut out the rest. Then
just change, add or cut those elements you do or do not wish to use.
Main shows a horizontal menu with a vertical menu attached.
Main 2 shows a vertical menu.
Main 3 shows how you use images.
Each menu items has it's own css style, name and id. We did this for maximum flexibility in design. You can attach a different style to each and every menu item. All items are labeled and there are instructions in the source code to help you along.
As we said this is highly experimental. We were just messing around and decided to let others play with it too. Have fun. Maybe you can make something you like with it.
Here is the entire code to create this Monster.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function show(object) {
if (document.getElementById && document.getElementById(object) !=
null)
node = document.getElementById(object).style.visibility='visible';
else if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
}
function hide(object) {
if (document.getElementById && document.getElementById(object) !=
null)
node = document.getElementById(object).style.visibility='hidden';
else if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
</script>
<style type="text/css">
/* Each menu item has it's own style name to allow for greater flexabilty
*/
.main
{
background-color: #CCFFFF;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 10px;
left: 10px;
height: 25px
}
.main2
{
background-color: #CCFFFF;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 34px;
left: 10px;
height: 25px
}
.main3
{
background-image: url(2.jpg);
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 58px;
left: 10px;
height: 25px
}
.submain1
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 10px;
left: 109px;
height: 25px;
visibility: hidden
}
.submain2
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 10px;
left: 208px;
height: 25px;
visibility: hidden
}
.submain3
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 10px;
left: 307px;
height: 25px;
visibility: hidden
}
.submain4
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 10px;
left: 406px;
height: 25px;
visibility: hidden
}
.sub2main1
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 37px;
left: 100px;
height: 25px;
visibility: hidden
}
.sub2main2
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 61px;
left: 100px;
height: 25px;
visibility: hidden
}
.sub2main3
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 85px;
left: 100px;
height: 25px;
visibility: hidden
}
.sub2main4
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 108px;
left: 100px;
height: 25px;
visibility: hidden
}
.submain4sub1
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 34px;
left: 406px;
height: 25px;
visibility: hidden
}
.submain4sub2
{
background-color: #CCFF99;
border: 1px #000000 solid;
position: absolute;
width: 100px;
top: 58px;
left: 406px;
height: 25px;
visibility: hidden
}
/* a:link and a:hover control all the rollover style changes for all the links
except the main3 menu item. a.main3:hover controls the image used. a.submain4sub1:hover
controls the background color for that menu item */
a:link
{
text-decoration: none
}
a:visited
{
text-decoration: none;
color: #FF3333
}
a:active
{
text-decoration: none
}
a:hover
{
background-color: #CC6666
}
a.main3:hover
{
background-image: url(1.jpg)
}
a.submain4sub1:hover
{
background-color: #33DDEE
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0">
<!-- The entire menu item box is a link so remember to keep all items between
the <a> and </a> tags. This is done so that the rollover effect
happens no matter where the mouse is placed in the specific menu area-->
<!-- are used to position the arrows -->
<a href="#" class="main" onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4')"
onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4')">Main <img
src="right.gif" width="10" height="10" border="0"></a>
<a href="#" class="main2" onMouseOver="show('sub2main1');show('sub2main2');show('sub2main3');show('sub2main4');"
onMouseOut="hide('sub2main1');hide('sub2main2');hide('sub2main3');hide('sub2main4');">
main 2 <img src="right.gif"
width="10" height="10" border="0"></a>
<a href="#" class="main3"></a>
<a href="#" class="submain1"></a> <a href="#" id="submain1" class="submain1" onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4')" onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4')">submain 1</a>
<a href="#" id="submain2" class="submain2" onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4')" onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4')">submain 2</a>
<a href="#" id="submain3" class="submain3" onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4')" onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4')">submain 3</a>
<a href="#" id="submain4" class="submain4"
onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4');show('submain4sub1');show('submain4sub2')"
onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4');hide('submain4sub1');hide('submain4sub2')">submain
4 <img src="down.gif"
width="10" height="10" border="0"></a>
<a href="#" id="sub2main1" class="sub2main1" onMouseOver="show('sub2main1');show('sub2main2');show('sub2main3');show('sub2main4')" onMouseOut="hide('sub2main1');hide('sub2main2');hide('sub2main3');hide('sub2main4')">sub2main 1</a>
<a href="#" id="sub2main2" class="sub2main2" onMouseOver="show('sub2main1');show('sub2main2');show('sub2main3');show('sub2main4')" onMouseOut="hide('sub2main1');hide('sub2main2');hide('sub2main3');hide('sub2main4')">sub2main 2</a>
<a href="#" id="sub2main3" class="sub2main3" onMouseOver="show('sub2main1');show('sub2main2');show('sub2main3');show('sub2main4')" onMouseOut="hide('sub2main1');hide('sub2main2');hide('sub2main3');hide('sub2main4')">sub2main 3</a>
<a href="#" id="sub2main4" class="sub2main4" onMouseOver="show('sub2main1');show('sub2main2');show('sub2main3');show('sub2main4')" onMouseOut="hide('sub2main1');hide('sub2main2');hide('sub2main3');hide('sub2main4')">sub2main 4</a>
<a href="http://www.yahoo.com" id="submain4sub1" class="submain4sub1" onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4');show('submain4sub1');show('submain4sub2')" onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4');hide('submain4sub1');hide('submain4sub2')">submain 4 sub 1</a>
<a href="#" id="submain4sub2" class="submain4sub2"
onMouseOver="show('submain1');show('submain2');show('submain3');show('submain4');show('submain4sub1');show('submain4sub2')"
onMouseOut="hide('submain1');hide('submain2');hide('submain3');hide('submain4');hide('submain4sub1');hide('submain4sub2');">submain
4 sub 2</a>
</body>
</html>
Don't forget the images
