Como crear un menu despegable?

Holas queria creaer un menu a la izquierda de mi web pero no se como hacerlo...

hay algun codigo html o algo?

Saludos

Aquí te dejo unos menues en codigos html:



Menú desplegable desde la izquierda:

Código:

<style>

<!--



#slidemenubar, #slidemenubar2{

position:absolute;

left:-155px;

width:160px;

top:170px;

border:1.5px solid green;

background-color:lightyellow;

layer-background-color:lightyellow;

font:bold 12px Verdana;

line-height:20px;

}

-->

</style>







<script language="JavaScript1.2">



/*

Sliding Menu Bar Script- 

© Dynamic Drive (www.dynamicdrive.com)

For full source code, installation instructions,

100&#39;s more DHTML scripts, and Terms Of

Use, visit dynamicdrive.com

*/



if (document.all)

document.write(&#39;<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">&#39;)

</script>

<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">

<script language="JavaScript1.2">

var sitems=new Array()

var sitemlinks=new Array()



//extend or shorten this list

sitems[0]="LosRecursosGratis.com"

sitems[1]="Servicios para tu web"

sitems[2]="Publicidad para webmasters"

sitems[3]="Servicios para visitantes"

sitems[4]="Promocion"

sitems[5]="Descarga de software"

sitems[6]="JavaSrcipt"







//These are the links pertaining to the above text.

sitemlinks[0]="http://www.losrecursosgratis.com"

sitemlinks[1]="http://www.losrecursosgratis.com/servicios/servicios.html"

sitemlinks[2]="http://www.losrecursosgratis.com/Publicidad/publicidad.html"

sitemlinks[3]="http://www.losrecursosgratis.com/servicioscvis/serviciosvis.html"

sitemlinks[4]="http://www.losrecursosgratis.com/promocion/promocion.html"

sitemlinks[5]="http://www.losrecursosgratis.com/descarga/dercargar_programas_gratis.html"

sitemlinks[6]="http://www.losrecursosgratis.com/javascript/codigos_javascript.html"





for (i=0;i<=sitems.length-1;i++)

document.write(&#39;<a href=&#39;+sitemlinks[i]+&#39;>&#39;+sitems[i]+&#39;</a>
&#39;)

</script>

</layer>

<script language="JavaScript1.2">

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (document.layers)

setTimeout("window.onresize=regenerate",400)

}

window.onload=regenerate2

if (document.all){

document.write(&#39;</div>&#39;)

themenu=document.all.slidemenubar2.style

rightboundary=0

leftboundary=-150

}

else{

themenu=document.layers.slidemenubar

rightboundary=150

leftboundary=10

}

function pull(){

if (window.drawit)

clearInterval(drawit)

pullit=setInterval("pullengine()",50)

}

function draw(){

clearInterval(pullit)

drawit=setInterval("drawengine()",50)

}

function pullengine(){

if (document.all&&themenu.pixelLeft<rightboundary)

themenu.pixelLeft+=5

else if(document.layers&&themenu.left<rightboundary)

themenu.left+=5

else if (window.pullit)

clearInterval(pullit)

}

function drawengine(){

if (document.all&&themenu.pixelLeft>leftboundary)

themenu.pixelLeft-=5

else if(document.layers&&themenu.left>leftboundary)

themenu.left-=5

else if (window.drawit)

clearInterval(drawit)

}

</script>

Menú oculto que aparece desde la izquierda:

Código:

 * * * * * * *





<script language="JavaScript1.2">



/*

Static menu script II (By maXimus, maximus@nsimail.com, http://absolutegb.com/maximus/)

Modified slightly/ permission granted to Dynamic Drive to feature script in archive

For full source, usage terms, and 100&#39;s more DHTML scripts, visit http://dynamicdrive.com



Traducido y adaptado al español por http://www.losrecursosgratis.com

*/



function move(x) {

if (document.all) {

object1.style.pixelLeft += x;

object1.style.visibility = "visible"}

else if (document.layers) {

document.object1.left += x;

document.object1.visibility = "show"}};



function makeStatic() {

if (document.all) {object1.style.pixelTop=document.body.scrollTop+20}

else {eval(document.object1.top=eval(window.pageYOffset+20));}

setTimeout("makeStatic()",0);}

</script>



<style>

<!--



.hl	{

 *Background-Color : yellow;

 *Cursor:hand;

	}

.n	{

 *Cursor:hand;

	}

-->

</style>









<LAYER visibility="hide" top="20" name="object1" bgcolor="black" left="0" onmouseover="move(132)" onmouseout="move(-132)">



<script language="JavaScript1.2">



function positionmenu(){

move(-132)

}



if (document.all) {document.write(&#39;<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute;Left : 0px;Top : 20px;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">&#39;)}

</script>



<table border="0" cellpadding="0" cellspacing="1" width="150" bgcolor="#000000">

<tr><td bgcolor="#0099FF"> <font size="4" face="Arial">Menu</font></td>



<script language="JavaScript1.2">

document.write(&#39;<td align="center" rowspan="100" width="16" bgcolor="#FF6666"><span style="font-size:13px"><p align="center"><font face="Arial Black">M
E
N
U</font></p></span></TD>&#39;)

</script>



</tr>



<script language="JavaScript1.2"><!--

if (document.all||document.layers) {

makeStatic();}



var text=new Array();

var thelink=new Array();



//configura aqui los enlaces - en los text los textos, en thelink su correspondiente link



text[0]="LosRecursosGratis";

text[1]="Promocion de páginas webs";

text[2]="Servicios de Webs";

text[3]="Servicios para visitantes";

text[4]="Publicidad para ganar con tu web";

text[5]="Descargas de programas gratis";

text[6]="Codigos JavaScript";



thelink[0]="http://www.losrecursosgratis.com";

thelink[1]="http://www.losrecursosgratis.com/promocion/promocion.html";

thelink[2]="http://www.losrecursosgratis.com/servicios/servicios.html";

thelink[3]="http://www.losrecursosgratis.com/serviciosvis/serviciosvis.html";

thelink[4]="http://www.losrecursosgratis.com/Publicidad/publicidad.html";

thelink[5]="http://www.losrecursosgratis.com/descarga/dercargar_programas_gratis.html";

thelink[6]="http://www.losrecursosgratis.com/javascript/codigos_javascript.html";



//Aqui se configura el target, pero solo son validos &#39;&#39; (el mismo marco), &#39;new&#39; (nueva ventana), or &#39;framename&#39; (el mismo frame)

var linktarget=&#39;new&#39;



///A PARTIR DE AQUI NO TOCAR NADA////////////////



function navigateie(which){

if (linktarget==&#39;&#39;)

window.location=thelink[which]

else if (linktarget==&#39;new&#39;)

window.open(thelink[which])

else{

temp_var=eval("window.parent."+linktarget)

temp_var.location=thelink[which]

}

}



for (i=0;i<=text.length-1;i++)

if (document.all) {document.write(&#39;<TR><TD height=20 bgcolor=white onclick="navigateie(&#39;+i+&#39;)" onmouseover="className=\&#39;hl\&#39;" onmouseout="className=\&#39;n\&#39;"><FONT SIZE=2 FACE=ARIAL>&#39;+text[i]+&#39;</FONT></TD></TR>&#39;)}

else {document.write(&#39;<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\&#39;yellow\&#39;" onmouseout="this.bgColor=\&#39;white\&#39;" width=131><FONT SIZE=2 FACE=ARIAL>&#39;+text[i]+&#39;</FONT></LAYER></ILAYER></TD></TR>&#39;)}



//-->

</script>

<tr>

<td bgcolor="#0099FF"><font size="1" face="Arial"> </font></td>

</TR>

</table>

<script language="JavaScript1.2">

if (document.all) {document.write(&#39;</DIV>&#39;)}

window.onload=positionmenu

</script>

</LAYER>

Menú barra horizontal oculta desplegable:

Código:

<style>



#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}

#divMenu a{text-decoration:none;}

#divMenu a:hover{color:red;}

</style>

<script language="JavaScript1.2">

/********************************************************************************

Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com

Adaptado por ..::LosRecursosGratis.com::.. (http://www.losrecursosgratis.com)

Copyright (C) 1999 Thomas Brattli @ www.bratta.com

This script is made by and copyrighted to Thomas Brattli 

This may be used freely as long as this msg is intact!

This script has been featured on http://www.dynamicdrive.com

********************************************************************************

Browsercheck:*/

ie=document.all?1:0

n=document.layers?1:0



//These are the variables you have to set:



//How much of the layer do you wan&#39;t to be visible when it&#39;s in the out state?

lshow=60



//How many pixels should it move every step? 

var move=10;



//At what speed (in milliseconds, lower value is more speed)

menuSpeed=40



//Do you want it to move with the page if the user scroll the page?

var moveOnScroll=true



/********************************************************************************

You should&#39;t have to change anything below this.

********************************************************************************/

//Defining variables

var tim;

var ltop;



//Object constructor

function makeMenu(obj,nest){

 * *nest=(!nest) ? &#39;&#39;:&#39;document.&#39;+nest+&#39;.&#39;

 * *this.css=(n) ? eval(nest+&#39;document.&#39;+obj):eval(obj+&#39;.style&#39;) * * *

	this.state=1

	this.go=0

	this.width=n?this.css.document.width:eval(obj+&#39;.offsetWidth&#39;)

	this.left=b_getleft

 * *this.obj = obj + "Object"; *eval(this.obj + "=this")	

}

//Get&#39;s the top position.

function b_getleft(){

	var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);

	return gleft;

}

/********************************************************************************

Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)

********************************************************************************/

function moveMenu(){

	if(!oMenu.state){

 *clearTimeout(tim)

 *mIn()	

	}else{

 *clearTimeout(tim)

 *mOut()

	}

}

//Menu in

function mIn(){

	if(oMenu.left()>-oMenu.width+lshow){

 *oMenu.go=1

 *oMenu.css.left=oMenu.left()-move

 *tim=setTimeout("mIn()",menuSpeed)

	}else{

 *oMenu.go=0

 *oMenu.state=1

	}	

}

//Menu out

function mOut(){

	if(oMenu.left()<0){

 *oMenu.go=1

 *oMenu.css.left=oMenu.left()+move

 *tim=setTimeout("mOut()",menuSpeed)

	}else{

 *oMenu.go=0

 *oMenu.state=0

	}	

}

/********************************************************************************

Checking if the page is scrolled, if it is move the menu after

********************************************************************************/

function checkScrolled(){

	if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop

	if(n) setTimeout(&#39;checkScrolled()&#39;,30)

}

/********************************************************************************

Inits the page, makes the menu object, moves it to the right place, 

show it

********************************************************************************/

function menuInit(){

	oMenu=new makeMenu(&#39;divMenu&#39;)

	scrolled=n?"window.pageYOffset":"document.body.scrollTop"

	oMenu.css.left=-oMenu.width+lshow

	ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;

	oMenu.css.visibility=&#39;visible&#39;

	if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();

}



//Initing menu on pageload

onload=menuInit;

</script>









<div id="divMenu" style="position:absolute; top:250; left:30; width:200; visibility:hidden; background-color:F0F0F0">

<nobr>

	..::LosRecursosGratis.com::.. -

	Trucos JavaScript - 

	MENU

</nobr>

</div>

Saludos, Alhanna

Muchas gracias por los codigo

Saludos