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”:
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ó:
Excelente lo que necesitaba. Gracias
$(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");
}
});
Muchas gracias, justo lo que necesitaba!
Buenas podrias adjuntar el codigo completo
Que barbaro, muchas gracias por el ejemplo, justo lo que necesitaba 🙂
Llevaba mucho tiempo buscando esto, y lo muestras tan sencillo que hasta duele. xD jejeje
Muchas gracias. 🙂
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.
Usted es el mejor.. Gracias por el codigo.
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
Habia probado con varios códigos y ninguno me resolvía el problema, este me funcionó a la perfección gracias.
como haría para tener activo el menú y el submenu?
like!!!
agradezco si me pueden ayudar
me funciona perfecto cuando estoy en la ventana principal, pero cuando cambio de ventana se regresa al inicio… estoy trabajando con KUMBIA
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!
grosooooo
buen codigo, gracias por publicarlo, tenia uno pero lo perdi, pero este cumple eficientemente
muchas gracias de verdad me ayudaste bastante saludooos desde leon gto mexico
espectacular. Gran labor compañero
Muchas gracias, tras muchas pruebas en otros foros, y sin éxito, este código me funciono a la perfección .
Excelente, muchas gracias por la info, he estado buscando hacer esto desde hace rato.