Foros del Web » Creando para Internet » CSS »

Menú con filter que se me resiste - No sé como ordenarlo

Estas en el tema de Menú con filter que se me resiste - No sé como ordenarlo en el foro de CSS en Foros del Web. Hola a todos. Ando algo desquiciado desde hace tres días con un menu que no alcanza a dominar. Se trata de un menu para filtrar ...
  #1 (permalink)  
Antiguo 22/12/2014, 15:33
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Menú con filter que se me resiste - No sé como ordenarlo

Hola a todos.

Ando algo desquiciado desde hace tres días con un menu que no alcanza a dominar.

Se trata de un menu para filtrar categorías de portfolio en wordpress.

Hasta ahora he logrado, más o menos, lo que buscaba, pero tengo dos problemas para los que no encuentro solución, y estoy casi convencido de que son unas tonterías en css, pero que yo, seminovato, no doy para más.

Os dejo unos pantallazos de cómo está y de cómo quisiera que estuviera.

1ª IMAGEN



2ª IMAGEN



3ª IMAGEN



Intentaré explicarme lo mejor posible.

En primer lugar me gustaría poder centrar el "menú" principal. Si lo intento con display=inline-block o con position=abolute se me fasticia todo lo demás y aún es más complicado solucionarlo. Así que hasta ahora sólo he conseguido que se viera más o menos bien el menú desplazado a la izquierda.

Lo otro que me trae totalmente de cabeza es que cuando abro el submenú del penúltimo item del menú ("Géneros"), el submenú se despliega correctamente (no centrado como quisiera pero bien), pero me desplaza el último item del menú principal ("Roles") por detrás del submenú que había desplegado.

Lo que necesito es que ese item de menú ("Roles") no se mueva del sitio. Que no se rompa el menú, vamos.

La verdad es que no sé si me estoy sabiendo explicar de forma comprensiva. Cualquier duda, por favor, preguntadmela. Estoy muy interesado en resolver esto lo más pronto que pueda.

Os dejo copia de todo el css que estoy usando ahora, aunque sé que estará lleno de errores.

Código CSS:
Ver original
  1. /*==== PORTFOLIO FILTERS ====*/
  2.  
  3. #filters {
  4.     margin-top: 10px;
  5.     margin-bottom: 0px;
  6.     text-align: center;
  7.     display: block;
  8.     float: none;
  9.     z-index: 2;
  10.     position: relative;
  11. }
  12. #filters ul {
  13.     margin: 0;
  14.     list-style: none;
  15.     padding: 0;
  16. }
  17. #filters ul li {
  18.     display: inline;
  19. }
  20. #filters ul li a {
  21.     display: block;
  22.     float: left;
  23.     padding: 2px 5px;
  24.     color: inherit;
  25.     margin-right: 5px;
  26.     margin-bottom: 5px;
  27.     font-weight: bold;
  28. }
  29. #filters ul li a h3 {
  30.     font-size: 18px;
  31.     padding: 2px 6px 0px;
  32.     border: 2px solid;
  33. }
  34. #filters ul li a:hover h3, #filters ul li a.active h3 {
  35.     color: #FFD600;
  36. }
  37.  
  38. #filters li > ul {
  39.     display: none;
  40. }
  41.  
  42. #filters li:hover > ul {
  43.     display: inline-block;
  44.     width: 100%;
  45.     padding-top: 20px;
  46.     margin-top: -27px;
  47. }
  48. .genre:hover {
  49.     cursor: default;
  50. }
  51. .roles:hover {
  52.     cursor: default;
  53. }

La web, por si queréis ver en vivo lo que os comento es: xxx

Espero que algún alma caritativa me pueda echar una mano, porque lo estoy llevando fatal.

Última edición por pzin; 27/12/2014 a las 03:35 Razón: Eliminado enlace por petición de usuario
  #2 (permalink)  
Antiguo 22/12/2014, 15:50
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Por cierto, y por si ayuda, añado también la parte del php que conforma el menú. Se me olvidó agregarlo antes.

Código PHP:
Ver original
  1. <!-- START PORTFOLIO FILTERING -->  
  2.    <div  id="filters" class="sixteen columns">
  3.  
  4.             <ul class="styled-list clearfix">
  5.                 <li><a href="#" data-filter="*" class="active"><h3><?php _e('Todos', 'doblerol'); ?></h3></a></li> 
  6.                
  7.                                 <li><a href="#" data-filter=".term-votados"><h3><?php _e('+ Votados', 'doblerol'); ?></h3></a></li>
  8.  
  9.                 <li><a href="#" data-filter=".term-cortos-finalistas"><h3><?php _e('Cortos finalistas', 'doblerol'); ?></h3></a></li>
  10.  
  11.                 <li class="genre"><a><h3><?php _e('Géneros', 'doblerol'); ?></h3></a>
  12.                                         <ul>
  13.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  14.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  15.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  16.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  17.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  18.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  19.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  20.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  21.  
  22.                     </ul></li>
  23.  
  24.                 <li class="roles"><a><h3><?php _e('Roles', 'doblerol'); ?></h3></a>
  25.                                         <ul>
  26.                        <li><a href="#" data-filter=".term-2personajes"><h3>2 personajes</h3></a></li>
  27.                        <li><a href="#" data-filter=".term-3personajes"><h3>3 personajes</h3></a></li>
  28.                        <li><a href="#" data-filter=".term-4personajes"><h3>4 personajes</h3></a></li>
  29.                     </ul></li>
  30.                         </ul>
  31.  
  32.        
  33.  
  34.     </div><!-- END PORTFOLIO FILTERING -->
  #3 (permalink)  
Antiguo 22/12/2014, 17:36
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 11 años, 9 meses
Puntos: 10
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

para centrar el menu puedes hacer esto

<div style="text-align:center">

</div>
  #4 (permalink)  
Antiguo 23/12/2014, 01:55
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Muchísimas gracias por responder y por el aporte, moginn, pero no funciona. Supongo que porque el propio css rompe la orden del div.

Mira que estoy haciendo pruebas y cambiándolo todo y no hay manera de encontrar la solución. Parece un puzzle.
  #5 (permalink)  
Antiguo 23/12/2014, 10:03
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 11 años, 9 meses
Puntos: 10
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

para centrar un div puedes hacer esto:

margin-left:auto;margin-right:auto;
  #6 (permalink)  
Antiguo 23/12/2014, 10:12
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Para centrarlo lo mejor es que metas cada uno de los menús en un <nav> (o <div> para html 4 e inferior), si puedes dale un ancho fijo que puedes conocer haciendo clic derecho en casi cualquier navegador y a partir de ahí usa cualquiera de los sistemas de este enlace: http://ksesocss.blogspot.com/2012/05/centrando-al-centro-con-css-16-maneras.html

Para evitar lo de "la bajada" lo que se me ocurre es separar los submenús del menú, ocultarlos poniéndoles una clase con display:none; y mostrarlos con javascript cuándo pulses en el menú superior (Cambiandole la clase de antes por otra visible), no es lo más eficiente, pero se verá bien seguro. Si te interesa te paso el código.

Un saludo
  #7 (permalink)  
Antiguo 23/12/2014, 11:26
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Vaya. Me ha sido de mucha ayuda, la verdad. Ya estoy con ello. Lo de centrar lo llevo más o menos bien. Con lo de que no se desplace he conseguido algo cercano a lo que quiero sólo con css, pero no me convence.

Lo cierto es que te estaría muy agradecido si me pasaras el código que mencionas. Seguro que me vendrá genial.

Gracias de nuevo por tu inestimable ayuda, Sarlit. De verdad.
  #8 (permalink)  
Antiguo 24/12/2014, 02:01
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Vale, el código javascript es tal que así:

Código:
function updateMenu(identificacion) {
    var menu = document.getElementById(identificacion);
    if (menu.className == 'visible') {
        menu.className = 'invisible';
    } else {
        menu.className = 'visible';
    }
}
Las clases "visible" e "invisible" del CSS son tan simples como:

Código:
.invisible
{
	display:none;
}.visible
{
	display:block;
}
Lo único que tienes que hacer es a los submenús ponerle un ID para reconocerlos y una class, normalmente invisible al inicio y en el onclick de cada link del menú principal le pasas el ID a este código para que te cambie la clase del submenú que te interesa a visible.

Siendo un menú, yo modificaría esto para que aparte de mostrarte el submenú que te interesa te oculte el resto.
  #9 (permalink)  
Antiguo 24/12/2014, 04:34
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Muchas gracias, Sarlit.

Ayer mismo estuve con el mismo código que googleando pude encontrar. No conseguí hacerlo funcionar, supongo que porque no me enteraba de cómo colocar un id distinto para cada submenú.

De cualquier modo más tarde volveré a intentarlo con las pautas que me acabas de dar. De nuevo te estoy agradecidísimo. A ver si con esto logro lo que busco.


Por otra parte....

He conseguido finalmente colocar casi todo sólo jugando con el css, pero ahora se me ha agregado otro problema que no sé cómo resolver... Ni tampoco sé si tiene solución, la verdad.

Resulta que he conseguido centrar el menú que tengo. Que he conseguido que se abran los submenús como pretendía. Pero ahora cuando el submenú se despliega no tiene límite a un lado. Quiero decir, que las órdenes de "margin" no van, y en cuanto hago más pequeño el explorador o cuando se ve en móviles el submenú se sale por completo por el lateral, en vez de agrupar los items (el menú principal si lo hace correctamente).

Os dejo pantallazos de como se ve y como quisiera que se viera, tanto en pc como en móviles (espero que se entienda bien):

IMAGEN 1: De cómo se ve y cómo debería verse en ordenador




IMAGEN 2: De cómo se ve y cómo debería verse en móviles (o empequeñeciendo el explorador)





A ver si alguien me pudiera dar una pista de cómo podría hacer para que los "margin" funcionaran, o en todo caso decirme qué estoy haciendo mal o que parte me he saltado, que seguro hay más de una.

Copio código css que estoy usando ahora:

Código CSS:
Ver original
  1. /*==== PORTFOLIO FILTERS ====*/
  2.  
  3. #filters {
  4.     text-align: center;
  5.     z-index: 2;
  6.     margin-bottom: 15px;
  7.     margin-top: -15px;
  8.     display: block;
  9. }
  10.  
  11. #filters ul {
  12.     display: inherit;
  13.     list-style: outside none none;
  14. }
  15.  
  16. #filters ul li {
  17.     display: inline-block;
  18. }
  19.  
  20. #filters ul li a {
  21.     color: inherit;
  22.     font-weight: bold;
  23. }
  24.  
  25. #filters ul li a h3 {
  26.     border: 2px solid;
  27.     padding: 0 12px;
  28.     margin: 0px 10px 0px 0px;
  29. }
  30.  
  31. #filters ul li a:hover h3, #filters ul li a.active h3 {
  32.     color: #ffd600;
  33. }
  34.  
  35. #filters li > ul {
  36.     display: none;
  37.     float: right;
  38. }
  39.  
  40. #filters li:hover > ul {
  41.     display: inline-flex;
  42.     display: -webkit-inline-flex;
  43.     display: -moz-inline-flex;
  44.     padding-top: 10px;
  45. }
  46.  
  47. .genre:hover {
  48.     cursor: default;
  49.     max-width: 92px;
  50. }
  51.  
  52. .roles:hover {
  53.     cursor: default;
  54.     max-width: 75px;
  55. }
  56.  
  57. .roles > ul h3 {
  58.     padding: 0 12px !important;
  59.     width: 86px;
  60.     margin-left: 10px !important;
  61. }
  62.  
  63. .genre > ul a:hover h3, .genre > ul a.active h3, .roles > ul a:hover h3, .roles > ul a.active h3 {
  64.     color: #ffd600 !important;
  65. }
  66.  
  67. .genre a:hover h3, .genre a.active h3, .roles a:hover h3, .roles a.active h3 {
  68.     color: #fff !important;
  69. }
  #10 (permalink)  
Antiguo 24/12/2014, 05:45
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

A ojo parece que el submenú no esta dentro de un div bien definido o que ese div tiene una propiedad absolute o similar... Si no es así, un par de preguntas:

¿El submenú lo tienes hecho por tablas o con divs? ¿Podrías pasar el html del menú entero para ver exactamente a que referencias?
  #11 (permalink)  
Antiguo 24/12/2014, 06:00
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Esta todo en un div, menú y submenús. Pero probablemente no esté bien estructurado. Te paso el html que me pides, por supuesto.


Código HTML:
Ver original
  1. <!-- START PORTFOLIO FILTERING -->  
  2.    <div  id="filters" class="sixteen columns">
  3.  
  4.             <ul class="styled-list clearfix">
  5.                 <li><a href="#" data-filter="*" class="active"><h3><?php _e('Todos', 'doblerol'); ?></h3></a></li> 
  6.                
  7.                                 <li><a href="#" data-filter=".term-votados"><h3><?php _e('+ Votados', 'doblerol'); ?></h3></a></li>
  8.  
  9.                 <li><a href="#" data-filter=".term-cortos-finalistas"><h3><?php _e('Cortos finalistas', 'doblerol'); ?></h3></a></li>
  10.  
  11.                 <li class="genre"><a><h3><?php _e('Géneros', 'doblerol'); ?></h3></a>
  12.                                         <ul>
  13.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  14.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  15.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  16.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  17.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  18.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  19.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  20.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  21.  
  22.                     </ul></li>
  23.  
  24.                 <li class="roles"><a><h3><?php _e('Roles', 'doblerol'); ?></h3></a>
  25.                                         <ul>
  26.                        <li><a href="#" data-filter=".term-2personajes"><h3><?php _e('2 personajes', 'doblerol'); ?></h3></a></li>
  27.                        <li><a href="#" data-filter=".term-3personajes"><h3><?php _e('3 personajes', 'doblerol'); ?></h3></a></li>
  28.                        <li><a href="#" data-filter=".term-4personajes"><h3><?php _e('4 personajes', 'doblerol'); ?></h3></a></li>
  29.                     </ul></li>
  30.                         </ul>
  31.        
  32.  
  33.     </div><!-- END PORTFOLIO FILTERING -->
  #12 (permalink)  
Antiguo 24/12/2014, 06:19
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 3 meses
Puntos: 60
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Lo mejor es qeu subas la web a un servidor remoto para poder verlo, o si no puedes, que metas el menú dentro de un codepen, un jsbin o un jsfiddle para poder revisarlo facilmente
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #13 (permalink)  
Antiguo 24/12/2014, 07:03
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Hola, Zeromm.

La web está subida.

En www.certamen.doblerol.com

Un saludo.
  #14 (permalink)  
Antiguo 25/12/2014, 19:40
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

A ver... Tengo una buena noticia, que no es otra que (al fin) he logrado lo que buscaba, centrar los menus y hacer que aparezcan tal como me había marcado como objetivo.

Lo he hecho con un javascript muy sencillo (sencillo ahora que sé como va, pero que me ha costado tres días descubrirlo -porque soy un novato-). Además, tengo la sensación de a partir de aquí será más fácil conseguir solucionar el problema que ahora me ha surgido (si alguien puede ayudarme, claro).

Como digo, ahora tanto el menú como los submenús aparecen y están organizados como quería, pero el problema con el que me encuentro ahora es que una vez aparece el submenú, me es imposible acercar el puntero sin que desaparezca.

He usado un onmouseover y un onmouseout para que los submenús aparezcan y desaparezcan sólo cuando se pasa el puntero encima. No me interesa que se queden a la vista con un click o algo así, sino que sean más dinámicos.

La cosa está en que no tengo ni idea (llevo días sin dormir a cuenta de estoy y mi cerebro no da para más) de que debo hacer para que los submenús se queden estático al menos para que el puntero pase por encima para seleccionar el item que el usuario quiera.

Como siempre no sé si me estoy sabiendo explicar demasiado bien.

Os dejo el html y el css que ahora estoy usando (los he cambiado bastante respecto a los primeros que puse):


HTML

Código PHP:
Ver original
  1. <!-- START PORTFOLIO FILTERING -->  
  2.    <div  id="filters" class="sixteen columns">
  3.  
  4.             <ul class="styled-list clearfix">
  5.                 <li><a href="#" data-filter="*" class="active"><h3><?php _e('Todos', 'doblerol'); ?></h3></a></li> 
  6.                
  7.                                 <li><a href="#" data-filter=".term-votados"><h3><?php _e('+ Votados', 'doblerol'); ?></h3></a></li>
  8.  
  9.                 <li><a href="#" data-filter=".term-cortos-finalistas"><h3><?php _e('Cortos finalistas', 'doblerol'); ?></h3></a></li>
  10.  
  11.                 <li><a><h3><div id="genre" onmouseover="document.getElementById('subgenre').style.display = 'block';" onmouseout="document.getElementById('subgenre').style.display = 'none';"><?php _e('Género', 'doblerol'); ?></div></h3></a></li>
  12.  
  13.                 <li><a><h3><div id="roles" onmouseover="document.getElementById('subroles').style.display = 'block';" onmouseout="document.getElementById('subroles').style.display = 'none';"><?php _e('Roles', 'doblerol'); ?></div></h3></a></li>
  14.  
  15.                         </ul>
  16.  
  17.                                         <div id="subgenre" style="display: none;"><ul>
  18.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  19.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  20.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  21.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  22.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  23.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  24.                        <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
  25.                        <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
  26.  
  27.                     </ul></div>
  28.  
  29.                                         <div id="subroles" style="display: none;"><ul>
  30.                        <li><a href="#" data-filter=".term-2personajes"><h3><?php _e('2 personajes', 'doblerol'); ?></h3></a></li>
  31.                        <li><a href="#" data-filter=".term-3personajes"><h3><?php _e('3 personajes', 'doblerol'); ?></h3></a></li>
  32.                        <li><a href="#" data-filter=".term-4personajes"><h3><?php _e('4 personajes', 'doblerol'); ?></h3></a></li>
  33.                     </ul></div>
  34.  
  35.        
  36.  
  37.     </div><!-- END PORTFOLIO FILTERING -->



CSS

Código CSS:
Ver original
  1. /*==== PORTFOLIO FILTERS ====*/
  2.  
  3. #filters {
  4.     margin-top: 10px;
  5.     margin-bottom: 0px;
  6.     text-align: center;
  7.     display: block;
  8.     float: none;
  9.     z-index: 2;
  10.     position: relative;
  11. }
  12. #filters ul {
  13.     margin: 0;
  14.     list-style: none;
  15.     padding: 0;
  16. }
  17. #filters ul li {
  18.     display: inline-block;
  19. }
  20. #filters ul li a {
  21.     display: block;
  22.     float: left;
  23.     padding: 2px 5px;
  24.     color: inherit;
  25.     margin-right: 5px;
  26.     margin-bottom: 5px;
  27.     font-weight: bold;
  28. }
  29. #filters ul li a h3 {
  30.     font-size: 18px;
  31.     padding: 2px 6px 0px;
  32.     border: 2px solid;
  33. }
  34. #filters ul li a:hover h3, #filters ul li a.active h3 {
  35.     color: #FFD600;
  36. }
  37.  
  38. #genre:hover {
  39.     cursor: default;
  40. }
  41.  
  42. #roles:hover {
  43.     cursor: default;
  44. }



Para que veáis a qué me refiero exactamente os paso el link de la web (los menús en cuestión están haciendo scroll abajo hasta la sección "Cortometrajes en concurso"):

www.certamen.doblerol.com


Gracias, Sarlit, porque sin tu sugerencia no hubiera llegado hasta aquí.
  #15 (permalink)  
Antiguo 26/12/2014, 01:46
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Por lo que veo el problema que tienes es que el submenú de roles es demasiado chico como para llegar a el sin hacer un mouseout. Tienes dos soluciones:

La fácil es poner un apartado más en ese submenú para que el usuario pueda desplazarse por el menú sin hacer un mouseout, si no se te ocurre que ponerle hazla con visibility:hidden y así nadie notara que esta allí salvo que se meta en el código (Si haces esto último yo pondría dos casillas nuevas una antes y otra después para evitar que se descentre).

La otra consiste en meterlo todo dentro de un div que ocupe tanto el menú como el submenu y ponerle a ese div la opción del mouseout, así podrías moverte por el menú fácilmente pero tendrías que cambiar tu javascript para que solo te mostrara uno de los submenus cada vez. Esta es más difícil a primeras, pero parece algo más limpia, ya es cosa tuya elegir cual usar.

Un saludo.
  #16 (permalink)  
Antiguo 26/12/2014, 01:56
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Por cierto, si usas la primera opción el visibility:hidden va en el <a style="visibility:hidden">, si lo pones en el <li> no solucionarás el problema


Última edición por Sarlit; 26/12/2014 a las 02:09
  #17 (permalink)  
Antiguo 26/12/2014, 03:10
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Al final he optado por el camino fácil y he añadido otra opción al menú.

Me había estado planteando si jugando con padding podría ampliar la zona activa para el mouseover, pero por más que no intenté no logré nada.

No me va mal colocar la nueva opción, así que genial.

Te agradezco mucho y de corazón la ayuda, Sarlit. Obviamente sin las pautas que me has ido dando hubieran pasado probablemente semanas hasta que diera el el clavo. Espero que pueda devolverte en alguna ocasión la ayuda, aunque es raro que un aprendiz pueda mostrar nada al maestro

Un saludo y de nuevo gracias.
  #18 (permalink)  
Antiguo 26/12/2014, 11:43
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Lamento "reabrir" el tema, pero es que ahora me asalta otra duda respecto al menú.

¿De qué forma podría conseguir un efecto Fade- in Fade-out implementándolo al código js del div de los menús?

O, en todo caso, si se pudiera realizar con css.

El html es:

Código PHP:
Ver original
  1. <li><div id="genre" onmouseover="document.getElementById('subgenre').style.display = 'block';" onmouseout="document.getElementById('subgenre').style.display = 'none';"><a><h3><div id="genre" onmouseover="document.getElementById('subgenre').style.display = 'block';" onmouseout="document.getElementById('subgenre').style.display = 'none';"><?php _e('Género', 'doblerol'); ?></h3></a></div></li>
  2.  
  3.                 <li><div id="roles" onmouseover="document.getElementById('subroles').style.display = 'block';" onmouseout="document.getElementById('subroles').style.display = 'none';"><a><h3><?php _e('Roles', 'doblerol'); ?></h3></a></div></li>
  4.  
  5.                         </ul>
  6.  
  7.                                         <div id="subgenre" style="display: none;" onmouseover="document.getElementById('subgenre').style.display = 'block';" onmouseout="document.getElementById('subgenre').style.display = 'none';"><ul>
  8.                        <li><a href="#" data-filter=".term-absurdo"><h3><?php _e('Absurdo', 'doblerol'); ?></h3></a></li>
  9.                        <li><a href="#" data-filter=".term-cinenegro"><h3><?php _e('Cine negro', 'doblerol'); ?></h3></a></li>
  10.                        <li><a href="#" data-filter=".term-comedia"><h3><?php _e('Comedia', 'doblerol'); ?></h3></a></li>
  11.                        <li><a href="#" data-filter=".term-documental"><h3><?php _e('Documental', 'doblerol'); ?></h3></a></li>
  12.                        <li><a href="#" data-filter=".term-drama"><h3><?php _e('Drama', 'doblerol'); ?></h3></a></li>
  13.                        <li><a href="#" data-filter=".term-parodia"><h3><?php _e('Parodia', 'doblerol'); ?></h3></a></li>
  14.                        <li><a href="#" data-filter=".term-satira"><h3><?php _e('Sátira', 'doblerol'); ?></h3></a></li>
  15.                        <li><a href="#" data-filter=".term-suspense"><h3><?php _e('Suspense', 'doblerol'); ?></h3></a></li>
  16.  
  17.                     </ul></div>
  18.  
  19.                                         <div id="subroles" style="display: none;"onmouseover="document.getElementById('subroles').style.display = 'block';" onmouseout="document.getElementById('subroles').style.display = 'none';"><ul>
  20.                        <li><a href="#" data-filter=".term-2personajes"><h3><?php _e('2 personajes', 'doblerol'); ?></h3></a></li>
  21.                        <li><a href="#" data-filter=".term-3personajes"><h3><?php _e('3 personajes', 'doblerol'); ?></h3></a></li>
  22.                        <li><a href="#" data-filter=".term-4personajes"><h3><?php _e('4 personajes', 'doblerol'); ?></h3></a></li>
  23.                        <li><a href="#" data-filter=".term-5personajes"><h3><?php _e('∞ personajes', 'doblerol'); ?></h3></a></li>
  24.                     </ul></div>

Lamento la tabarra.

Última edición por marlbran; 26/12/2014 a las 11:48
  #19 (permalink)  
Antiguo 27/12/2014, 04:40
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 3 meses
Puntos: 60
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

A ver, una duda, esque hay muchos mensajes y si me los leo todos puede ser un rato largo xD, ¿para mostrar los submenús de la web, he leido mal o estás usando javascript para hacer eso?

Luego, acabo de entrar en la web y yo al pasar el ratón por encima de los menús, a mi no me muestra ningún submenú...
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #20 (permalink)  
Antiguo 27/12/2014, 10:22
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Hola, Zeromm.

Espero que la mayoría de los que entren a este hilo al menos se lean si no todos los posts, por lo menos la mitad . Más que nada porque seguro que alguna cosa se puede aprender de ellos. Al menos a mi mismo me han servido mucho, no sólo para solucionar mi duda, sino también para saber un poco más que lo que sabía antes de escribir el primer mensaje.

Dicho esto (que espero que si te hayas leído ), en efecto, he usado javascript para el menú.

Es muy probable que no se te abra ningún submenú, tal como cuentas, porque estés pasando el ratón por encima del menú equivocado. No se trata del menú principal (el que queda en el top de la web), sino del menú que se encuentra en la sección "Cortometrajes a concurso" (un poco más abajo), donde si se despliegan sin problema los submenús (ves? para eso sirve también leer el post, aunque sea por encima).

Un saludo.

Última edición por marlbran; 27/12/2014 a las 10:37
  #21 (permalink)  
Antiguo 27/12/2014, 16:51
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 3 meses
Puntos: 60
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Para hacer un menú que al pasar el ratón aparezcan otros submenús, no te hace falta javascript para naaada de nada, eso se hace con css, y es tan facil como algo así:

Cita:
.submenus{
opacity: 0;
visibility: hidden;
}

ul li.menuconsubmenus:hover .submenus{
opacity: 1;
visibility: visible;
}
Y luego el efecto de fade in/fade out es tan simple como añadirle a .submenus un "transition: all 1s;" Aquí un ejemplo hecho a lo rápido

El javascript, a nivel visual, se debe usar para aquello que el css no llega, que para aspectos visuales cada vez se debe usar menos, ya que el css está avanzando mucho en ese terreno. Si empiezas a meter javascript para que un menú aparezca al pasar el ratón, acabarás llenando la página de código js que hará que tu web sea más pesada/lenta.
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #22 (permalink)  
Antiguo 27/12/2014, 17:36
 
Fecha de Ingreso: diciembre-2014
Mensajes: 12
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

Si, si, Zeromm, si tienes razón en lo que dices y, además, ya lo sabía. Pero la historia es que el menú que tenía (y que no es un simple nav) se me resistía por completo con css. De eso que abriera este hilo y, de haberlo leído, habrías visto cuales eran los problemas con los que me encontraba y porqué tuve que agarrarme a javascript.

Ya hubiera querido hacerlo sólo con css, pero no había manera. No es un menú al uso, sino un filter para abrir distintas categorías de un portfolio. Cuando intentaba hacerlo con css y solucionaba algo se me descuadraba por otro sitio, y así hasta cuatro días sin dormir.

En serio que con css estaba siendo imposible. Por eso ahora necesito saber como hacer el fade con js, cómo meterlo en el código que ya tengo.

Oye, no estaría mal que te leyeras el hilo para saber por lo menos que ha pasado antes de que llegaras. Sé que da pereza, pero es lo lógico, sino pasa lo que pasa, que uno da por hecho algunas cosas desconociéndolas. Y yo necesito ayuda con lo que la necesito, no con otra cosa. Lo digo de buen rollo.
  #23 (permalink)  
Antiguo 29/12/2014, 01:49
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Menú con filter que se me resiste - No sé como ordenarlo

A ver, al hacer un cambio de clase de CSS para hacer que aparezca el submenú no puedes hacer un efecto fadein/out al uso con javascript, pero tienes otras opciones con el CSS.

La más lógica y me imagino que fácil sería que a la clase "visible" le dieras el efecto de fadein, el problema lo tendrías con la "invisible" porque sería más complicado ponerle el fadeout sin que te hiciera cosas raras (que por otro lado en un principio no se verían porque el menú esta más abajo durante la carga de la web)

La otra opción es meterlo todo en un div con la propiedad "overflow-y:hidden" ajustado al tamaño del menú al que le metas una altura fija que amplies cuándo pasas el ratón sobre el menú con una animación. Para conseguir el fadeout solo tendrías que retrasar la opción de volver invisible el submenú dentro de tu código javascript lo que durase la animación.

Perdona el retraso en contestarte pero estuve de fin de semana.

Un saludo.

Etiquetas: color, hover, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:29.