problema menu de navegacion

[raid_]

hola,

he creado un menu de navegacion, y el problema que tengo es que al marcar sobre la seccion si me aparece una imagen como seleccion, lo que no consigo es que se quede marcada cuendo entro en ella, el codigo que utlizo para el menu es

Código PHP:

 <div class="menu"> 
 <div class="pages"> 
 <?php wp_nav_menu( array( 'container_class' => 'menu-header', 
'theme_location' => 'primary' ,  )  ); 
?> 
 </div>  

current_page_item

si cambio 'container_class' => 'menu-header' por 'container_class' => 'current_page_item' se quedan todas las palabras marcadas

y el css es este

Código PHP:

  .menu { padding: 25px 0px 20px 0px; overflow: hidden;} 
* html .menu { height: 1%; float: left;} 
.menu .pages { float: left;} 
.menu .pages ul { border-left: solid 2px #ccc; float:left; } 
.menu .pages li { display: inline; font: bold 14px/14px "Arial"; letter-spacing: -1px; float: left; border-right: solid 2px #ccc; height: 23px; } 
.menu .pages li ul li { font-weight: normal; letter-spacing: normal;} 
.menu .pages li a { color:#ff7e00; float: left; padding: 4px 8px 10px 8px;} 
.menu .pages li a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; text-decoration: none;} 
.menu .pages .current_page_item a, .menu .pages .current_page_item a:visited, .menu .pages .current_page_item a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; } 
.menu .pages .current_page_item .page_item a, .menu .pages .current_page_item .page_item a:visited { background: #fff; color:#ff7e00;} 
.menu .pages .current_page_item .page_item a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; }  
   

y para volverse loco ya, si en el menu personalizado creo un enlace a la pagina principal y le pongo como nombre inicio, hay si funciona bien, solo en esa palabra
y estoy ya medio loco,

muchas gracias

[Nekko]

Te recomiendo utilizar developer toolbar o firebug para ver cual es la clase que corresponde. current_page_item está limitada a una página activa, y no a los demás elementos.

[raid_]

hola,
he mirado con firebug y la estructura que me sale es esta

Código PHP:

  <div class="menu1"> 
<div class="pages"> 
<ul id="menu-principal" class="menu"> 
<li id="menu-item-130" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-130"> 
<li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18"> 
<li id="menu-item-54" class="menu-item menu-item-type-taxonomy menu-item-object-category current-category-ancestor current-category-parent menu-item-54"> 
<li id="menu-item-55" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-55"> 
<li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-56"> 
<li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-57"> 
</ul> 
</div> 
</div>  
   

al crear el menu personalizado en menus de wordpress te crea automaticamente esto <ul id="menu-principal" class="menu"> donde "principal" es el nombre que le has dado al menu

Código PHP:

 <div class="menu1"> 
 <?php wp_nav_menu( array( 'container_class' => 'pages', 
'theme_location' => 'primary' ,  )  ); 
?>   

y he modificado el css a esto

Código PHP:

  .menu1 { padding: 25px 0px 20px 0px; overflow: hidden;} 
* html .menu1 { height: 1%; float: left;} 
.menu1.pages { float: left;} 
.menu1 .pages ul { border-left: solid 2px #ccc; float:left; } 
.menu1 .pages li { display: inline; font: bold 14px/14px "Arial"; letter-spacing: -1px; float: left; border-right: solid 2px #ccc; height: 23px; } 
.menu1 .pages li ul li { font-weight: normal; letter-spacing: normal;} 
.menu1 .pages li a { color:#ff7e00; float: left; padding: 4px 8px 10px 8px;} 
.menu1 .pages li a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; text-decoration: none;} 
.menu1.pages #menu-principal a:visited, .menu1 .pages #menu-principal a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; } 
.menu1 .pages #menu-principal #menu-item a, .menu1 .pages #menu-principal #menu-item a:visited { background: #fff; color:#ff7e00;} 
.menu1 .pages #menu-principal #menu-item a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; }  
   

y lo unico que consigo es que se queden todas marcadas siempre

gracias

[Nekko]

Si lo que querés es marcar con algo diferente a la clase activa fijate que la misma es current-menu-item, que en tu CSS deberías utilizarla así:

Código CSS:

li.current-menu-item , li.current-menu-item a{
/*Pones lo que quieras... */
}
 

[raid_]

hola muchas gracias, me estaba volviendo loco, ahora me ocurre lo siguiente
he puesto esta linea

.menu1 .pages li.current-menu-item , li.current-menu-item a { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; text-decoration: none;}
y funciona bien, se queda marcada la opcion, pero me ocurre que no cambia el color del texto,

en cambio la linea que es cuando seleciona si que lo hace

.menu1 .pages li a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; text-decoration: none;}
a que podria ser debido?

de nuevo muchas gracias

[Nekko]

Eso tiene que ver con que hay otra clase que está definiendo el color de tu texto y que actúa en simultáneo con tu clase activa. Por eso te decía lo de firebug, tenés que ver que clases están en funcionamiento en tu botón y que propiedades tiene. Seguro ahí vas a encontrar que hay otra clase activa colocando el color a tu texto, o sea que "pisa" al color que vos querés.

[raid_]

hola, gracias, tenias razon la estaba pisando una clase,¿ pero porque en una si la pisa y en la otra no?

Código CSS:

.menu1 .pages li a:hover { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; text-decoration: none;}
.menu1 .pages li.current-menu-item , li.current-menu-item a { background: #000 url(images/pages-bot.png) no-repeat bottom center; color:#fff; text-decoration: none;}
 

gracias