Menú con Enlaces Activos en One Page o Landingpage
En este tutorial te enseñaremos como poner la opción de menú activa mientras le vamos dando scroll a la página en una one page o landing page con Divi. La idea es que presente el enlace de la sección donde esté el usuario de otro color, para mostrar que está en esa posición ¿Quieres ver lo que lograrás?
Veamos los pasos para lograrlo.
Colocar un ID personalizado a cada sección de la one page
Lo primero que haremos será identificar con un ID especifico a cada sección del sitio. Esto nos permitirá crear posteriormente el menú. Además de eso, debes darle a cada sección (azul) la siguiente clase de CSS personalizada: color-section.
Crear menú ancla para one page o landing page en Divi.
Ahora debemos crear un menú personalizado. Para ello solo debes ir a la barra de opciones de WordPress > apariencia > menús > crear un nuevo menú.
Luego, vamos a crear un enlace personalizado por cada sección a la que le hemos asignado el ID CSS personalizado antes. Para esto debemos colocar un «#» y luego el «ID CSS» todo junto.
Repetimos lo anterior por cada uno de las secciones que queramos anclar en el menú:
Debemos añadir a añadir un pequeño snippet
Este nos dará la funcionalidad del menú con enlace activo. Para esto debemos añadir un módulo o bloque de código.
Antes de agregar el código de nuestro código debemos de saber cual es el ID de cada una de nuestras opciones de menú, Para ello debes volver al la parte de menú (barra de opciones de WordPress > apariencia > menús) y luego que estés ahí debes de elegir el menú con el cual trabajar y el ID lo obtenemos de la siguiente forma:
- Debemos poner el puntero en cima de la opción de menú
- Tomar el ID del menú item que en este caso es el 237.
Luego que tenemos los ID debemos de copiar el siguiente código en el bloque de código que acabamos de hacer:
<script>
// Activar menú al hacer scroll
jQuery(document).ready(function ($) {
// Aquí ponemos el item del Inicio activo por defecto activo
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-237').addClass('current-menu-item');
$('#menu-item-237').addClass('current_page_item');
// se inicia el proceso despues de hacer un scroll
$(window).scroll(function () {
// Aquí tomamos la posición en la que está la ventana
var position = $(this).scrollTop();
//Recorremos los item que pertenecen a la clase CSS que agregamos en el primer paso que es color-seccion
$('.color-section').each(function () {
// tomamos la posicion de item
var target = $(this).offset().top - 500;
// tomamos el id que se especificó cuando pusimos los ID a cada uno de los bloques
var id = $(this).attr('id');
if (position >= target) {
// Aquí eliminamos el activo de cualquier opción de menú para volver a ser asignado a la correspondiente
$('#top-menu-nav .menu-item ').removeClass('current-menu-item');
$('#top-menu-nav .menu-item ').removeClass('current_page_item');
// aquí comparamos en cual bloque de contenido o ID estamos para entonces ponerlo activo
if (id == 'home') {
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-237').addClass('current-menu-item');
$('#menu-item-237').addClass('current_page_item');
} else if (id == 'about') {
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-222').addClass('current-menu-item');
$('#menu-item-222').addClass('current_page_item');
} else if (id == 'services') {
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-223').addClass('current-menu-item');
$('#menu-item-223').addClass('current_page_item');
} else if (id == 'portfolio') {
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-224').addClass('current-menu-item');
$('#menu-item-224').addClass('current_page_item');
} else if (id == 'contact') {
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-229').addClass('current-menu-item');
$('#menu-item-229').addClass('current_page_item');
} else if (id == 'blog') {
// Nota: tener en cuenta que debe de cambiar el id del menu por el ID suyo menu-item-[su_id]
$('#menu-item-225').addClass('current-menu-item');
$('#menu-item-225').addClass('current_page_item');
} else {
// aquí si se da el caso que no estamos en ninguno de los bloques pues se borra el activo de todos lados
$('#top-menu-nav .menu-item ').removeClass('current-menu-item');
$('#top-menu-nav .menu-item ').removeClass('current_page_item');
}
}
});
});
});
</script>