elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Menu desplegable con css y html
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Menu desplegable con css y html  (Leído 2,555 veces)
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Menu desplegable con css y html
« 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!


En línea

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


Desconectado Desconectado

Mensajes: 538



Ver Perfil WWW
Re: Menu desplegable con css y html
« Respuesta #1 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.


En línea

WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Re: Menu desplegable con css y html
« Respuesta #2 en: 14 Noviembre 2015, 18:08 pm »

Muchas gracias Enko probaré a ver que tal  :P
En línea

"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Menu desplegable con Flash « 1 2 3 »
Diseño Gráfico
Azielito 22 11,403 Último mensaje 6 Julio 2004, 04:12 am
por Azielito
ayuda con menu desplegable
Diseño Gráfico
z3u2 2 2,178 Último mensaje 15 Noviembre 2005, 04:51 am
por z3u2
Menú desplegable HTML + CSS + JQuery (ayuda) « 1 2 »
Desarrollo Web
SanMagic 13 8,971 Último mensaje 26 Enero 2012, 05:35 am
por SanMagic
Ayuda con menú Desplegable!
Desarrollo Web
ZedGe 1 1,923 Último mensaje 23 Mayo 2013, 15:04 pm
por Zeros1001
Menu desplegable
Desarrollo Web
Robocop8 1 2,125 Último mensaje 26 Agosto 2017, 02:54 am
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines