Déploiement d'une blurred navbar avec overlay
Lors du déploiement de votre site web sous Uncode 2.10 ou une version antérieure, il est possible d’ajouter un effet de flou gaussien à la barre de navigation et de personnaliser les couleurs du texte, même si ces options ne sont pas disponibles nativement via l’éditeur d’administration du thème.
Cette personnalisation peut néanmoins être mise en place à l’aide de CSS et JavaScript personnalisés.
Étape 1 — Configuration dans les options du thème
Rendez-vous dans le menu suivant :
Uncode → Theme Options → General → Navbar
Appliquez les réglages nécessaires à l’affichage de la barre de navigation (structure, positionnement)
Étape 2 — Ajout du CSS personnalisé
Une fois la configuration de base effectuée, ajoutez le code CSS ci-dessous dans :
Uncode → Theme Options → Utility → CSS & JS
Ce code permet d’appliquer un fond translucide avec un effet de flou sur la navigation verticale, uniquement à partir d’une largeur d’écran minimale définie.
Code CSS :
@media (min-width: 960px) {
/* Fond gris argenté + blur */
body.vmenu-offcanvas-overlay.off-opened .masthead-vertical .vmenu-container {
/* gris argenté translucide */
background: rgba(180, 180, 190, 0.30) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
/* Texte blanc */
body.vmenu-offcanvas-overlay.off-opened .vmenu-container,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container a,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .menu-primary-inner > li > a,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .uncode-menu-additional-text,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .vmenu-footer {
color: #ffffff !important;
}
/* === Overlay sombre derrière le off-canvas (sans rien modifier du natif) === */
body.vmenu-offcanvas-overlay.off-opened::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.10); /* 10% */
pointer-events: none; /* ne bloque jamais les clics */
z-index: 200; /* sous le off-canvas, au-dessus du site */
}
/* Icônes sociales blanches */
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .menu-social i {
color: #ffffff !important;
}
}
/* état ouvert normal */
body.menu-mobile-open .menu-row-wrapper {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background: rgba(128, 128, 128, 0.30);
transition: backdrop-filter 0.4s ease, background 0.4s ease;
}
/* AJOUTEZ CE CSS à votre CSS existant */
@media (min-width: 960px) {
/* Garder le blur pendant la FERMETURE du menu desktop */
body.vmenu-offcanvas-overlay.off-closing .masthead-vertical .vmenu-container {
background: rgba(180, 180, 190, 0.30) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
/* Overlay sombre pendant la fermeture */
body.vmenu-offcanvas-overlay.off-closing::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.10);
pointer-events: none;
z-index: 200;
}
/* Texte blanc pendant la fermeture */
body.vmenu-offcanvas-overlay.off-closing .vmenu-container,
body.vmenu-offcanvas-overlay.off-closing .vmenu-container a,
body.vmenu-offcanvas-overlay.off-closing .vmenu-container .menu-primary-inner > li > a {
color: #ffffff !important;
}
}
Code JS:
(function($) {
'use strict';
// Configuration
const CONFIG = {
// Classes Uncode détectées dans votre CSS
openClassDesktop: 'off-opened',
openClassMobile: 'menu-mobile-open',
overlayClass: 'vmenu-offcanvas-overlay',
closingClassDesktop: 'off-closing',
closingClassMobile: 'menu-mobile-closing',
animationDuration: 500,
};
let isClosing = false;
let closeTimeout = null;
function handleMenuClose(isDesktop) {
const $body = $('body');
if (isClosing) return;
isClosing = true;
if (isDesktop) {
$body.addClass(CONFIG.closingClassDesktop);
} else {
$body.addClass(CONFIG.closingClassMobile);
}
if (closeTimeout) clearTimeout(closeTimeout);
closeTimeout = setTimeout(function() {
$body.removeClass(CONFIG.closingClassDesktop + ' ' + CONFIG.closingClassMobile);
isClosing = false;
}, CONFIG.animationDuration);
}
function handleMenuOpen() {
if (closeTimeout) {
clearTimeout(closeTimeout);
closeTimeout = null;
}
isClosing = false;
$('body').removeClass(CONFIG.closingClassDesktop + ' ' + CONFIG.closingClassMobile);
}
function initObserver() {
const targetNode = document.body;
const config = {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
};
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const oldClasses = mutation.oldValue || '';
const newClasses = targetNode.className;
const wasOpenDesktop = oldClasses.includes(CONFIG.openClassDesktop);
const isOpenDesktop = newClasses.includes(CONFIG.openClassDesktop);
const wasOpenMobile = oldClasses.includes(CONFIG.openClassMobile);
const isOpenMobile = newClasses.includes(CONFIG.openClassMobile);
if ((!wasOpenDesktop && isOpenDesktop) || (!wasOpenMobile && isOpenMobile)) {
handleMenuOpen();
}
if (wasOpenDesktop && !isOpenDesktop) {
handleMenuClose(true);
}
if (wasOpenMobile && !isOpenMobile) {
handleMenuClose(false);
}
}
});
});
observer.observe(targetNode, config);
}
function initClickListeners() {
// Bouton hamburger / close
$(document).on('click', '.mobile-menu-button, .mmenu-close, .menu-close-search, .close-menu', function() {
const $body = $('body');
const isDesktop = $body.hasClass(CONFIG.openClassDesktop);
if ($body.hasClass(CONFIG.openClassMobile) || isDesktop) {
handleMenuClose(isDesktop);
}
});
$(document).on('click', '.vmenu-overlay, .off-canvas-overlay, .vmenu-offcanvas-overlay', function() {
const $body = $('body');
const isDesktop = $body.hasClass(CONFIG.openClassDesktop);
handleMenuClose(isDesktop);
});
$(document).on('click', '.menu-primary a, .vmenu-container a', function(e) {
const $body = $('body');
const href = $(this).attr('href');
const isDesktop = $body.hasClass(CONFIG.openClassDesktop);
// Si c'est un lien interne (ancre ou page), le menu va se fermer
if (href && (href.startsWith('#') || href.startsWith('/'))) {
if ($body.hasClass(CONFIG.openClassMobile) || isDesktop) {
handleMenuClose(isDesktop);
}
}
});
}
/**
*/
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
initObserver();
initClickListeners();
});
} else {
initObserver();
initClickListeners();
}
console.log('✓ Fix menu off-canvas Uncode initialisé');
}
init();
})(jQuery);
@media (min-width: 960px) {
// Pour desktop (vmenu vertical)
body.vmenu-offcanvas-overlay.off-opened .masthead-vertical .vmenu-container,
body.vmenu-offcanvas-overlay.menu-mobile-closing .masthead-vertical .vmenu-container {
background: rgba(180, 180, 190, 0.30) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
transition: backdrop-filter 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
// Overlay sombre pendant ouverture ET fermeture
body.vmenu-offcanvas-overlay.off-opened::after,
body.vmenu-offcanvas-overlay.menu-mobile-closing::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.10);
pointer-events: none;
z-index: 200;
transition: opacity 0.4s ease;
}
}
// Pour mobile
body.menu-mobile-open .menu-row-wrapper,
body.menu-mobile-closing .menu-row-wrapper {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background: rgba(128, 128, 128, 0.30);
transition: backdrop-filter 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
*/
}
Résultat attendu :
