Menú con elementos activos

Posted by On noviembre 15, 2017 0 Comment

Es algo bastante común que en el diseño web se quiera que el elemento del menú que está activo se vea marcado de forma diferente y es algo bastante simple de hacer con cualquier CMS que ya tiene la funcionalidad por defecto, pero ¿que sucede cuando queremos hacerlo desde cero?

Bueno en realidad hacer que un elemento del menú quede como marcado es muy sencillo utilizando tan solo 4 líneas de JQuery y un buen etiquetado, la parte de estética os la voy a dejar más a vuestro criterio ya que esto lo dejo justo para que lo copiéis y lo peguéis. (De nada…)

Lo primero que tenemos que hacer es nuestro código html tal y como vemos aquí:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
              integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
              crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
    <nav>                        
    <ul class="main-menu" id="main-menu">
        <li><a href="#main" class="activo">Main</a></li>
        <li><a href="#purpuse">Purpose</a></li>
        <li><a href="#program">Program</a></li>
        <li><a href="#agenda">Training</a></li>
        <li><a href="#networking">Networking</a></li> 
        <li><a href="#travel">Logistics</a></li>
        <li><a href="#wharton">About</a></li>   
        <li><a href="#registration">Registration</a></li>      
    </ul>
    </nav>
</body>
</html>

En él lo único que hacemos es enlazar con nuestros archivos, desde el JQuery por CDN en la línea 6 a nuestros archivos js y css.

Después de esto hacemos el navegador, es muy importante tener en cuenta el etiquetado, si nos fijamos introducimos una id en el ul del navegador; main-menu, es esta id la que nos va a permitir atacar a la etiqueta li y a para poder hacer la magia…

Vemos que hay un elemento en el menú que ya tiene la clase activo, esto indica que es el elemento activo.

Si observamos nuestro archivo css, que no tiene nada, vemos que marca que cuando un elemento este activo tenga un backgorund rojo y nada más.

.activo{
	background:red;
}

Y finalmente pasamos al código JQuery, con el cual realizamos la «magia»:

$(document).ready(function(){
	$('#main-menu li a').on('click', function(){
	    $('li a.activo').removeClass('activo');
	    $(this).addClass('activo');
	});
});

Lo que hace es en primera instancia esperar que cargue todo el documento para activarse, y una vez activo está esperando que ocurra un click en cualquier elemento en alguno de los elementos del menú como vemos en la línea 2.

A partir de aquí lo que sucede es que JQuery elimina la clase activo al elemento que lo mantiene y se la añade al elemento que ha recibido el click.

Con esto tan sencillo tenemos la posibilidad poner en activo los elementos del menú.

Espero que os haya servido y de ser así; ¡¡no dudéis en compartir y comentar!!