Entrar

Menu desplegable

jhon1946 · · Solicitar retirada
Buenos dias amigos quiero insertar un menu desplegable en la barra de navegacion de mi web y encontre un script el cual funciona pero verticalmente y no lo he podido poner horizontal, quiero su ayuda para esto y si es posible que se despliegue con tansolo poner el cursor encima de antemano muchas gracias.

Aca va el html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<!-- Incluyo el archivo exterior con la clase Menu de javascript -->
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
<!--
//Creo una instancia de la clase Menu
var menu1= new Menu();

//Creo una propiedad "items", la cual es el array de ítems que tendrá nuestro menu, la creo fuera de la clase ya que nos permite personalizar el menu sin tener que editar la clase.
menu1.items = new Array(["item-0","javascript:;","Alternative"],["item-1","javascript:;","Blues"],["item-2","javascript:;","Jazz"],["item-3","javascript:;","Reggae"]);
//Creo una propiedad "suitems", la cual es el array de sub ítems que apareceran dentro de cada ítem.
menu1.subitems = new Array([["subitem-0","javascript:;","Boyz","_blank"],["subitem-1","javascript:;","Do You Feel","_blank"],["subitem-2","javascript:;","New Wave","_blank"]],[["subitem-0","javascript:;","Six Silver Strings","_blank"],["subitem-1","javascript:;","United We Swing","_blank"],["subitem-2","javascript:;","Keep On Walkin","_blank"]],[["subitem-0","javascript:;","Cornell 1964","_blank"],["subitem-1","javascript:;","Juniflip","_blank"],["subitem-2","javascript:;","Search For The New","_blank"]],[["subitem-0","javascript:;","Bongolution","_blank"],["subitem-1","javascript:;","Living Legacy","_blank"],["subitem-2","javascript:;","Reggae Gold 2007","_blank"]]);
-->
</script>
<style type="text/css">

/* Personalizo el aspecto del menú */
body { font-family: "Trebuchet MS"; }
#menu { width: 150px; padding: 0; border-bottom: solid #5cc4ff 1px; }
#menu div { border-top: solid #5cc4ff 1px; background: #c2e9ff; }
#menu a { padding-left: 10px; text-decoration: none; color: #00598c; font-weight: 700; display: block; width: 140px; font-size: 1em; }
#menu a:hover { background: #d1eeff; }
#menu ul { margin: 0; padding: 0; font-size: 0.9em; background: #f0faff; overflow: hidden; height: 0; }
#menu li { list-style: none; font-size: 0.8em; padding: 0; }
#menu li a { padding-left: 25px; width: 125px; }
#menu li a:hover { color: #0086d2; background: #daf3ff; }

</style>
</head>
<!-- En el onLoad del body debo ejecutar el método "escribe" que me permite escribir el menu pero luego de asegurarnos que el DIV "menu" ya este cargado en la página -->
<body onLoad="menu1.escribe('menu',22,8);">
<div id="menu">

</div>
</body>
</html>



Y aca esta el .js

// Creo la clase Menu

function Menu(){
//Esta propiedad me dice cual es el ítem actual abierto.
this.actual;
//Esta propiedad me dice si un ítem está abierto o no.
this.estado = false;
//Esta propiead almacena el total de ítems que tiene el menú.
this.total;
//Metodo que se encarga de escribir los ítems y sub ítems del menu, asegurándose de dejar a todos los ítems sin desplegar.
this.principal;

this.stringfunc = "\" onClick=\"menu1.despliega(";

this.altosfinales = new Array();

this.velocidad;

this.escribe = function(contenedor,alto,velocidad){

this.principal = document.getElementById(contenedor);
this.total = this.items.length;
this.velocidad = velocidad;

for(var i=0;i<this.total;i++){
this.principal.innerHTML+= "<div id=\"" + this.items[0] + "\"><a href=\"" + this.items[1] + this.stringfunc + i + ");\" alt=\"" + this.items[2] + "\">" + this.items[2] + "</a></div>";

this.principal.innerHTML+= "<ul id=\"sub" + this.items[0] + "\">";

for(var k=0;k<this.subitems.length;k++){
document.getElementById("sub" + this.items[0]).innerHTML+= "<li><a href=\"" + this.subitems[1] + "\" alt=\"" + this.subitems[0] + "\" target=\"" + this.subitems[3] + "\">" + this.subitems[2] + "</a></li>";
}
this.principal.innerHTML+= "</ul>"

document.getElementById("sub" + this.items[0]).style.height = "0px";

this.altosfinales = this.subitems.length * alto;

}

}

this.despliega = function(itemdiv){

for(var i=0;i<this.total;i++){
var principal = document.getElementById("subitem-" + i);
if(itemdiv == i){
if(itemdiv == this.actual && this.estado == false){
principal.style.height = "0px";
this.estado = true;
}else{
principal.style.height = this.altosfinales + "px";
this.estado = false;
}
}else{
principal.style.height = "0px";
}
}
this.actual = itemdiv;
}

}


function Desplegable(){

this.stringfunc = "\" onClick=\"menu1.despliegaacor(";

this.alturaparciala = 0;

this.ultimosubmenu;

this.estadoclick = true;

this.escribeacordeon = function(contenedor,alto,velocidad){
this.escribe(contenedor,alto,velocidad);
}


this.despliegaacor = function(itemdiv){

if(this.estadoclick == true){

var raiz = this;
var principalactual;
var sigueabriendo;

function abre(principal,est){

raiz.estado = false;

if(est){
principalactual = principal;
}

raiz.alturaparciala = raiz.alturaparciala + raiz.velocidad;

if(raiz.alturaparciala >= principalactual.alturaparcialc){
raiz.ultimosubmenu = principalactual;
clearTimeout(inter);
raiz.alturaparciala = 0;
raiz.estadoclick = true;
//alert(raiz.estadoclick);

}else{
principalactual.style.height = raiz.alturaparciala + "px";
var inter = setTimeout(abre,10);
}

}

function cierra(principal,est,sigue){

if(est){
principalactual = principal;
sigueabriendo = sigue;
}

principalactual.alturaparcialc = principalactual.alturaparcialc - raiz.velocidad;

if(principalactual.alturaparcialc <= 0){
clearTimeout(inter);
principalactual.style.height = "0px";
if(sigueabriendo){
abre(sigueabriendo,true);
raiz.estadoclick = false;
}else{
raiz.estadoclick = true;
}
//alert(raiz.estadoclick);
}else{
principalactual.style.height = principalactual.alturaparcialc + "px";
var inter = setTimeout(cierra,10);
}

}



for(var i=0;i<this.total;i++){

var principal = document.getElementById("subitem-" + i);

principal.alturaparcialc = this.altosfinales;

if(principal.alturaparcialc > 0){

if(itemdiv == i){
if(itemdiv == this.actual && this.estado == false){
cierra(principal,true);
this.estado = true;
this.ultimosubmenu = undefined;
}else{
if(this.ultimosubmenu){
cierra(this.ultimosubmenu,true,principal);
}else{
abre(principal,true);

}
}

}

}

}

this.actual = itemdiv;

}

if(this.total == 0){
this.estadoclick = true;
}
}

}

Desplegable.prototype= new Menu();
siddel77 · · Solicitar retirada
¿Podrías poner un link del lugar de donde sacaste el script?
Porque así tal vez sea mas facil que leyendo todo el código

Saludos!!
Intersystem · · Solicitar retirada
Creo que es el mismo que uso yo.

Pero yo lo utilizo con css y no con js.

Te dejo el css y el cod por si te sirve:

* {
padding: 0px;
outline: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
html, body { width: 100%;}
body {
font-family: Verdana, arial,
helvetica, sans-serif;
height: inherit;
background-image: url(fondo.jpg);
}

#menues {
font-size: 0.7 em;
width: 225px;
float: left;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 0px;
}
#menues ul { list-style-type: None;}
#menues ul li.nivel1 { width: 220px;}
#menues ul li { text-align: Center;}
#menues ul li.primera { border-top: Solid 1px #fff;}

#menues ul li a {display: Block;text-decoration: None;color:
#000;background-color: #e6ecee;border: Solid 2px #9ac1c9;border-top: None;
padding: 8px 8px 9px;position: Relative;font-weight:bold;font-size:12px;
text-align:left;display:block;}

#menues ul li:hover {position: Relative;background-color: #399;color: #000;}
#menues ul li a:hover,
#menues ul li:hover a.nivel1 {background-color: #D2DFE3;
color: #000;position: Relative;}
#menues ul li a.nivel1 {display: Block!important;display: None;
position: Relative;}
#menues ul li ul {display: None;}
#menues ul li:hover > ul {display: Block;position: Absolute;left: 220px;
top:-1px;}


#menues ul li ul li a {width: 220px;background-color: #E6ECEE;
color: #000;position: Relative;}
#menues ul li ul li a:hover {position: Relative;background-color: #D7DFE2;
color: #000;}

#menues ul li a.nivel1ie {width: 220px;padding: 0px;}

#menues ul li a.subnivel {padding-bottom: 8px;}
#menues ul li a:hover ul.nivel2,
#menues ul.nivel2 li a:hover ul.nivel3,
#menues ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;
left: 238px;top:-1px;}
table.falsa {border-collapse:collapse;border:0px;
float: Left;}


#col {margin: 0px;padding: 0px; outline: 0; height:100%}

MENU
<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid">
</li><li><a href="#">R</a></li>
<li><a href="#">I</a></li>
<li><a href="#">L</a></li>
<li><a href="#">C</a></li>

<li class="nivel1 primera"><a href="#" class="nivel1">B</a>
<!--[if lte ie 6]><a href="#" class="nivel1ie">L<table class="falsa"><tr><td><!-->
<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">P</a></li>
<li><a href="#">Pe</a></li>
<li><a href="#">C</a></li>
</ul>
<!--[if lte ie 6]></td></tr></table></a><!-->
</li>