Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.
La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
body.nav-open { overflow-x: hidden; } .navigation { ul .level0 .submenu__container { &:before, &:after { position: absolute; z-index: 0; content: ""; width: 50%; height: 100%; top: 0; background: #fff; } &:before { left: -50%; } &:after { right: -50%; } } } } |
|
1 2 3 4 5 |
$(document).on('mouseenter', '.navigation', function() { $('body').addClass('nav-open'); }).on('mouseleave', '.navigation', function() { $('body').removeClass('nav-open'); }); |