Como crear un menu despegable?

Estado
Cerrado para nuevas respuestas

Remus

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

hay algún codigo html o algo?

Saludos
 

Alhanna

Ex-Mod
Miembro
Aquí te dejo unos menues en codigos html:

Menú desplegable desde la izquierda:

Insertar CODE, HTML o PHP:
<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 ([url]www.dynamicdrive.com[/url])

For full source code, installation instructions,

100's more DHTML scripts, and Terms Of

Use, visit dynamicdrive.com

*/

if (document.all)

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

</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('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a>
')

</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('</div>')

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:

Insertar CODE, HTML o PHP:
              

<script language="JavaScript1.2">

/*

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

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

For full source, usage terms, and 100's more DHTML scripts, visit [url]http://dynamicdrive.com[/url]

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

*/

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('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute;Left : 0px;Top : 20px;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')}

</script>

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

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

<script language="JavaScript1.2">

document.write('<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>')

</script>

</tr>

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

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

makeStatic();}

var text=new Array();

var thelink=new Array();

//configura aquí 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 '' (el mismo marco), 'new' (nueva ventana), or 'framename' (el mismo frame)

var linktarget='new'

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

function navigateie(which){

if (linktarget=='')

window.location=thelink[which]

else if (linktarget=='new')

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('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL>'+text[i]+'</FONT></TD></TR>')}

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

//-->

</script>

<tr>

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

</TR>

</table>

<script language="JavaScript1.2">

if (document.all) {document.write('</DIV>')}

window.onload=positionmenu

</script>

</LAYER>

Menú barra horizontal oculta desplegable:

Insertar CODE, HTML o PHP:
<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 ([url]http://fastway.to/compute[/url]) to DynamicDrive.com

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

Copyright (C) 1999 Thomas Brattli @ [url]www.bratta.com[/url]

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 [url]http://www.dynamicdrive.com[/url]

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

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't to be visible when it'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't have to change anything below this.

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

//Defining variables

var tim;

var ltop;

//Object constructor

function makeMenu(obj,nest){

    nest=(!nest) ? '':'document.'+nest+'.'

    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')      

	this.state=1

	this.go=0

	this.width=n?this.css.document.width:eval(obj+'.offsetWidth')

	this.left=b_getleft

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

}

//Get'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('checkScrolled()',30)

}

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

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

show it

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

function menuInit(){

	oMenu=new makeMenu('divMenu')

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

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

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

	oMenu.css.visibility='visible'

	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>

	[url="http://www.losrecursosgratis.com"]..::LosRecursosGratis.com::..[/url] -

	[url="http://www.losrecursosgratis.com/javascript/codigos_javascript.html"]Trucos JavaScript[/url] - 

	[url="javascript://"]MENU[/url]

</nobr>

</div>

Saludos, Alhanna
 
Estado
Cerrado para nuevas respuestas
Arriba Pie