marcar una opción del menu al pinchar sobre ella

[rufus]

hola, tengo un menu en una plantilla de wordpress y quiero que al pulsar sobre una opcion se me queden los estilos en la misma (los estilos del hover) marcados en la opcion pulsada.

haber esto se hace con :active no? por que con :active no me funciona

[pzin]

No, no se hace con :active. Eso sirve para estilizar un enlace que está activo, y eso ocurre solo cuando pulsas sobre él. Cuando dejas de pulsar, ya no está en ese estado.

Ahí tendrás que mirar qué clase añade WordPress al enlace activo y estilizar esa clase en tu CSS.

[fede5426]

Deberías crear una nueva clase añadiendole los mismos estilos que tiene el hover, luego asignas esa clase al enlace clickeado usando javascript o jquery.

Código CSS:

.current{
   /* estilos */
}
 

Código Javascript:

$(document).ready(function(){
 
        $("a.item").click(function(){ //al clickear un enlace con clase "item"
 
                $("a.item").removeClass("current"); //le quitamos la clase "current" a todos los ".item"
                $(this).addClass("current") //y le asignamos "current" al enlace clickeado
 
        });
 
 
});
 

Saludos

[rufus]

fede estoy teniendo problemas con jquery. te detallo a continuacion como lo estoy haciendo.

primero incluyo el jquery en el archivo functions.php:

Código PHP:

<?php
 
 
if(!is_admin()) 
{
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
    wp_enqueue_script('jquery');
}
 
?>
 

pongo tu codigo jquery en el header.php

Código Javascript:

<script type="text/javascript">
    
 
        $(document).ready(function(){
     
            $(".menu-item").click(function()
            { //al clickear un enlace con clase "item"
     
                    $(".menu-item").removeClass("current"); //le quitamos la clase "current" a todos los ".item"
                    $(this).addClass("current") //y le asignamos "current" al enlace clickeado
     
            });
     
     
    });
</script>
 

en el css creo una clase current con el codigo del hover...

con el inspector de elementos me dice que mi menu tiene en los li estos estilos:

Código CSS:

<li id="menu-item-21" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-21"><a href="http://localhost/jamonwordpress/category/blog/">Blog</a></li>
 

por eso el codigo jquery pongo .menu-item sin el "li"

que estoy haciendo mal?

[pzin]

¿Qué te dice la consola JavaScript? Prueba usando jQuery en lugar de $. Metiéndole mano a un WordPress me pasó alguna vez. No sé cómo funciona WordPress, supongo que lo harán por evitar conflictos con otras librerías.

[rufus]

esto es uno de los errores que me lanza el firebug

function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,fun

[PHPeros]

Sí, puede haber conflicto con otras librerías que use WP ya que a todo el mundo le gusta el "$"... ¿eh? Para evitarlo puedes usar noConflict o definir la variable en un scope aparte.

[rufus]

he probado si me funciona el jquery en mi plantilla y con un script basico de hola mundo me muestra, que el jquery funciona, pero aun no consigo darle los estilos css a la opcion pusada del menu

el script lo tengo asi:

Código Javascript:

<script type="text/javascript">
    
    $(document).ready(function(){
     
            $("li.current-menu-item").click(function()
            { //al clickear un enlace con clase "item"
     
                    $("li.current-menu-item").removeClass("current"); //le quitamos la clase "current" a todos los ".item"
                    $(this).addClass("current") //y le asignamos "current" al enlace clickeado
     
            });
     
     
    });
</script>
 

como veis uso el class current-menu-item. no será el valido no? al no funcionarme

con el inspector del chrome me dice el id y los class que tienen las opciones del menu

Código HTML:

<li id="menu-item-21" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-21"><a href="http://localhost/jamonwordpress/category/blog/">Blog</a></li>
 

¿que me aconsejais??

[pzin]

Pues lo único veo mal es esto:

Código Javascript:

$("li.current-menu-item")
 

Ahí solo funciona si al que se hace click es el current.

[rufus]

lo he modificado, ahora lo tengo asi pero sige sin funcionar:

Código Javascript:

<script type="text/javascript">
    
    $(document).ready(function(){
     
            $(".menu-item").click(function()
            { //al clickear un enlace con clase "item"
     
                    $(".menu-item").removeClass("current"); //le quitamos la clase "current" a todos los ".item"
                    $(this).addClass("current") //y le asignamos "current" al enlace clickeado
     
            });
     
     
    });
</script>
 

[rufus]

he probado el script en un .php a parte con un menu usando "li" y funciona el script, algo me falla en $(".item").click(function().

el menu en wordpress tiene algo que me hace que no funcione el script.
que tengo que poner en : $(".item")

[PHPeros]

Igual hay algo con !important.

[fede5426]

Definitivamente hay algo interfiriendo, probé tu código exactamente como lo pasaste y funciona perfecto..

http://codepen.io/fede5426/pen/rVQbBB

La verdad no tengo idea de qué puede estar fallando..

Me gustaría ver el CSS del nav + la clase current si es posible, para ver si así puedo ayudar en algo..

Edito:

Probaste de agregar la libreria jquery al header.php directamente con una etiqueta script en lugar de traerlo con php?

Código HTML:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 

[rufus]

Código HTML:

<nav class="nav"><ul id="menu-menu-1" class="nav_list"><li id="menu-item-35" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-35"><a href="http://www.jamondemono.com/word/category/blog/">blog</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.jamondemono.com/word/biografia/">Biografía</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-24"><a href="http://www.jamondemono.com/word/discografia/">Discografia</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.jamondemono.com/word/videos/">Videos</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://www.jamondemono.com/word/contacto/">Contacto</a></li>
</ul></nav>
 

clase .current

Código CSS:

.current
    {
        color:#ffffff;
        background-color:#ff0000;
        line-height:2;
        padding: 6px;
    }
 

fede aqui te dejo el codigo!!! que será lo que me esta interfiriendo....

[fede5426]

Estás enlazando con URLs absolutas.. no estás cargando el contenido dinámicamente. Eso recarga la página y por eso no queda activo el menú.

Deberías cargar el contenido con PHP o Ajax, la verdad ahi ya no te puedo seguir ayudando.. tengo idea pero poca, no soy el indicado para ese trabajo.

Saludos