NIKHIL

I had seen a cool sliding flash menu which revealed an image whenever mouseover event took place. Well I liked it a lot. I thought doing the same in javascript would be pretty complicated. I believed that something fancy done in flash can't be accomplished that easily in javascript. I was wrong. Atleast in this case, I was and happy to be so. Well, There are simpler solutions which we often tend to overlook.
I myself didn't believe that the code would remain so simple and the menu so beautiful. The menu is on the left. The source is given below. Please let me know if u liked it or plan to use it somewhere on your web site. I really don't mind if you link back to me and will be happy if I am credited for the menu's use. You can add hyperlinks in a div and make it visible whenever mouseover occurs and also you can experiment by using the the setTimeout function. I kept the code simple and didn't use setTimeOut to make the code easier to understand. :) Mail: namespace.user {A T} GMAIL [DOT] COM

<html>
<head>
<style type = "text/css">
.orange
{
background-image:url('orange.jpg');
background-repeat:no-repeat;
width:200px;
height:40px;
background-color:#FF8000;
}
.red
{
background-image:url('red.jpg');
background-repeat:no-repeat;
width:200px;
height:40px;
background-color:#FF0000;
}
.green
{
background-image:url('green.jpg');
background-repeat:no-repeat;
width:200px;
height:40px;
background-color:#00FF00;
}
.blue
{
background-image:url('blue.jpg');
background-repeat:no-repeat;
width:200px;
height:40px;
background-color:#0000FF;
}
.yellow
{
background-image:url('yellow.jpg');
background-repeat:no-repeat;
width:200px;
height:40px;
background-color:#FFFF00;
}
.cyan
{
background-image:url('cyan.jpg');
background-repeat:no-repeat;
width:200px;
height:40px;
background-color:#00FFFF;
}
</style>
<script language="javascript">
function enter(elemId)
{
document.getElementById(elemId).style.height = "182px";
}
function leave(elemId)
{
document.getElementById(elemId).style.height = "40px";
}
</script>
</head>
<body>
<div>
Nikhil's Menu
</div>
<div id = "main">
<div class="red" id = "m1" onMouseOver="enter(this.id)" onMouseOut="leave(this.id)">
MENU ITEM 1
</div>
<div class="orange" id = "m2" onMouseOver="enter(this.id)" onMouseOut="leave(this.id)">
MENU ITEM 2
</div>
<div class="yellow" id = "m3" onMouseOver="enter(this.id)" onMouseOut="leave(this.id)">
MENU ITEM 3
</div>
<div class="green" id = "m4" onMouseOver="enter(this.id)" onMouseOut="leave(this.id)">
MENU ITEM 4
</div>
<div class="cyan" id = "m5" onMouseOver="enter(this.id)" onMouseOut="leave(this.id)">
MENU ITEM 5
</div>
<div class="blue" id = "m6" onMouseOver="enter(this.id)" onMouseOut="leave(this.id)">
MENU ITEM 6
</div>
</div>
</body>
</html>

COOL SLIDING MENU