Tutoriales de Javascript

Menú lateral con submenús en java
Introducción

Solo tienes que copear el código que esta abajo y descargar las imagenes minus131.gif y plus131.gif para que funcione correctamente el script.
Puedes descargar el ejemplo funcionando al final del documento.



<html>
<head>
<title>Menú lateral con submenús</title>
</head>
<p align="center"><b>Menú lateral con submenús</b></p>

<style>
A	{ font-family : Verdana; color:white; background-color:white; 
text-decoration: none;}
A:Visited	{color :#000000;}
A:Hover {background-color:lightgreen; font-style:normal;}
A:Active	{color : lightgreen;}
</style>
<script>
var menublock=new Array() // no need to change this
var plus_i=0 // no need to change this

menublock[0]="Verdana;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+	// fontsize sublinks
"#000000;"+	// fontcolor sublinks
"0;"+	// fontweight sublinks, 1 means bold, 0 means normal
"Actualidad informática|#|;"+ // text|URL|target of mainlink
"Portales de informática|submenu11.html|main;"+	// text|URL|target of first sublink
"Revistas de informática|submenu12.html|main;" // text|URL|target of second sublink 

menublock[1]="Verdana;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+	// fontsize sublinks
"#000000;"+	// fontcolor sublinks
"0;"+	// fontweight sublinks, 1 means bold, 0 means normal
"Diseño|#|;"+	// text and URL of first mainlink
"Recursos generales|submenu21.html|main;"+	// text|URL|target of mainlink
"Gráficos|submenu22.html|main;"+	// text|URL|target of first sublink
"Iconos|submenu23.html|main;"+	// text|URL|target of second sublink 
"Imágenes|submenu24.html|main;"+	// text|URL|target of thirth sublink 
"Salvapantallas|submenu25.html|main;"	// text|URL|target of fourth sublink 

// The following block is different. It contains a mainlink without submenus.
// Take care to set the ";;;;" exactly as seen below.
menublock[2]="Arial;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
";;;;"+ // leave it empty
"no submenu|main.html|main;" // text and URL of mainlink

menublock[3]="Verdana;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+	// fontsize sublinks
"#000000;"+	// fontcolor sublinks
"0;"+	// fontweight sublinks, 1 means bold, 0 means normal
"Hardware|#|;"+	// text and URL of mainlink
"Hardware recursos|submenu31.html|main;"+	// text and URL of first sublink
"Pc Consultas|submenu32.html|main;"+	// text and URL of second sublink
"Drivers|submenu33.html|main;"+ // text and URL of thirth sublink 
"Dlls|submenu34.html|main;"+	// text and URL of thirth sublink 
"Empresas|submenu35.html|main;"	// text and URL of thirth sublink


menublock[4]="Verdana;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+	// fontsize sublinks
"#000000;"+	// fontcolor sublinks
"0;"+	// fontweight sublinks, 1 means bold, 0 means normal
"Office - Windows - Unix|#|;"+	// text and URL of mainlink
"Trucos Office|submenu41.html|main;"+	// text and URL of first sublink
"Trucos Windows|submenu42.html|main;"+	// text and URL of second sublink
"Access|submenu43.html|main;"+ // text and URL of thirth sublink 
"Excel|submenu44.html|main;"+	// text and URL of thirth sublink 
"Unix - Linux|submenu45.html|main;"	// text and URL of thirth sublink



menublock[5]="Verdana;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+	// fontsize sublinks
"#000000;"+	// fontcolor sublinks
"0;"+	// fontweight sublinks, 1 means bold, 0 means normal
"Lenguajes programación|#|;"+	// text and URL of mainlink
"Recursos Generales|submenu51.html|main;"+	// text and URL of first sublink
"Visual Basic|submenu52.html|main;"+	// text and URL of second sublink
"C++|submenu53.html|main;"+ // text and URL of thirth sublink 
"Delphi|submenu54.html|main;"+	// text and URL of thirth sublink 
"Javascript|submenu55.html|main;"+	// text and URL of thirth sublink
"ASP|submenu56.html|main;"	// text and URL of thirth sublink


menublock[6]="Verdana;"+ // font mainlink
"1;"+	// fontsize mainlink
"#000000;"+	// fontcolor mainlink
"1;"+	// fontweight mainlink, 1 means bold, 0 means normal
"Verdana;"+ // font sublinks
"1;"+	// fontsize sublinks
"#000000;"+	// fontcolor sublinks
"0;"+	// fontweight sublinks, 1 means bold, 0 means normal
"Underground|#|;"+	// text and URL of mainlink
"Recursos Generales|submenu61.html|main;"+	// text and URL of first sublink
"Portales Hacker|submenu62.html|main;"+	// text and URL of second sublink
"Cracks|submenu63.html|main;"+ // text and URL of thirth sublink 
"Descargas|submenu64.html|main;"+	// text and URL of thirth sublink 
"Juegos|submenu66.html|main;"+	// text and URL of thirth sublink
"DVD-CDR|submenu66.html|main;"	// text and URL of thirth sublink

// No need to change anything below 
//********************************************************

var menusplit
var urlsplit
var font_weight_main
var font_weight_sub
var font_weight_sub

var minusimg=new Image()
minusimg.src="minus131.gif"

var plusimg=new Image()
plusimg.src="plus131.gif"

var showsubmenus=new Array()
for (i=0;i<=menublock.length-1;i++) {
showsubmenus[i]=-1
}

var plusminusimg=new Array()
for (i=0;i<=menublock.length-1;i++) {
plusminusimg[i]=plusimg.src
}

function openandclose(visi) {
showsubmenus[visi]=(-1)*showsubmenus[visi]
var menucontent=""
if (showsubmenus[visi]==1) {plusminusimg[visi]=minusimg.src}
if (showsubmenus[visi]==-1) {plusminusimg[visi]=plusimg.src}
menucontent+="<table border=0>"
for (i=0;i<=menublock.length-1;i++) {
menusplit=menublock[i].split(";")
urlsplit=menusplit[8].split("|")
if (menusplit[3]==1) {font_weight_main="<b>"}
if (menusplit[3]==0) {font_weight_main=""}
if (menusplit[7]==1) {font_weight_sub="<b>"}
if (menusplit[7]==0) {font_weight_sub=""} 
menucontent+="<tr><td>"


if (menusplit[9].length==0) {
menucontent+="</td>"
menucontent+="<td>"
menucontent+=font_weight_main
menucontent+="<a href="+urlsplit[1]+" target="+urlsplit[2]+">"
menucontent+="<font face="+menusplit[0]+" color="+menusplit[2]+" 
size="+menusplit[1]+">"
menucontent+=urlsplit[0]
menucontent+="</font></a></td></tr>"
plus_i++ 
}

if (menusplit[9].length!=0) {
var thismainmenu=i+plus_i
menucontent+="<a href=javascript:openandclose("+i+")>"
menucontent+="<img src="+plusminusimg[i]+" border=0></a></td>"
menucontent+="<td>"
menucontent+=font_weight_main
menucontent+="<a href=javascript:openandclose("+i+")>"
menucontent+="<font face="+menusplit[0]+" color="+menusplit[2]+" 
size="+menusplit[1]+">"
menucontent+=urlsplit[0]
menucontent+="</font></a></td></tr>"

if (showsubmenus[i]==1) {
for (ii=9;ii<=menusplit.length-1;ii++) {
urlsplit=menusplit[ii].split("|")
menucontent+="<tr><td></td><td>"
menucontent+=font_weight_sub
menucontent+="<a href="+urlsplit[1]+" target="+urlsplit[2]+">"
menucontent+="<font face="+menusplit[4]+" color="+menusplit[6]+" 
size="+menusplit[5]+">"
menucontent+=urlsplit[0]
menucontent+="</font></a></td></tr>"
}
}
} 
}
menucontent+="</table>"
if (document.all) {
menu.innerHTML=menucontent
}
if (document.layers) {
document.menu.document.write(menucontent)
document.menu.document.close()
}
}
// - end of Javascript - -->
</script>

</head>
</b></font></p>
<body onLoad="openandclose(1000)" bgcolor="#FFFFFF">
<div id="menu" style="position:absolute;top:60px;left:0px"></div>
<base target="principal">
<p align="center">Imágenes:<br>
<a href="minus131.gif"><font color="#0000FF">minus131.gif</font></a>&nbsp;
<a href="plus131.gif"><font color="#0000FF">plus131.gif</font></a></p>
</body>
</html>
</head>


Autor: S/A DescargarDescargar

Comentarios en "Menú lateral con submenús en java"

Table 'programa_programas.t_comentarios' doesn't exist