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.