Ayuda con la implementación de menú dinámico desplegable para mostrar links al hacer click
Hola, tengo una duda acerca de menús desplegables por así llamarlo...
Tengo una página en dónde quiero poner fotos de revistas pero son varias y quir oque al hacer click sobre el link de imágenes se me desplieguen los nombres de las revistas, sin cambiar de página, algo así como menús en forma de ramas..
Por ejemplo..
+ Revistas +
...Bazaar
...Channels/EUA/2001
...Cristina/2002
...DOO/2004
...Latina/2003
...Life Time
...Eres/2000
...Maxim
...Ocean Drive/2001
...People/2003
...Thalía la Revista/2004
+ Sesiones+
...
...
+ VArias +
Espero puedas ayudarme... Gracias, saludos
Tengo una página en dónde quiero poner fotos de revistas pero son varias y quir oque al hacer click sobre el link de imágenes se me desplieguen los nombres de las revistas, sin cambiar de página, algo así como menús en forma de ramas..
Por ejemplo..
+ Revistas +
...Bazaar
...Channels/EUA/2001
...Cristina/2002
...DOO/2004
...Latina/2003
...Life Time
...Eres/2000
...Maxim
...Ocean Drive/2001
...People/2003
...Thalía la Revista/2004
+ Sesiones+
...
...
+ VArias +
Espero puedas ayudarme... Gracias, saludos
1 Respuesta
Respuesta de riverophues
1
Aquí te mando un ejemplo de menús desplegables, son listas. En ellas podrás usar imágenes y lo que quieras. Si lo haces bonito, te puede quedar un menu muy chulo, poniendo carpetas y cosas así como los menús del explorador de windows.
Ahí te va
<html>
<head>
<title>Untitled</title>
<script language="JavaScript1.2">
<!--
var head="display:''";
function change(){
if(!document.all)
return;
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex;
var nested = document.all[srcIndex+1];
if (nested.style.display=="none") {
nested.style.display='';
}
else {
nested.style.display="none";
}
}
}
document.onclick=change;
</script>
</head>
<body>
<ul style="margin-left:0px; list-style-type:none;">
<li id="foldheader" class="cabenlacerojo">Menu</li>
<ul id="foldinglist" style="display:none; margin-left:8px; list-style-type: none;">
<li id="foldheader">SubMenu 1</li>
<ul id="foldinglist" style="display:none; margin-left:8px; list-style-type: none;">
<li id="foldheader"><a href="#">Opcion 1</a></li>
<li id="foldheader"><a href="#">Opcion 2</a></li>
</ul>
<li id="foldheader">SubMenu 2</li>
<ul id="foldinglist" style="display:none; margin-left:8px; list-style-type: none;">
<li id="foldheader"><a href="#">Opcion 1</a></li>
<li id="foldheader"><a href="#">Opcion 2</a></li>
</ul>
</ul>
</body>
</html>
Ahí te va
<html>
<head>
<title>Untitled</title>
<script language="JavaScript1.2">
<!--
var head="display:''";
function change(){
if(!document.all)
return;
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex;
var nested = document.all[srcIndex+1];
if (nested.style.display=="none") {
nested.style.display='';
}
else {
nested.style.display="none";
}
}
}
document.onclick=change;
</script>
</head>
<body>
<ul style="margin-left:0px; list-style-type:none;">
<li id="foldheader" class="cabenlacerojo">Menu</li>
<ul id="foldinglist" style="display:none; margin-left:8px; list-style-type: none;">
<li id="foldheader">SubMenu 1</li>
<ul id="foldinglist" style="display:none; margin-left:8px; list-style-type: none;">
<li id="foldheader"><a href="#">Opcion 1</a></li>
<li id="foldheader"><a href="#">Opcion 2</a></li>
</ul>
<li id="foldheader">SubMenu 2</li>
<ul id="foldinglist" style="display:none; margin-left:8px; list-style-type: none;">
<li id="foldheader"><a href="#">Opcion 1</a></li>
<li id="foldheader"><a href="#">Opcion 2</a></li>
</ul>
</ul>
</body>
</html>
