Yay! Tengo justo un menu que hace lo que quieres. Como siempre esta desarrollado de modo que cumpla con ciertas normas y un buen nivel de gracefull degradation. Te pongo el codigo y si no entiendes algo nomas avisame.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sliding Menu</title>
<script type="text/javascript" src="slidingMenu.js"></script>
<link rel="stylesheet" href="slidingMenu.css" type="text/css" media="screen" />
</head>
<body onload="init()">
<div id="menu">
<ul id="theMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html> CSS:
Código:
#menu a{
background-color: #600;
padding: 5px;
color: #FFF;
border-color: #CF3;
border-style: solid;
border-width: 0 3px 0 0;
}
#theMenu{
width: 100px;
background-color: #600;
color: #FFF;
margin: 0;
}
#theMenu li{
background-color: #300;
padding: 5px;
list-style-type: square;
font-family: helvetica;
border-color: #FFF #CC0 #FFF #FFF;
border-width: 1px 3px 1px 0px;
border-style: solid;
width: 80px;
}
#theMenu li:hover{
background-color: #600;
padding: 5px 5px 5px 10px;
}
JS:
Código PHP:
var menushown;
function init(){
if(!document.getElementById){
return;
}
var theMenu = document.getElementById('theMenu');
theMenu.style.position = 'absolute';
theMenu.style.left = -theMenu.offsetWidth + 'px';
theMenu.style.top = '50px';
createButton();
menushown = false;
}
function createButton(){
var menu = document.getElementById('menu');
var button = document.createElement('a');
var buttonText = document.createTextNode("MENU");
button.setAttribute('href','#nogo');
button.appendChild(buttonText);
menu.appendChild(button);
menu.onclick=showHideMenu;
}
showHideMenu = function(){
if(menushown == false){
interval = setInterval(showMenu, 10);
menushown = true;
}else if(menushown == true){
interval = setInterval(hideMenu, 10);
menushown = false;
}
}
function showMenu(){
var theMenu = document.getElementById('theMenu');
var x = parseInt(theMenu.style.left);
if(x < 0){
x++;
theMenu.style.left = x+'px';
}else{
clearInterval(interval)
}
}
function hideMenu(){
var theMenu = document.getElementById('theMenu');
var x = parseInt(theMenu.style.left);
if(x > -theMenu.offsetWidth){
x--;
theMenu.style.left = x+'px';
}else{
clearInterval(interval)
}
}
Saludos.