ayuda con submenu en css

bLaCkH0Le

Hola. Ando buscando un menu con submenu horizontal del mismo tipo que http://www.chipspain.com

Necesito que cuando entre en en una sección, se ponga fijo el submenu y cambie cuando desplazes el ratón por el menu. ¿Sabeis de algun sitio donde pillar el codigo?

Gracias!

KarlosWins

.

NeB1

#1 si el que te gusta es el de chipspain, coje el de chip spain. Aquí tienes un ejemplo tipico http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html

Lo que buscas se llama linear dropdown menu, por si quieres googlear un poco.

Para modificar ese menú que te he pasado y que se mantenga un submenú visible cada vez, tienes que darle el atributo visibility:visible al submenu (el ul que hay dentro del li) que quieres ver, añadiendole por ejemplo la clase 'active'.

es decir:

<ul id="menu">
  <li> 
     <a href=''>Item 1</a>
     <ul id="submenu" class="active">
     </ul>
  </li>
</ul>

y en el CSS

.active{
    visibility:visible !important;
}

bLaCkH0Le

hola neb1, gracias por la ayuda.

Tengo un problemilla y es que si le pongo el atributo active nunca se oculta cuando paso el mouse por otro apartado. Siempre se queda activo ese. Necesito que si cambiamos ponemos el raton sobre otro item que se cambie y si no pasamos por ninguno que se quede en la sección que estamos.

NeB1

#4 ostia no lo había pensado.

La verdad que ahora mismo, sin javascript no se me ocurre... prueba quitandole el !important pero no sé...

bLaCkH0Le

no me importaria ponerle una funcion javascript o usar ajax.

aNuBiS

#6 Con JS sería suficiente. Tienes que hacer una función en js que se ejecute "on mouse over" y que active el atributo ese de visibilitie y desactive los demás (para que no se quede ninguno encima de otro).
Si alguien sabe una forma mas eficiente que la diga, que yo de js poquito y chapucero XD

Makalister

dices q no te importaria usar ajax y no sabes ocultar una cajarrr??

visibility:hidden conserva la posicion (el alto y el anxo a los demas objetos)
display:none desaparece pro completor

javascipt

obj.style.display='none';
obj.style.visibility='hidden';

Usuarios habituales

  • Makalister
  • aNuBiS
  • bLaCkH0Le
  • NeB1
  • KarlosWins