AYUDA Efecto submenú css

Dudasinformaticas · 14 Ene 2016

oMega_2093 dijo:
Como no pegues el código CSS entero será difícil ayudarte.

En los submenús tienes que ver qué es lo que cambia para que el menú aparezca o desaparezca: a veces es un div que está en visibility: hidden. O a lo mejor es un ul que tiene los li en hidden... O es el ul el que está oculto... La transición tienes que aplicarla sobre el elemento que cambia al poner el ratón encima, por eso pabs11 te preguntó de entrada cuál era el selector. Si aplicas eso a un elemento que no cambia, no consigues nada.

Tienes que poner el CSS y el HTML del menú, de lo contrario...

La parte de PHP no es relevante, pero si tienes el código HTML metido en echo tendrás que pegar aquí eso.

PD: ¿conocías esto? https://github.com/twittem/wp-bootstrap-navwalker es una clase que genera menús WordPress con HTML y clases del framework Bootstrap, por si es lo que estás utilizando.

/* =Menu
-------------------------------------------------------------- */
#access {
float: right;
padding: 10px 160px 0px 0px;
text-align: center;

}
#access li {
float: left;
position: relative;
margin: 0px 0px 0px 0px;

}
#access a {
color: #4E525F;
display: block;
float: left;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
padding: 25px 5px 0px 5px;
height: 41px;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
background: #4E525F;
color: #FFF;
float: center;
}

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;

}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;

}
#access ul li ul {
position: absolute;
background-color: #4E525F;
top: 100px;
left: 0;
width: 100%;
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}
#access ul li ul li {
float: none;
margin: 0;

}
#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
float: none;
line-height: 20px;
font-size: 13px;
font-weight: normal;
height: 100%;
padding: 6px 10px;
color: #FFF;
text-transform: capitalize;

}
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
background-color: #FFF;
color: #555;
border: 1px solid #555;

}
#access ul li ul li ul {
left: 190px;
top: 0;
border: 0 none;
-webkit-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);

}

Esa sería la parte del menú.

pabs11 · 14 Ene 2016

He intentado hacerlo aquí http://codepen.io/pabs11/pen/WrEmBK?editors=110

pero obviamente, como no recordaba, el display no se puede usar con transiciones :ups:

EDIT: ARRRRG. Me he perdido.

josejfernandez · 14 Ene 2016

Mira la parte que cambia:

HTML:

#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;

}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;

}

Así a ojímetro. Este es el código que oculta los submenús y los muestra cuando pasas el ratón por encima.

Por defecto, está ocultando esa parte (el primer bloque de CSS, con display: none). Al pasar el ratón por encima

hover), la muestra (display: block, sobreescribe al display: none). Debes aplicar las transiciones al PRIMER bloque de los dos que he puesto. Prueba a ver...

Dudasinformaticas · 14 Ene 2016

oMega_2093 dijo:
Mira la parte que cambia:

HTML:

#access ul li ul, #access ul li:hover ul ul, #access ul ul li:hover ul ul, #access ul ul ul li:hover ul ul, #access ul ul ul ul li:hover ul ul { display: none; z-index: 9999; } #access ul li:hover ul, #access ul ul li:hover ul, #access ul ul ul li:hover ul, #access ul ul ul ul li:hover ul, #access ul ul ul ul ul li:hover ul { display: block; }

Así a ojímetro. Este es el código que oculta los submenús y los muestra cuando pasas el ratón por encima.

Por defecto, está ocultando esa parte (el primer bloque de CSS, con display: none). Al pasar el ratón por encima hover), la muestra (display: block, sobreescribe al display: none). Debes aplicar las transiciones al PRIMER bloque de los dos que he puesto. Prueba a ver...

lo puse así:
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
-webkit-transition-delay: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}

Y no dió resultado

josejfernandez · 14 Ene 2016

En lugar de los dos bloques que te puse al principio, pon este código:

HTML:

#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: block;
visibility: hidden;
z-index: 9999;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
-webkit-transition-delay: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;
visibility: visible;
}

Como veo que con display no funciona (y buscando por Internet veo que hay problemas al hacer transición sobre esta propiedad), he puesto visibility, a ver qué pasa...

Referencia: http://www.greywyvern.com/?post=337
Lectura relacionada: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Dudasinformaticas · 15 Ene 2016

oMega_2093 dijo:
En lugar de los dos bloques que te puse al principio, pon este código:

HTML:

#access ul li ul, #access ul li:hover ul ul, #access ul ul li:hover ul ul, #access ul ul ul li:hover ul ul, #access ul ul ul ul li:hover ul ul { display: block; visibility: hidden; z-index: 9999; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -webkit-transition-delay: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } #access ul li:hover ul, #access ul ul li:hover ul, #access ul ul ul li:hover ul, #access ul ul ul ul li:hover ul, #access ul ul ul ul ul li:hover ul { display: block; visibility: visible; }

Como veo que con display no funciona (y buscando por Internet veo que hay problemas al hacer transición sobre esta propiedad), he puesto visibility, a ver qué pasa...

Referencia: http://www.greywyvern.com/?post=337
Lectura relacionada: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Buenos días he probado porniendo esto:
/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
-webkit-transition-delay: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;
visibility: visible;
}

Pero tampoco ha surtido efecto.
Gracias

arck · 15 Ene 2016

Ayer al final no pude sacar tiempo y esta mañana le pude sacar 10 minutillos.

A ver si esto es lo que quieres:

@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
background: #4E525F ;
color: #FFF ;
float: center;

}

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
-webkit-animation: fadeIn 5s;
animation: fadeIn 5s;
}

#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;
}

Le puse 5 segundos para que cante mucho la transición, espero que te sirva.

josejfernandez · 15 Ene 2016

Dudasinformaticas dijo:
Pero tampoco ha surtido efecto.
Gracias

Copia y pega lo que te puse yo, que has omitido algunas cosas en tu código.

Dudasinformaticas · 15 Ene 2016

arck dijo:
Ayer al final no pude sacar tiempo y esta mañana le pude sacar 10 minutillos.

A ver si esto es lo que quieres:

@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

¿Dónde pego esa parte exactamente?
Gracias

arck · 15 Ene 2016

en la css
te he pasado el código del css, ponlo así excepto esto y 3 lineas mas el resto es sacado de lo tuyo.

Dudasinformaticas · 15 Ene 2016

oMega_2093 dijo:
Copia y pega lo que te puse yo, que has omitido algunas cosas en tu código.

Buenas Omega acabo de pegar todo tal como está y lo que hace es que al poner el cursor, cuando lo quitas tarda el menú en desaparecer, pero sigue apareciendo rápido, es decir con tu código desaparece más lento pero aparece igual.

Dudasinformaticas · 15 Ene 2016

arck dijo:
en la css
te he pasado el código del css, ponlo así excepto esto y 3 lineas mas el resto es sacado de lo tuyo.

Muchas gracias, era algo muy muy parecido a lo que tenía en mente, así que creo que este valdrá.
¡Muchas gracias!

josejfernandez · 15 Ene 2016

Aquí hablan de ello, te puse el enlace antes: http://www.greywyvern.com/?post=337

Dudasinformaticas · 15 Ene 2016

oMega_2093 dijo:
Aquí hablan de ello, te puse el enlace antes: http://www.greywyvern.com/?post=337

Gracias por tu ayuda Omega.:brindar:

AYUDA Efecto submenú css

Dudasinformaticas

De profesión Chapuzas

pabs11

Chapuzas Senior

josejfernandez

Software Architect

Dudasinformaticas

De profesión Chapuzas

josejfernandez

Software Architect

Dudasinformaticas

De profesión Chapuzas

arck

De profesión Chapuzas

josejfernandez

Software Architect

Dudasinformaticas

De profesión Chapuzas

arck

De profesión Chapuzas

Dudasinformaticas

De profesión Chapuzas

Dudasinformaticas

De profesión Chapuzas

josejfernandez

Software Architect

Dudasinformaticas

De profesión Chapuzas