Menus Desplegables

[ASLAN]

Mi web es Holistica.cl
Está basada en phpBB2 plus 1.53
No tengo instalado mods adicionales
Busqué el tema en este foro y no encontré nada al respecto.

Tengo demasiadas opciones que me interesa ofrecer en el menú de cabecera y no caben todas, por lo tanto, me interesa convertir el tipo de menú tradicional a menus desplegables.
Probé insertando códigos de javascrist pero no me funcionó.

Alguien lo ha logrado o tendrá algun ejemplo a la mano en el cual basarme ???
Gracias

PD: pese a tener instalado Plus me parece más tema de phpBB, por eso publiqué el tema en esta sección.

[ASLAN]

AQUÍ hay ejemplos exactos de lo que busco ... pero son códigos comerciales, es decir, hay que comprarlos para usarlos.

[dllrsoft]

Por qué no pruebas con phpbb xs? Tiene eso ya integrado...

Saludos!!

[ASLAN]

Por qué no pruebas con phpbb xs? Tiene eso ya integrado...

Saludos!! Te refieres al mod eXtreme Styles que viene con Plus ???

Estoy casi seguro (y he buscado bastante) que no permite menus desplegables en la cabecera (por eso señalé: overall_header).

[mitch]

No pero creo el quiere otra cosa, como los menus de windows, que pasas el mouse sobre una palabra, y se despliega un cuadro con mas opciones.... XS trae un menu en el lado lateral que al hacer click en una palabra, aparece una celda abajo con mas opciones...

Deberían haber códigos javascripts, si en la tarde me animo y encuentro algo te comento.

[ASLAN]

No pero creo el quiere otra cosa, como los menus de windows, que pasas el mouse sobre una palabra, y se despliega un cuadro con mas opciones.... XS trae un menu en el lado lateral que al hacer click en una palabra, aparece una celda abajo con mas opciones...

Deberían haber códigos javascripts, si en la tarde me animo y encuentro algo te comento. Exactamente es eso lo que busco.
Te garadeceré que si encuentras algo lo comentes

[dllrsoft]

Ok, perdona que te entendí mal... Para eso también puedes hacer otra cosa, puedes doblar el menú del overall_header, es decir, en lugar de que haya una sóla línea con enlaces, que haya dos líneas con enlaces, también te puede servir...

Saludos!!

[ASLAN]

Ok, perdona que te entendí mal... Para eso también puedes hacer otra cosa, puedes doblar el menú del overall_header, es decir, en lugar de que haya una sóla línea con enlaces, que haya dos líneas con enlaces, también te puede servir...

Saludos!! Gracias por la sugerencia aunque seguiré investigando acerca de los menus desplegables

[dllrsoft]

Ok, es cuestión de gustos jeje

Saludos!!

[mitch]

Encontré este manual: http://www.desarrolloweb.com/articulos/1716.php
resultado: http://www.desarrolloweb.com/articulos/ ... pleto.html

y yo logré esto finalmente: http://www.thekuka.info/mitch/menudesplegable/

Copia el código de fuente, e intentalo... solo tienes que editar esto:

Código: Seleccionar todo

var anclas = new Array ("menu1","menu2")
var capas = new Array("submenu1","submenu2")

(que son la cantidad de menus y de submenus, en orden de izquierda a derecha, puedes llamarlos como sea).

y luego en la tabla, fijate lo marcado en negrita:
[quote]<td><div id=menu1 class=ancla><a href="#" onmouseover="muestra_coloca('submenu1')" onmouseout="oculta_retarda('submenu1')">Foro</a></div></td>[/quoteicy]
eso es lo que se debe hacer para cada menu superior... colocarle la ID, y luego que muestre y coloque el submenu que le corresponde.

y mas abajo, se crean los submenus, lo importante en negrita mira:
[quote]<div id="submenu1" class=recuadros onmouseover="muestra_retarda('submenu1')" onmouseout="oculta_retarda('submenu1')">[/quoteicy]
se le coloca la ID (que es como el nombre) y que muestre y coloque este submenu... y a continuacion se colocan la serie de enlaces que quieras, y cierras con </div>, para poder luego comenzar a hacer otro submenu (en mi caso, submenu2).

Intentalo, es fácil.

PD: Vas a necesitar este archivo si para hacerlo, debes dejarlo en el mismo lugar donde este ubicado el HTML o TPL con el código de los menu
http://www.thekuka.info/mitch/menudesplegable/x_core.js

[ASLAN]

Encontré este manual: http://www.desarrolloweb.com/articulos/1716.php
resultado: http://www.desarrolloweb.com/articulos/ ... pleto.html

y yo logré esto finalmente: http://www.thekuka.info/mitch/menudesplegable/

Copia el código de fuente, e intentalo... solo tienes que editar esto:

Código: Seleccionar todo

var anclas = new Array ("menu1","menu2")
var capas = new Array("submenu1","submenu2")

(que son la cantidad de menus y de submenus, en orden de izquierda a derecha, puedes llamarlos como sea).

y luego en la tabla, fijate lo marcado en negrita:
[quote]<td><div id=menu1 class=ancla><a href="#" onmouseover="muestra_coloca('submenu1')" onmouseout="oculta_retarda('submenu1')">Foro</a></div></td> eso es lo que se debe hacer para cada menu superior... colocarle la ID, y luego que muestre y coloque el submenu que le corresponde.

y mas abajo, se crean los submenus, lo importante en negrita mira:
[quote]<div id="submenu1" class=recuadros onmouseover="muestra_retarda('submenu1')" onmouseout="oculta_retarda('submenu1')">[/quoteicy]
se le coloca la ID (que es como el nombre) y que muestre y coloque este submenu... y a continuacion se colocan la serie de enlaces que quieras, y cierras con </div>, para poder luego comenzar a hacer otro submenu (en mi caso, submenu2).

Intentalo, es fácil.

PD: Vas a necesitar este archivo si para hacerlo, debes dejarlo en el mismo lugar donde este ubicado el HTML o TPL con el código de los menu
http://www.thekuka.info/mitch/menudesplegable/x_core.js[/quoteicy]

Excelente y prolija información.
Doy por solucionada mi duda.
Muchas Gracias Mitch

[mitch]

ASLAN, de nada, espero te sirva.

[ASLAN]

Hay un problema

En un html solo me funciona perfecto.
Pero al incorporarlo al overall_header.tpl (copie el x_core.js a la misma carpeta) se confunde y hace cosas similares a las del calendario de phpBB2 plus.
Creo que esta chocando con otros scripts, styles o variables.
Voy a seguir intentando y luego cuento cómo me fue.

Este es el código del html que me funciona solo

Código: Seleccionar todo

<html>

<head>

<style type="text/css">
A  {font-family:verdana,arial;color:#229944;font-size:12px;text-decoration:none;}
A:Visited  {font-family:verdana,arial;color:#229944;font-size:12px;text-decoration:none;}
A:Active  {font-family:verdana,arial;color:#229944;font-size:12px;text-decoration:none;}
A:Hover  {font-family:verdana,arial;color:#FF8000;font-size:12px;text-decoration:none;}
.recuadros {padding-right:10px; padding-left:10px; padding-top:10px; padding-bottom:10px; position:absolute;background-color:E0FFE0;color:22cc44;border-style:solid;border-color:229944;border-width:1px;visibility:hidden;font-family:verdana,arial;font-size:12px;}
.ancla {position:relative;visibility:visible;}
</style>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
var empezar = false
var anclas = new Array ("menu1","menu2","menu3","menu4")
var capas = new Array("submenu1","submenu2","submenu3","submenu4")
var retardo 
var ocultar

function muestra(capa){
	xShow(capa);
}
function oculta(capa){
	xHide(capa);
}
function posiciona (){
	for (i=0;i<capas.length;i++){
		posx= xOffsetLeft(anclas[i])
		posy= xOffsetTop (anclas[i])
		xMoveTo(capas[i],posx,posy+20)
	}
}

window.onload = function() {
	posiciona()
	empezar = true
}
window.onresize = function() {
	posiciona()
}

function muestra_coloca(capa){
 if (empezar){
	for (i=0;i<capas.length;i++){
		if (capas[i] != capa) xHide(capas[i])
	}
	clearTimeout(retardo)
	xShow(capa)
 }
}

function oculta_retarda(capa){
 if (empezar){
	ocultar =capa
	clearTimeout(retardo)
	retardo = setTimeout("xHide('" + ocultar + "')",1000)
 }
}

function muestra_retarda(ind){
 if (empezar){
	clearTimeout(retardo)
 }
}
</script>
<body>

<table align="center" cellspacing="10">
<tr>

	<td><div id=menu1 class=ancla><a href="#" onmouseover="muestra_coloca('submenu1')" onmouseout="oculta_retarda('submenu1')">Portal</a></div></td>
	<td><div id=menu2 class=ancla><a href="#" onmouseover="muestra_coloca('submenu2')" onmouseout="oculta_retarda('submenu2')">Foro</a></div></td>
	<td><div id=menu3 class=ancla><a href="#" onmouseover="muestra_coloca('submenu3')" onmouseout="oculta_retarda('submenu3')">Quienes Somos</a></div></td>
	<td><div id=menu4 class=ancla><a href="#" onmouseover="muestra_coloca('submenu4')" onmouseout="oculta_retarda('submenu4')">Mi Cuenta</a></div></td>
</tr>
</table>


<div id="submenu1" class=recuadros onmouseover="muestra_retarda('submenu1')" onmouseout="oculta_retarda('submenu1')">
<a href="#" class=enlacesbarra>Base de Conocimientos</a><br>
<a href="#" class=enlacesbarra>Calendario</a><br>
<a href="#" class=enlacesbarra>Intercambio de Maestrias</a><br>
<a href="#" class=enlacesbarra>Noticias por Categoria</a><br>
<a href="#" class=enlacesbarra>Noticias por Fecha</a><br>
<a href="#" class=enlacesbarra>Sanación a Distancia</a><br>
</div>

<div id="submenu2" class=recuadros onmouseover="muestra_retarda('submenu2')" onmouseout="oculta_retarda('submenu2')">
<a href="#" class=enlacesbarra>Buscar</a><br>
<a href="#" class=enlacesbarra>Enlaces</a><br>
<a href="#" class=enlacesbarra>Nuevos Mensajes</a><br>
<a href="#" class=enlacesbarra>Temas Recientes</a><br>
</div>

<div id="submenu3" class=recuadros onmouseover="muestra_retarda('submenu3')" onmouseout="oculta_retarda('submenu3')">
<a href="#" class=enlacesbarra>Administradores</a><br>
<a href="#" class=enlacesbarra>Contactanos</a><br>
<a href="#" class=enlacesbarra>Grupos de Usuarios</a><br>
<a href="#" class=enlacesbarra>Lista de Miembros</a><br>
<a href="#" class=enlacesbarra>Preguntas Frecuentes</a><br>
<a href="#" class=enlacesbarra>Rangos</a><br>
</div>

<div id="submenu4" class=recuadros onmouseover="muestra_retarda('submenu4')" onmouseout="oculta_retarda('submenu4')">
<a href="#" class=enlacesbarra>Mensajes Privados</a><br>
<a href="#" class=enlacesbarra>Perfil</a><br>
</div>

</body>
</html>