Imprimir Página - Menu desplegable con css y html

Título: Menu desplegable con css y html
Publicado por: WIитX en 10 Noviembre 2015, 16:04 pm

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!

Título: Re: Menu desplegable con css y html
Publicado por: _Enko en 12 Noviembre 2015, 14:26 pm

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

Con jquery seria algo asi:

Código:

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.

Título: Re: Menu desplegable con css y html
Publicado por: WIитX en 14 Noviembre 2015, 18:08 pm

Muchas gracias Enko probaré a ver que tal :P

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WIитX en 10 Noviembre 2015, 16:04 pm