|
|
horizontal sliding menu
These menus have always been very popular because they’re very impressive and useful. We use a series of CSS rules to assign formatting and positioning. The JavaScript functions are called with an onMouseOver event handler to open the menu and an onMouseOut event handler to close the menu.
The getElementById() method is used to access the display properties for the intial formatting and display options. We then alter these options according to the directions given in the rest of the script.
The speed that the menu opens with is an option that can be set according to your preference. If you’d like a quicker slide, decrese this value. If you’d like a slower slide, increase the value.
<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;
}
</style>
<script type="text/javascript">
var i=-135;
var intHide;
var speed=3;
function showmenu() {
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu() {
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" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr>
<td class="menu"><a href="page.html">Item One</a></td>
</tr><tr>
<td class="menu"><a href="/asp/default.asp">ASP</a></td>
</tr><tr>
<td class="menu"><a href="/js/default.asp">JavaScript</a></td>
</tr><tr>
<td class="menu"><a href="default.asp">DHTML</a></td>
</tr><tr>
<td class="menu"><a href="/vbscript/default.asp">VBScript</a></td>
</tr>
</table>
</body>
</html>
You may include any valid HTML coding into your sliding menu. A few examples of this are forms, images, and embedded files for video, audio or flash. By segregating the class= attributes, you’re able to assign specific formatting to every element within your menu on an individual basis.
|
|
