Hola a todos.
Estoy construyendo una pequeña página web en donde he querido añadir un menú desplegable para ofrecer una serie de descargas de fotografias.
Encontre un código muy bueno que me gustó mucho porque era lo que necesitaba que consiste en crear un menú desplegable que al picar sobre él pues se despliega en varios niveles y tenerlo asi todo más ordenador.
El código es el siguiente:
1/ Inserta este código dentro de las etiquetas <head> y </head>
<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url('fold.gif')}
#foldinglist{list-style-image:url('list.gif')}
//-->
</style>
<script language="JavaScript1.2">
<!--
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
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=''
event.srcElement.style.listStyleImage="url(open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(fold.gif)"
}
}
}
document.onclick=change
//-->
</script>
2/ Inserta este código dentro de las etiquetas <body> y </body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="238" id="AutoNumber1" height="13">
<tr>
<td width="238" height="13" valign="top"></td>
</tr>
<tr>
<td width="238" height="331" valign="top">
<ul>
<li id="foldheader">Desplegable 1
<ul id="foldinglist" style="display:none" style="&{head}">
<li><a href="http://www.xxxxxx.com">Enlace 1</a></li>
<li><a href="http://www.xxxxxx.com">Enlace 2</a></li>
<li><a href="http://www.www.xxxxxx.com">Enlace 3</a></li>
</ul>
</li>
<li id="foldheader">Desplegable 2
<ul id="foldinglist" style="display:none" style="&{head}">
<li><a href="http://www.xxxxxx.com">Enlace 1</a></li>
<li><a href="http://www.xxxxxx.com">Enlace 2</a></li>
<li><a href="http://www.xxxxxx.com">Enlace 3</a></li>
</ul>
</li>
<li id="foldheader">Desplegable 3
<ul id="foldinglist" style="display:none" style="&{head}">
<li><a href="http://www.xxxxxx.com">Enlace 1</a></li>
<li><a href="http://www.xxxxxx.com">Enlace 2</a></li>
<li id="foldheader">SubDesplegable 1
<ul id="foldinglist" style="display:none" style="&{head}">
<li><a href="http://www.xxxxxxr.com">Enlace 1</a></li>
<li><a href="http://www.xxxxxx.com">Enlace 2</a></li>
</ul>
</li>
<li><a href="http://www.xxxxxx.com">Enlace 3</a></li>
<li><a href="http://www.xxxxxx.com">Enlace 4</a></li>
</ul>
</li>
</ul>
<script language="JavaScript1.2">
<!--
/**
* (www.yomaster.com)
*/
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(" ")
for (i=0 ; i < openresults.length ; i++){
foldinglist[openresults[i]].style.display=''
document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(open.gif)"
}
}
if (document.all){
var nodelength=foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}
function check(){
for (i=0 ; i <= nodelength ; i++){
if (foldinglist[i].style.display=='')
openones=openones + " " + i
}
document.cookie=window.location.pathname+"="+openones
}
if (document.all)
document.body.onunload=check
//-->
</script>
</td>
</tr>
</table>
En Internet Explorer se ve perfectamente, solo tengo que activar el Activex para que me funcione y no me lo bloquee pero en Firefox no hay manera de que se despliegue, se queda totalmente estático y la verdad es que me interesa que funcione en Firefox más que en IE porque mi proyecto va sobre este navegador.
Me gustaría saber si alguien sabe que etiqueta o código puedo añadir para solucionar este problema.
Gracias de antemano.
Un saludo
tb puedes usar solo css para hacer un desplegable.
Creo que tu problema reside en:
if(!document.all)
return;
Si mal no recuerdo el document.all es solamente para IE, por lo que en Firefox no te funcionará.
Un saludo