como hago esto??

Marsh2 · #1 (**permalink**) 26/07/2008, 20:53

keria saber como aser este efecto:

k pegado al lado derecho de mi pagina se vea este boton:

y al pasar el mouse por encima se deslice hacia la iskierda un menu como este:

como puedo hacerlo?

gracias!

Androide-lL · #2 (**permalink**) 26/07/2008, 21:11

eso no seria con css?

Marsh2 · #3 (**permalink**) 26/07/2008, 21:43

mmm quizas, la verdad nose mucho de esto, con cualquier lenguaje me sirve
si me ekivoke de foro porfavor q algun moderador lo mueva

xbx · #4 (**permalink**) 26/07/2008, 23:37

Marsh2, la pregunta esta bien en javascript.

Aquí tienes un link donde puedes bajar lo que necesitas:

http://www.dynamicdrive.com/dynamici...lide/index.htm

Un saludo

Marsh2 · #5 (**permalink**) 27/07/2008, 09:43

gracias! era justo lo k necesitaba

buzu · #6 (**permalink**) 27/07/2008, 14:02

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.

buzu · #7 (**permalink**) 27/07/2008, 14:03

Por cierto, todo eso puede ser encapsulado en un objeto de modo que tengas una función que sea portable y reusable.

Saludos.