jQuery para mostrar el menú activo

jQuery Logo

Para inaugurar el blog, voy a explicar como usar una función jquery para mostrar menú activo y resaltarlo en la navegación. Para el CSS utilizaré el framework CSS bootstrap de twitter. En caso de no utilizar bootstrap, solo es necesario tener definida la clase .active en nuestro archivo CSS y Html con los ajustes deseados.

Partimos de que tenemos un menú Html definido con la siguiente estructura:

<ul class="nav">
	<li><a href="index.php">Home</a></li>
	<li><a href="recientes.php">Recientes</a></li>
	<li><a href="contact.php">Contacto</a></li>
</ul>

Necesitamos agregar jQuery a nuestro documento html antes de poder usarlo:

<script type="text/javascript" src="ruta-archivo-jQuery.js"></script>

De todas las opciones que existen, la más sencilla desde mi punto de vista en utilizar un función jquery para mostrar menú activo. Tan solo es necesario incluir el siguiente código en nuestro código JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        var cambio = false;
        $('.nav li a').each(function(index) {
            if(this.href.trim() == window.location){
                $(this).parent().addClass("active");
                cambio = true;
            }
        });
        if(!cambio){
            $('.nav li:first').addClass("active");
        }
    });
</script>

El efecto final que conseguiremos cuando estemos visualizando el menú “HOME”:

Menu activo con jQuery

Como habrás observado, es muy fácil utilizar jquery para mostrar menú activo. Desde esta misma función, es igual de fácil incluir algunas líneas de código adicionales para reconocer también cuando estamos visitando un menú hijo.

¿Has modificado/mejorado está función? Compártela con el resto de usuario en los comentarios.

Espero que os ayude.

Valora el artículo aquí si te gustó:

jQuery para mostrar el menú activo
5 (100%) 1 vote

Comments


  1. $(document).ready(function(){
    var cambio = false;
    $('.nav li a').each(function(index) {
    if(this.href.trim() == window.location){
    $(this).parent().addClass("active");
    $(this).closest('.dropdown').addClass("active");
    cambio = true;
    }
    });
    if(!cambio){
    $('.nav li:first').addClass("active");
    }
    });

  2. Anna says:

    Muchas gracias, justo lo que necesitaba!

  3. jesus says:

    Buenas podrias adjuntar el codigo completo

  4. Roos says:

    Que barbaro, muchas gracias por el ejemplo, justo lo que necesitaba 🙂

  5. Llevaba mucho tiempo buscando esto, y lo muestras tan sencillo que hasta duele. xD jejeje
    Muchas gracias. 🙂

  6. William257 says:

    Es válido agregar esta línea para dar clase “active” a los dropdowns menus o menus de lista desplegable en twitter bootstrap.

    $(this).closest('.dropdown').addClass("active");

    Gracias por compartir el código, ahí les dejo otra mejora.

    Saludos.

  7. Dionny says:

    Usted es el mejor.. Gracias por el codigo.

  8. Roberto says:

    Gracias, me sirvió para un menu dentro de wordpress, ya que ahí el menú siempre es el mismo y va cambiado el la parte del contenido. Muy agradecido

  9. Lenis says:

    Habia probado con varios códigos y ninguno me resolvía el problema, este me funcionó a la perfección gracias.

  10. leonel says:

    como haría para tener activo el menú y el submenu?

  11. leonel says:

    like!!!

  12. agradezco si me pueden ayudar

  13. me funciona perfecto cuando estoy en la ventana principal, pero cuando cambio de ventana se regresa al inicio… estoy trabajando con KUMBIA

  14. José Manuel says:

    Fantástico, me funciona perfectamente. Usándolo me surge una duda, si tengo un menú desplegable con diferentes subsecciones, cómo se marca activo a la sección principal…??

    Muchas gracias!

  15. E,m,i says:

    grosooooo

  16. daniel says:

    buen codigo, gracias por publicarlo, tenia uno pero lo perdi, pero este cumple eficientemente

  17. Lalo Aldana says:

    muchas gracias de verdad me ayudaste bastante saludooos desde leon gto mexico

  18. espectacular. Gran labor compañero

  19. Rodrigo says:

    Muchas gracias, tras muchas pruebas en otros foros, y sin éxito, este código me funciono a la perfección .

  20. facer says:

    Excelente, muchas gracias por la info, he estado buscando hacer esto desde hace rato.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *