Templates et plugins gratuits pour WebAcappella Fusion

Soulignement des éléments d'un menu au survol de la souris.

Copiez le code ci-dessous et collez-le dans l'onglet CSS du menu.

CODE

nav a,[role="navigation"] a {position: relative;text-decoration: none !important;}nav a::after,[role="navigation"] a::after {content: "";position: absolute;left: 0;right: 0;

/* Position */ bottom: +8px;
/* Epaisseur du soulignement */ height: 3px;
/* Couleur */ background: #ff4d5d;

transform: scaleX(0);transform-origin: center;transition: transform 0.30s ease;}nav a:hover::after,nav a:focus-visible::after,[role="navigation"] a:hover::after,[role="navigation"] avisible::after {transform: scaleX(1);}nav a.wa-menu-active::after,[role="navigation"] a.wa-menu-active::after {transform: scaleX(1);}nav a.wa-menu-active:hover::after[role="navigation"] a.wa-menu-active:hover::after {transform: scaleX(1);}

---

Soulignement des éléments d'un menu au survol de la souris + Soulignement de la page active.

① Copiez le code ci-dessus et collez-le dans l'onglet CSS du menu.

② Copiez le code ci-dessous et placez-le dans le body de votre site.

Propriétés générales du site => Code HTML personnalisé => Code HTML à la fin du bloc BODY des pages

CODE

<script> document.addEventListener("DOMContentLoaded", function () { const menuLinks = document.querySelectorAll( "nav a[href], [role='navigation'] a[href]" ); const currentPath = normalizePath(window.location.pathname); menuLinks.forEach(function (link) { const href = link.getAttribute("href"); if ( !href || href === "#" || href.startsWith("javascript:") ) { return; } try { const linkUrl = new URL(href, window.location.href); const linkPath = normalizePath(linkUrl.pathname); if (linkPath === currentPath) { link.classList.add("wa-menu-active"); } } catch (e) {} }); function normalizePath(path) { path = path.toLowerCase(); if (path.length > 1 && path.endsWith("/")) { path = path.slice(0, -1); } if ( path === "" || path === "/index.html" || path === "/index.htm" ) { return "/"; } return path; } }); </script>

Retour

Source ChatGPT