[SOLUCIONADO] Problema con efecto subrayado en header

[vidmartx]

Hola a todos.

Veréis, me gustaría que la barra que subraya a los elementos del menú del header cuando se pasa el ratón por encima de ellos, se quedará subrayando permanentemente a la categoría que se seleccione, es decir la que esté :active

Pero no encuentro el código CSS correcto para lograrlo.

¿Alguien me echa un cable? La web es:

pla ne ta otc DOT com

Muchas gracias

Un saludo!

[NueveReinas]

Podrías comprobar el enlace con JS (o jQuery) y entonces añadirle una clase.

[vidmartx]

Buuff, se me escapa totalmente lo que comentas...

¿No es posible añadir alguna línea de código CSS simplemente?

Saludos y muchas gracias

[NueveReinas]

No, solo con CSS no se puede, porque CSS simplemente le da el estilo.

Pero busca en Google "obtener enlace actual javascript" (o jQuery) (prueba en inglés si quieres) y vas investigando.

[fede5426]

Con CSS la única forma es agregarle la clase al menu activo de cada pagina que hagas, siempre y cuando tengas un archivo para cada sección, index.html, contacto.html, etc.

Con JQuery, una de las formas más fáciles, es esta:

Código HTML:

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>
 

Código CSS:

a{
  text-decoration:none;
}
 
.active{
  text-decoration:underline;
}
 

Código Javascript:

$("a").click(function(){
    $("a").removeClass("active"); //Quitamos la clase "active" a todos los enlaces
    $(this).addClass("active"); //Agregamos la clase "active" al enlace clickeado
});
 

Obviamente para que esto no pase en TODOS los enlaces, es conveniente poner una clase extra a los enlaces, por ejemplo "menu" (para solo identificar esos enlaces) y el código te quedaria asi:

Código HTML:

<ul>
  <li><a href="#" class="menu">item 1</a></li>
  <li><a href="#" class="menu">item 2</a></li>
  <li><a href="#" class="menu">item 3</a></li>
  <li><a href="#" class="menu">item 4</a></li>
</ul>
 

Código CSS:

a{
  text-decoration:none;
}
 
.active{
  text-decoration:underline;
}
 

Código Javascript:

$("a.menu").click(function(){
    $("a.menu").removeClass("active"); 
    $(this).addClass("active"); 
});
 

Ejemplo: http://codepen.io/anon/pen/gpOgxO

Saludos

[vidmartx]

Muchas gracias a los dos.

La web es un blog Wordpress.

Fede, entiendo que tendría que añadir este código CSS:

Código:

a{
  text-decoration:none;
}
 
.active{
  text-decoration:underline;
}

Al styles.css de mi tema Wordpress, hasta ahí correcto.

Pero, ¿dónde agrego el código HTML y el código javascript?

Mil gracias.

[vidmartx]

Por cierto, veo en el código CSS text-decoration:underline

Esa función subraya las letras de forma distinta al subrayado actual de la web... ¿Añadiendo el HTML y el código javascript se consigue el mismo subrayado?

Edito: mi tema actual de Wordpress tiene un campo para introducir directamente HTML personalizado: Paste your custom code here, it will be added into the footer section of your site. You can use JS code with <script></script> tags. Also you can add Google Analytics or other tracking code into this field.

Así lo he hecho, he añadido el HTML, CSS y Javascript, he borrado la caché pero no veo ningún cambio.

[fede5426]

Mmm.. no había podido abrir tu sitio antes, ahora si y veo que ese subrayado no es con underline.. Seguramente está hecho con ":after" o ":before" y animado con javascript..

No he trabajado con Wordpress no sabría como indicarte donde hacer cambios sinceramente.

[vidmartx]

Exacto, está hecho con :after

[NueveReinas]

El problema es que añadirle una clase (en este caso, active por medio de jQuery) simplemente por hacerle click no hace que se mantenga el subrayado.

Ya te he dicho: debes obtener el enlace y entonces puedes añadir la clase.
Por ejemplo; con location.pathname compruebas si la URL es igual a, por ejemplo, /category/principiante/ y entonces sí le añades la clase con jQuery (o JS) al menú.

[mardojai]

Lo que quieres es que si estoy en la categoría "análisis" se subraye "análisis" en el menú, y si voy a contacto se subraye "contacto" en el menú?

Muy simple, los menús de wordpress añaden una clase "current_page_item" al item de la pagina actual xD solo tienes que usar esa clase en tu "style.css".

El subrayado es un after con los estilos:

Código CSS:

display: block;
content: "";
position: absolute;
left: 0px;
bottom: -6px;
margin: 0px auto -2px;
width: 100%;
opacity: 0;
transition: all 0.3s ease 0s;
height: 2px;
background-color: #FFF;
 

Así que seria:

Código CSS:

.current_page_item:after {
opacity: 1 !important;
bottom: -2px !important;
}
 

Saludos!

[vidmartx]

Hola mardojai

He añadido el código CSS que me indicas, pero el subrayado sigue sin aparecer... He probado también con current-menu-item pero nada...

¿Cuál puede ser el problema?

Muchísimas gracias a todos!

[mardojai]

Perdón XD creo que es:

Código CSS:

.current_page_item .w-nav-title:after {
    opacity: 1 !important;
    bottom: -2px !important;
    }
 

[vidmartx]

Jajaja nada, no hay forma...

[mardojai]

Código CSS:

.current_page_item .w-nav-anchor.level_1 .w-nav-title::after {
        opacity: 1 !important;
        bottom: -2px !important;
        }
 

[vidmartx]

No hay manera! xD

[mardojai]

Lo has puesto bien?

Código CSS:

.current-menu-item .w-nav-title:after{bottom:-2px !important;opacity:1 !important;}
 

[vidmartx]

Sí, lo he escrito bien.

Este último que pones es otra versión distinta de código, la probaré al llegar a casa. De todas formas, edde el inspector de Chrome puedes comprobar tú mismo al añadir el CSS que no funciona...

[mardojai]

Me avisas cuando pongas el código para inspeccionar el código de la web

[vidmartx]

Ya está cambiado.

Muchas gracias por tu tiempo, de verdad.

Edito: ¡Vaya tela! Para darme una paliza, como lo estaba mirando desde el móvil se me ha pasado, acabo de darme cuenta ahora desde el sobremesa. Estaba poniendo current_menu en vez de current-menu, es decir, guión bajo en vez de guión normal. Es que lo copié así tal cual de tu penúltimo código (donde se te colaron dos puntos extra antes del after también xD).

Ya funciona correctamente todo. El código final ha sido:

Código:

.current-menu-item .w-nav-title:after {
opacity: 1 !important;
bottom: -2px !important;
}

Por si le sirve a alguien más.

Muchísimas gracias por tu ayuda mardojai, da gusto encontrarse con gente como tú en los foros, con tantas ganas de ayudar. Voto positivo para ti.

Un saludo!!

[vidmartx]

El que no se queda subrayado es el Foro. Antes tampoco se quedaba coloreado, no sé por qué...

He tenido que añadir .current-menu-parent para que se subraye también "Aprendizaje" cuando navego por alguno de sus submenús.

[mardojai]

Si, cierto, el "current-menu-parent" es para que se active el menú principal cuando tienes sub-menus.

El problema del Foro parece ser un problema de compatibilidad del BBPress que no le añade la clase al menú, a pesar de estar en el foro.

Prueba con esto:

Ve al admin de Wordpress y edita tu menú en Apariencia => Menús.
Cuando estés en la edición de menús, en la esquina superior derecha dice "Opciones de pantalla", lo abres y en el panel marcas el check "Clases CSS".
Después edita "Foro" en tu menú, y veras un nuevo campo que dice "Clases CSS (opcional)" ahí pon "forum-class".
Luego de eso en el head de tu tema añade esté script jquery:

Código Javascript:

$(function() { 
          var forumURL = window.location.href.indexOf("http://planetaotc.com/forum/");
          if(forumURL > -1){
            $('li.forum-class').addClass('current-menu-item');
          }
    });
 

Ojala te sirva, Saludos!

[vidmartx]

Justo estaba mirando yo también esa solución que proponen en los foros de bbpress.

He añadido la clase CSS sin problemas. El script lo he copiado en el header.php justo antes de cerrar la etiqueta head, pero sólo consigo que me aparezca todo ese texto justo encima del header de la web, una línea de texto encima del logo.

He puesto el script en el footer, a través de una opción que lleva mi tema para cargar código, como por ejemplo Google Analytics. No estoy seguro de si se está ejecutando, pero creo que sí. Parece que no funciona, seguiré investigando y si consigo sacarlo lo pongo aquí.

Muchas gracias.

[mardojai]

Tu tema tiene Jquery?

Prueba añadiendo esto al "functions.php" de tu tema.

Código PHP:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}
 

[mardojai]

En todo caso que sea así:

Código HTML:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() { 
          var forumURL = window.location.href.indexOf("http://planetaotc.com/forum/");
          if(forumURL > -1){
            $('li.forum-class').addClass('current-menu-item');
          }
    });
</script>
 

[vidmartx]

El tema soporta Jquery.

El código que pones en el último mensaje creía que decías que lo pusiera en el functions.php en lugar del código del mensaje previo, pero al hacerlo me daba un error la web, así que supuse que te referías a que pusiera ese código en el campo del footer del tema, donde me deja añadir código HTML y JS. Lo he hecho pero sigue sin funcionar.

La verdad es que no sé si se está ejecutando o he hecho algo mal y la web no está cargando el código realmente.

Edito: un momento, ahora sí funciona. Todo correcto, se subraya Foro tanto al entrar en la raíz como al entrar en cada debate.

¡Mil gracias!

[mardojai]

No olvides marcarlo como solucionado xD

[vidmartx]

Perdona, no lo había visto.

Muchísimas gracias de nuevo por la ayuda.

Un saludo!