crear Menu en javascript

Citar

Escrito el 05 Abr 2008 02:19 pm

hola a todos la verdad me gustaria saber como puedo crear una especie de menu como el de esta pagina:

http://www.phpbb-es.com/foro/index.php

que al momento de dar click se despliege el sub contenido o sub tema

gracias

Por konoyek

6 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 05 Abr 2008 07:39 pm

Ese menú es vastante sencillo.
Se puede hacer de varias maneras, se me ocurren por ejemplo:

Código :

<script>
window.onload=function()
{for(i=1;i<=1;i++){document.getElementById('menu'+i+'_sub').style.display='none';}}
</script>
<div id="menu1" onclick="javascript:var DD=document.getElementById(this.id+'_sub'); DD.style.display=(DD.style.display=='none'?'block':'none');" style="cursor:pointer;">Menú1
<div id="menu1_sub" style="display:block;">Submenú1</div>
</div>

Según La100rra (que sabe lo que dice), "display:none" da problemas (algunos) de indexación con los buscadores, (aunque también lo indexa).
Aún así, creo que sería mi preferida.

Código :

<script>
window.onload=function()
{for(i=1;i<=1;i++){document.getElementById('menu'+i).style.height='20px';}}
</script>
<div id="menu1" onclick="javascript:this.style.height=(parseFloat(this.style.height)>20?'20px':'40px');" style="height:40px;overflow:hidden; cursor:pointer;">Menú<br />Submenú1</div>

Así no habrá ningún problema con los robots (tipo googleBot), pero tienes que poner los altos uno a uno. Es quizá más laborioso.

*NOTA: El script primero, en cada caso, que se carga en el "onload", asegura la accesibilidad de navegadores que no tengan activado el JavaScript, pues "por defecto", los navegadores están todos desplegados inicialmente, y es el propio javascript (de estar activado), el que se encarga de activarlos para el inicio de la visualización de la WEB.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 06 Abr 2008 04:34 pm

gracias por responder pero la verdad no entendi muy bien, primero que tengo tengo que colocar el javascript en el head correcto? a la vez tengo que colocar un codigo en el menu el cual llame al javascript para poderlo abrir.... de todas formas no se me gustaria que me explicaras un poco mas... como que aclares o si puedes coocar un ejemplo

gracias

Por konoyek

6 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 06 Abr 2008 06:51 pm

Sí, el script, va en el <head>.
El xHTML (usease, los "<div>"), va en el <body>.
En lo que he puesto, ya está escrito el "onclick", que llama a la función que "mueve" el menú.

konoyek escribió:

[...] o si puedes coocar un ejemplo

¿Ejemplo?
¿más?
Pero si ya te he puesto el código entero!!

Te recomiendo que te mires algunos tutoriales de xHTML, pues veo que lo llevas algo fresco aún.
Y no estaría de más que hicieras lo propio con algún otro de JavaScript.

Te diría que estos dos:

y para relacionar los conceptos de ambos, y "dominar" el asunto:

(muy baratos, unos 12€ cada uno)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 08 Abr 2008 02:18 pm

hola a todos tengo el siguiente problema el cual no me lo esta leyendo php nuke y me gustaria saber en que estoy fallando

este es el codigo javascript

<script language='javascript' type="text/javascript">
function mySelect(form){
form.select();
}
function ShowOrHide(d1, d2) {
if (d1 != '') DoDiv(d1);
if (d2 != '') DoDiv(d2);
}
function DoDiv(id) {
var item = null;
if (document.getElementById) {
item = document.getElementById(id);
} else if (document.all){
item = document.all[id];
} else if (document.layers){
item = document.layers[id];
}
if (!item) {
}
else if (item.style) {
if (item.style.display == "none"){ item.style.display = ""; }
else {item.style.display = "none"; }
}else{ item.visibility = "show"; }
}
</script>

el cual lo ingreso en el head de mi theme,

pero cuando coloco estes div <div id='menu1' style='display:none;z-index:1;'>contenido</div>
y esta url para que cargue y se obtenga lo que estoy buscando <a href="javascript:ShowOrHide('menu1','')">Abrir y cerrar capa</a>
lo muestra todo normal me gustaria saber en donde colo bn el javascript o en que parte estoy fallando.... gracias

Por konoyek

6 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 08 Abr 2008 02:19 pm

Cabe aclarar que no me esta escondiendo los div?????'

Por konoyek

6 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

crear Menu en javascript

Escribe una respuesta rapida