Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

[SOLUCIONADO] Elemento del menu horinzontal wordpress

Estas en el tema de Elemento del menu horinzontal wordpress en el foro de WordPress en Foros del Web. Hola amigos, tengo este problemita con el menu de wordpress. Cuando un subelemnto es dado click se dirige a esa categoria pero el elemento principal ...
  #1 (permalink)  
Antiguo 29/09/2014, 21:06
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 8 años, 3 meses
Puntos: 2
Elemento del menu horinzontal wordpress

Hola amigos, tengo este problemita con el menu de wordpress.

Cuando un subelemnto es dado click se dirige a esa categoria pero el elemento principal no cambia el background, lo que necesito mis amigos es que cuando el elemento padre cambien el background cuando este dentro de unos de sus subelemento.



Como lo muestra la imagen estoy en la categoria Epic Win y el elemento no cambia el color como lo muestro en la imagen siguiente:



Aqui mas abajo les dejo el codigo CSS:

Código CSS:
Ver original
  1. /*Menu top*/
  2. #nav{
  3.     width: 1120px;
  4.     position: relative;
  5.     top:0;
  6.     left: 0;
  7.     right: 0;
  8.     z-index:999;
  9.     height: 49px;
  10.     margin-bottom: 30px;
  11.     margin: 0 auto;
  12.     background: #333;
  13.     color: #fff;
  14.     border-bottom: 5px solid #418cc7;
  15.     overflow:visible;
  16.     -webkit-transition: all 0.5s ease;
  17.     -moz-transition:    all 0.5s ease;
  18.     -o-transition:      all 0.5s ease;
  19.     -ms-transition:     all 0.5s ease;
  20.     transition:         all 0.5s ease;
  21. }
  22.  
  23. #nav ul{
  24.     clear:left;
  25.     text-align:center;
  26.     width: 1120px;
  27.     padding:0;
  28.     margin:0 auto;
  29.     list-style-type:none;
  30. }
  31. #nav ul li {
  32.  
  33.     float: left;
  34.         border-left: 1px solid #444444;
  35. border-right: 1px solid #000000;
  36.    
  37.  
  38.     }
  39. #nav ul li:first-child{
  40.     border-left: none;
  41.    
  42. }
  43. #nav ul li:last-child{
  44.     border-right: none;
  45.    
  46. }
  47. #nav ul li a{
  48.     float:left;
  49.     text-decoration:none;
  50.     color: #fff;
  51.     font-weight:bold;
  52.     padding: 15px 12px 15px 12px;
  53.     font-size: 14px;
  54.     text-transform:uppercase;
  55.     position: relative;
  56. -webkit-transition: all 0.5s ease;
  57.     -moz-transition:    all 0.5s ease;
  58.     -o-transition:      all 0.5s ease;
  59.     -ms-transition:     all 0.5s ease;
  60.     transition:         all 0.5s ease;
  61.    
  62.    
  63. }
  64. #nav ul li a:hover {
  65.    
  66.     float:left;
  67.     text-decoration:none;
  68.     background: #444444;
  69.     color: #fff;
  70.     font-weight:bold;
  71.     font-size: 14px;
  72.     position: relative;
  73.    
  74. }
  75. #nav ul li:hover > a {
  76.     color: #fff;
  77.     background:#444444;
  78.     text-decoration:none;
  79. }
  80.  
  81. #nav li ul{
  82.     display: none;
  83.     position:absolute;
  84.     margin-top: 49px;
  85.     text-align:left;
  86.     margin-left:-2px;
  87.     z-index: 0;
  88.     width: 192px;
  89.      -webkit-box-shadow: 0 1px 5px #33;
  90.     -moz-box-shadow: 0 1px 5px #333;
  91.     box-shadow: 0 1px 5px #333;
  92. -webkit-transition: all 0.2s ease;
  93.    
  94. }
  95.  
  96. #nav li:hover > ul{
  97.     display: block;
  98.     border: none;
  99.  
  100.  
  101.     }
  102. #nav li li{
  103.     border: none;
  104.     float:none;
  105.    
  106. }
  107. #nav li li a{
  108.     width: 170px;
  109.     background:#333;
  110.     padding:10px;
  111.     border-left: 1px solid #000;
  112.     border-right: 1px solid #000;  
  113.     border-bottom: 1px solid #000;
  114. -webkit-transition: all 0.5s ease;
  115.     -moz-transition:    all 0.5s ease;
  116.     -o-transition:      all 0.5s ease;
  117.     -ms-transition:     all 0.5s ease;
  118.     transition:         all 0.5s ease;
  119.     }
  120. #nav li li a:hover{
  121.     color: #fff;
  122.     background: #444444 url(imagenes/submenu.jpg) top left repeat-y;
  123.     }
  124. #nav ul li.current-menu-item < a, #nav ul li.current_page_item < a{
  125.     color: #fff;
  126.     background:#418cc7;
  127.     text-decoration:none;
  128.     }
  129. #nav ul li.current-menu-item a:hover, #nav ul li.current-menu-parent a:hover{
  130.     color: #fff;
  131.     background: #418cc7;
  132.     text-decoration: none;
  133.     }
  134. #nav li.current-menu-item ul li a, #nav li.current-menu-parent ul li a {
  135.     background:#333;
  136.     color: #fff;
  137.    
  138.     }
  139. #nav li.current-menu-item ul li a:hover, #nav li.current-menu-parent ul li a:hover {
  140.     background:#444444 url(imagenes/submenu.jpg) top left repeat-y;
  141.     color: #fff;
  142.    
  143.     }
  144. #nav li.current-menu-parent ul li.current-menu-item a{
  145.     background: #444444 url(imagenes/submenu.jpg) top left repeat-y;
  146.     color: #fff;
  147.     -webkit-transition: all 0.3s ease;
  148.     -moz-transition:    all 0.3s ease;
  149.     -o-transition:      all 0.3s ease;
  150.     -ms-transition:     all 0.3s ease;
  151.     transition:         all 0.3s ease;
  152.  
  153. }
  154. #nav ul li.current-menu-parent ul li.current-menu-item a:hover{
  155.     background: #333 url(imagenes/submenu.jpg) top right repeat-y;
  156. }

tambien quisiera saber como puedo colocar la flecha al padre. Saludos y muchas gracias de ante mano.
  #2 (permalink)  
Antiguo 29/09/2014, 22:49
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.772
Antigüedad: 12 años, 8 meses
Puntos: 1142
Respuesta: Elemento del menu horinzontal wordpress

tu problema es?

el CSS no parece tener errores, revisa la jerarquizar de estos.... para que tenga las flechas revisa el html debería tener alguna clase que indique tiene sub elementos.
  #3 (permalink)  
Antiguo 30/09/2014, 16:13
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: Elemento del menu horinzontal wordpress

Cita:
Iniciado por ArturoGallegos Ver Mensaje
tu problema es?

el CSS no parece tener errores, revisa la jerarquizar de estos.... para que tenga las flechas revisa el html debería tener alguna clase que indique tiene sub elementos.
Gracias amigo por contestar, bueno ya que publique esto aca es por que no encuentro.

Esta es la forma en HTML:

Código HTML:
Ver original
  1. <div id="nav">
  2.   <?php wp_nav_menu( array( 'theme_location' => 'menuprincipal' ) ); ?>
  3. </div>

Y esta captura te enseño como esta en el area de video de la administracion:



El problema es que cuando estoy en unos de los subelemento el elemento padre no cambia de color.

Ejemplo:

Si coloco el mouse ensima del padre se habre el menu y le doy click en el hijo este me lleba a una pagina o categoria, cuando estoy en el hijo el padre no se le cambia el color ni nada, ee es mi problema.

Nota: si no entendiste por favor avisame para colocar un video, explicandote lo que pasa.
  #4 (permalink)  
Antiguo 30/09/2014, 16:20
Avatar de TMeister
Crazy Coder
 
Fecha de Ingreso: enero-2002
Ubicación: En la Oficina
Mensajes: 2.880
Antigüedad: 18 años, 10 meses
Puntos: 193
Respuesta: Elemento del menu horinzontal wordpress

Parace que necesitas agregar el CSS correspondiente para la clase "*-ancestor" ya que es una jerarquía de categorias, lee la documentación y tendrás más idea y sobre todo verifica mediante firebug o chrome developer tools que clase tiene tu elemento en el menu.
  #5 (permalink)  
Antiguo 30/09/2014, 17:38
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: Elemento del menu horinzontal wordpress

Cita:
Iniciado por TMeister Ver Mensaje
Parace que necesitas agregar el CSS correspondiente para la clase "*-ancestor" ya que es una jerarquía de categorias, lee la documentación y tendrás más idea y sobre todo verifica mediante firebug o chrome developer tools que clase tiene tu elemento en el menu.
Gracias por tu ayuda lo solucione de la siguiente manera:

Cambie:

Código CSS:
Ver original
  1. #nav ul li:hover > a {
  2.     color: #fff;
  3.     background:#444444;
  4.     text-decoration:none;
  5. }

Y coloque esto:

Código CSS:
Ver original
  1. #nav ul li.current-menu-ancestor:hover > a {
  2.     color: #fff;
  3.     background:#444444;
  4.     text-decoration:none;
  5. }
  6. #nav ul li.current-menu-ancestor a{
  7.     background:#418cc7;
  8. }

Gracias por su ayuda.

Etiquetas: elemento, post
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 17:37.