Menu desplegable con css y html

Iniciado por WIитX, 10 Noviembre 2015, 16:04 PM

0 Miembros y 1 Visitante están viendo este tema.

WIитX

Hola necesito vuestra ayuda  ;D

Mirar estoy haciendo un menu en css y html desplegable que al pasar el cursor por encima del menu se despliegue la lista de sub-menus hasta ahí bien el problema llega esque quiero por ejemplo al pasar el raton por el menu de inicio se desplieguen todos los sub-menus de inicio, perfil, temas os dejo un pequeño gráfico la cuestión esque quiero que se bajen todos los desplegables al pasar el raton por uno de ellos lo quiero para introducirlo en un theme de wordpress esque por mas que miro no encuentro nada estoy intentando hacerlo pero no hay manera T.T''


| Inicio | | Perfil | | Temas || Descargas |
---------  --------
|Index1| |Perfil1|
|Index2| |Perfil2|

Muchas gracias!
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)

_Enko

Cuando haces hover en algun item, primero debes hacer desaparecer todos los demas y solamente activas el actual.

Con jquery seria algo asi:

function clearPopUps(){
$('#popmenu-item-0').css('display', 'none');
$('#popmenu-item-1').css('display', 'none');
$('#popmenu-item-2').css('display', 'none');
$('#popmenu-item-3').css('display', 'none');
$('#popmenu-item-4').css('display', 'none');
}

$('.popup-menu').hover(function() {
clearPopUps(); //<<<<<<<<<<<<<<******************
$('#popmenu-item-' + $(this).attr('data-target')).css('display', 'block');
$('.popup-menu-item').css('display', 'block');    
}, function() {
$('.popup-menu-item').css('display', 'none');
});

$('.popup-menu-item').hover(function() {
$('.popup-menu-item').css('display', 'block');
}, function() {
$('.popup-menu-item').css('display', 'none');
});
$(window).scroll(function(){
clearPopUps();
});

.popup-menu  es un ul/li que tiene la lista de los menus.
Cada li tiene un atributo data-target que apunta al popup-menu-item que se quiere mostrar.
El window.scroll es para que cuando se haga el scroll los popups desaparezcan, de lo contrario en una tablet van a estar alli forever.

Saludos.

WIитX

Muchas gracias Enko probaré a ver que tal  :P
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)