Destacar botón de menú activo en un foro

BitLiberal · 25 Mar 2014

Hola a todos, estoy desarrollando un foro, y tengo casi todo preparado, solo me faltan esos ultimos detalles visuales.

Lo que quiero es que al estar en cierta parte del foro, por ejemplo inicio, ese boton del menu tenga un background y unos border especiales, y si por ejemplo se van a "Galeria de Imagenes", este se resalte mientras el otro no.

Creo que lo vi en algun sitio, aunque no se muy bien como hacerlo porque a mi (corto) entender, en CSS no hay variables.

Muchas gracias, y espero vuestras respuestas. :encouragement:

vicram10 · 25 Mar 2014

eso es en la parte del php que corresponde a tus botones del menu, si la url que estas visitando es el de tu menu le das una clase diferente

PHP:

<?php

echo '
<ul>
<li', ($urlvisitado == 'http://www.tusitio.com/inicio/') ? 'class="activo"' : '' ,'>inicio</li>
<li', ($urlvisitado == 'http://www.tusitio.com/contacto/') ? 'class="activo"' : '' ,'>contacto</li>
<li', ($urlvisitado == 'http://www.tusitio.com/sobre-mi/') ? 'class="activo"' : '' ,'>sobre mi</li>
</ul>';

?>

Es un ejemplo de como sería el tratamiento, claro que lo puedes mejorar, pero en base es el 90% codigo php y el otro 10% tu CSS

96levels · 27 Mar 2014

tambíen lo puedes hacer con js-jquery si lo utilizas:

Insertar CODE, HTML o PHP:

    BASE_URL = 'http://tu-sitio-web.com/';
    var loc = unescape(document.location.href);
    loc = loc.substr(loc.indexOf(BASE_URL)+BASE_URL.length);
    var obj = $("a[href='"+loc+"']");  // cualquier link que coincida con la ruta actual
    obj.addClass("active");
    obj.parent().addClass("active");  // si quieres poner el active en el parent, por ejemplo <li>
//    Si no hay ningún activo marco el HOME
    if ($('.active').length == 0) $('a[href="/"]').addClass("active");
// Si utilizas idiomas, también puedes marcar el actual
   LANG = 'es'; //lang actual
   var obj = $("a[href='"+LANG+"/']");
   obj.addClass("active");

Destacar botón de menú activo en un foro

BitLiberal Seguir

vicram10

96levels