|
|
Click-driven sliding horizontal menu
So you’ve all seen the horizontal menu that zoom out when you mouse over them, but it is entirely possible to change this if you find that it just isn’t what you’re looking for. You can initiate the menu with a click of the mouse (an onClick event handler) and slide it back with an onMouseOut event that collapses the menu. If you’d like to have the menu slide out when the button goes down and slide back when it goes up, uise the onMouseDown and onMouseUp event handlers.
Any CSS rule can be applied and any HTML tag can be used within the menu. You can even put a form on it if you so choose. Definitely add some images, small or large, to add some appeal.
We use the getElementById() method to access the properties of the page elements and act upon them. A single onClick event handler executes the JavaScript functions within the HEAD of the document and the menu slides out.
<html>
<head>
<style>
body{
font-family:arial;
}
a {
color:black;text-decoration:none;font:bold;
}
a:hover {
color:#606060;
}
td.menu {
background:lightblue;
}
table.nav {
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
margin-left:3px;
}
</style>
<script type="text/javascript">
var i=-135;
var c=0;
var intHide;
var speed=3;
function show_hide_menu() {
if (c==0)
{
c=1;
clearInterval(intHide);
intShow=setInterval("show()",10);
} else {
c=0;
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
}
function show() {
if (i<-12)
{
i=i+speed;
document.getElementById('myMenu').style.left=i;
}
}
function hide() {
if (i>-135)
{
i=i-speed;
document.getElementById('myMenu').style.left=i;
}
}
</script>
</head>
<body>
<table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">
<tr>
<td class="menu"><a href="page.html">Item One</a></td>
</tr><tr>
<td class="menu"><a href="page.html">Item Two</a></td>
</tr><tr>
<td class="menu"><a href="page.html">Item Three</a></td>
</tr><tr>
<td class="menu"><a href="page.html">Item Four</a></td>
</tr><tr>
<td class="menu"><a href="page.html">Item Five</a></td>
</tr>
</table>
</body>
</html>
There can be as many menu items as you wish, and they don’t have to be in one single column as I have them here. Multi-column menus are entirely possible – if it can be rendered in a normal page you can include it in your menu.
|
|
