[Tutorials] Create a dark mode overlay on menu for Flatsome

che-do-dark-overlay-on-menu-theme-flatsome

[Tutorials] Create a dark mode overlay on menu for Flatsome

Dark mode overlay on menu simply means that when you move the mouse over the menu, the surrounding areas will be darkened, only highlighting the menu area to help customers easily select the necessary items and navigate there.

If you want to try to create a new menu for your website, you can apply this method.

che-do-dark-overlay-on-menu-theme-flatsome
che-do-dark-overlay-on-menu-theme-flatsome

Step 1: Add the code to the functions.php of the active theme/child theme

Copy and paste the following code into the functions.php file

add_action('wp_footer', 'qwans_add_darkness_dropdown');
function qwans_add_darkness_dropdown (){
echo '<div class="darkness"></div>';
};

Step 2: Customize CSS

Copy and paste the following CSS code into the style.css file or follow the link: Customize > Custom CSS > Add Custom CSS

.darkness {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
background-color: rgba(0,0,0,.7);
-webkit-transition: opacity 0.25s ease,visibility 0s ease 0.25s;
transition: opacity 0.25s ease,visibility 0s ease 0.25s;
}

.darkness-opened {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.25s ease,visibility 0.25s ease;
transition: opacity 0.25s ease,visibility 0.25s ease;
}

Step 3: Add Script to Footer Scripts

Copy and paste the following code into Footer Scripts (Flatsome > Advanced > Global setting > Footer Scripts)

<script>jQuery(document).ready(function($) {
$( '.menu-item-has-children' ).on('mouseover', function(e) {
if ( $(window).width() < 1024 ) return;

e.preventDefault();
if (!$('.menu-item').hasClass( '.has-dropdown' ) ) {
$('.darkness').addClass('darkness-opened');
}
});
$( '.menu-item.has-dropdown' ).on('mouseleave', function(e) {
if ( $(window).width() < 1024 ) return;

e.preventDefault();
if (!$('.menu-item').hasClass( '.has-dropdown' ) ) {
$('.darkness').removeClass('darkness-opened');
}
});
});
</script>

Save and enjoy the results! Good luck to you ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.