Comunidad de diseño web y desarrollo en internet online

Menu desplegable avanzado

Citar            
MensajeEscrito el 14 Ene 2008 11:57 am
Buenos dias!! ^^ vereis... tengo un problemilla, en el curro me estan pidiendo un menu Javascript de caracteristicas un tanto desconocidas para mi... recurro a vosotros, a ver si me podeis ayudar!

Podreis ver un ejemplo de lo que me piden en la siguiente web, es el menu de la izquierda, por cierto si veis la web en Firefox es muy probable que no os aparezca.
http://www.prodevelop.es/principal.html

HELP! :crap:

Por marky

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 14 Ene 2008 11:58 am
la cuestion es conseguir esas animaciones tan majas pero consiguiendo que se vean tambien en Firefox

Por marky

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 14 Ene 2008 12:07 pm
¿estátatico, o animado?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

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

firefox
Citar            
MensajeEscrito el 14 Ene 2008 12:14 pm
animado... esta complicado, ¿no? gracias por el interes!

Por marky

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 14 Ene 2008 12:56 pm
Si es estático, no tiene mucha complicación.
Tienes que jugar con el:

Código :

onclick="javascript:for(i=1;i<NN+1;i++){document.getElementById('ul_'+i).style.display='none';} document.getElementById('ul_'+dir).style.display='block';"


en un trozo de código, sería algo así:
<script>
function menu(dir)
{for(i=1;i<NN+1;i++){document.getElementById('ul_'+i).style.display='none';}

_document.getElementById('ul_'+dir).style.display='block';
}

</script>
<style>
div>ul>li {background-image:url('imagen_up.jpg'); background-repeat:no-repeat;}
div>ul>li:hover {background-image:url('imagen_down.jpg');}
li ul {display:none;}

</style>
<div>
<ul>
<li onclick="javascript:menu(1);">primero<ul id="ul_1"><li>1.1</li><li>1.2</li><li>1.3</li></ul></li>
<li onclick="javascript:menu(2);">segundo<ul id="ul_2"><li>2.1</li><li>2.2</li><li>2.3</li></ul></li>
<li onclick="javascript:menu(3);">tercero<ul id="ul_3"><li>3.1</li><li>3.2</li><li>3.3</li></ul></li>
...
<li onclick="javascript:menu(NN);">eNNésimo<ul id="ul_NN"><li>NN.1</li><li>NN.2</li><li>NN.3</li></ul></li>
</ul>
</div>


Lo bueno, es que funciona en ambos navegadores.
Rápido, liviano, y eficaz.

> Cada uno, que lo aplique como guste, modificando lo que sea en cada lugar, pues la función puede dar mucho de sí...

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

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

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.