MEnu con imagenes

[LoUiMaNiAkO]

hola alguien me puede ayudar a crear un menu como el de esta web?
que al darle click se despliege un submenu pero con imagenes de fondo :D

[ikhuerta]

Buenas,

las imagenes de fondo suelen controlarse con CSS.

Para ello hay una propiedad llamada "background" en la que puedes definir de donde sacar la imagen, su repetición y donde colocarla...

para este caso crearias una clase llamada por ejemplo "fondo_etiqueta_menu" y con javascript solo mostrarias un div normal que contubiese varios divs con esa clase:

Código:

<div class="menu_oculto">
     <div class="fondo_etiqueta_menu"> <a href="tulink.htm">Elemento 1</a></div>
     <div class="fondo_etiqueta_menu"> <a href="tulink.htm">Elemento 2</a></div>
     <div class="fondo_etiqueta_menu"> <a href="tulink.htm">Elemento 3</a></div>
[...]
</div>

Podrías definir entonces tu css como algo asi:

Código:

.div_que_muestra_menu{position:relative; height:30px; width:100px; [etc...]}
.menu_oculto{display:none; position:absolute; top:30px; left:0px;}
.fondo_etiqueta_menu{
   width:100px;
   height:30px;
   background: url(../images/tufondo.gif) no-repeat;
   text-align:center;
}

.fondo_etiqueta_menu a{color:#FFF; text-decoration:none; outline:none;}
.fondo_etiqueta_menu a:hover{color:#CCC; text-decoration:none; outline:none;}

Para terminar metes el menu oculto dentro del div_que_muestra_el_menu y juegas con el display del menu con onmouseover y onmouseout.

Código:

<div class="div_que_muestra_menu" onmouseover="document.getElementById('submenu').style.display='block';" onmouseout="document.getElementById('submenu').style.display='none';">
<div>Pon el ratón encima para mostrar el menú </div>
     <div id="submenu" class="menu_oculto">
     <div class="fondo_etiqueta_menu"> <a href="tulink.htm">Elemento 1</a></div>
     <div class="fondo_etiqueta_menu"> <a href="tulink.htm">Elemento 2</a></div>
     <div class="fondo_etiqueta_menu"> <a href="tulink.htm">Elemento 3</a></div>
[...]
  </div>

</div>

Eso para empezar...

Intnenta entender cada paso.

Mas adelante ya lo haras con funciones complejas javascript. ;)