O novo site que desenvolvi, foi feito a partir de um layout pré-definido, criado no Corel Draw. É um site One Page com cabeçalho transparente. No layout que eu precisava replicar, o menu ativo alterava o font-weight de 300 para 800 e tinha uma borda na parte de cima. O problema é que num site One Page, se usarmos o customizador de css do módulo Menu em link do menu ativo, todos os links do menu aparecem como ativos.
Procurei uma solução na internet e achei neste link: https://divisoup.com/how-to-highlight-active-links-on-scroll-and-click-for-one-page-divi-websites/. Seguindo o código proposto, cada seção do site tem a sua id e a classe css que nomeei “secao”. O código começa por adicionar a classe “menu-ativo” ao primeiro item do menu e depois, de acordo com o scroll da página, retira essa classe e adiciona ao menu correspondente.
jQuery(function ($) {
$('header #menu-menu-principal li:first-child a, .et_slide_in_menu_container .et_mobile_menu li:first-child a').addClass('menu-ativo')
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.secao').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 80) {
$('.menu-ativo').removeClass('menu-ativo')
$('header #menu-menu-principal a:not(li.centered-inline-logo-wrap a), .et_slide_in_menu_container .et_mobile_menu li a').eq(i).addClass('menu-ativo')
}
})
});
});Uma dificuldade que eu tive foi com a borda acima do menu. No layout proposto, essa borda era de um tamanho fixo, com preenchimento em gradiente e com cantos arredondados na parte de baixo. Mesmo colocando um border-radius, a borda arredondada ficava na parte de cima, então a solução foi fazer uma imagem dessa borda e aplicá-la com border-image. Não achei uma solução para que a borda fique num tamanho fixo, então ela acompanha o tamanho do menu ativo. Também tive que aplicar uma borda transparente em todos os itens do menu para que eles ficassem na mesma altura do menu ativo. Abaixo, uma imagem do menu e o código css.
header #menu-menu-principal li {
margin-top: 0;
}
header #menu-menu-principal li a {
border-top: 12px solid transparent;
}
header #menu-menu-principal li a.menu-ativo {
font-weight: 800;
border-top: 12px solid transparent;
border-image-source: url(https://grupolz.amandadelavra.com.br/wp-content/uploads/borda-menu.png);
border-image-slice: 20 1;
}Feito isso, me deparei com uma nova dificuldade. A cor dos links do menu era branca e todas as seções tinham um fundo escuro, exceto a seção “produtos” que tinha um fundo branco. Então apenas na seção “produtos” a cor dos links tinha que ser preta. Incluí o código jQuery no código que tinha anteriormente para que se a seção tivesse a id “produtos”, alterasse a cor da fonte através da classe “secao-produtos”. A imagem do menu na seção “produtos” e o código completo para o cabeçalho está abaixo.
<script>
jQuery(function ($) {
$('header #menu-menu-principal li:first-child a, .et_slide_in_menu_container .et_mobile_menu li:first-child a').addClass('menu-ativo')
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.secao').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 80) {
$('.menu-ativo').removeClass('menu-ativo')
$('header #menu-menu-principal a:not(li.centered-inline-logo-wrap a), .et_slide_in_menu_container .et_mobile_menu li a').eq(i).addClass('menu-ativo')
if ($(this).attr('id') == 'produtos') {
$('header #menu-menu-principal li a').addClass('secao-produtos')
} else {
$('header #menu-menu-principal li a').removeClass('secao-produtos')
}
}
})
});
});
</script>
<style>
header #menu-menu-principal li {
margin-top: 0;
}
header #menu-menu-principal li a {
border-top: 12px solid transparent;
}
header #menu-menu-principal li a.secao-produtos {
color: #000 !important;
}
header #menu-menu-principal li a.menu-ativo {
font-weight: 800;
border-top: 12px solid transparent;
border-image-source: url(https://grupolz.amandadelavra.com.br/wp-content/uploads/borda-menu.png);
border-image-slice: 20 1;
}
</style>
