7.1 - Open menu on Hover vs. Click

Site URL: https://therosemountinn.squarespace.com/

I've adjusted the site's desktop menu so that it functions as if it were mobile (ie nav bar is hidden, then the menu expands and .header-menu overly is displayed when "Menu" is clicked).

However, I'd like to change the button onclick trigger to onmouseover, so that it opens when someone hovers over Menu, but I'm not well-versed enough in JS to be able to do so on my own.

Would appreciate any help - thank you!

On 12/7/2021 at 3:31 AM, MayaViolet said:

Site URL: https://therosemountinn.squarespace.com/

I've adjusted the site's desktop menu so that it functions as if it were mobile (ie nav bar is hidden, then the menu expands and .header-menu overly is displayed when "Menu" is clicked).

However, I'd like to change the button onclick trigger to onmouseover, so that it opens when someone hovers over Menu, but I'm not well-versed enough in JS to be able to do so on my own.

Website w/ password here.

 

Would appreciate any help - thank you!

So you need the side menu to be expanded on hover?

4 hours ago, bangank36 said:

So you need the side menu to be expanded on hover?

Yes - Tuan Phan actually helped me out with some script code!

6 hours ago, MayaViolet said:

Yes - Tuan Phan actually helped me out with some script code!

It 's good to know that

Hey! What was the code from @tuanphan for this? TIA!

9 hours ago, bycrawford said:

Hey! What was the code from @tuanphan for this? TIA!

I believe it was the following? I actually have it not active on the client site because we developed a diff solution, and the code link I found in my email shows up with an error, so not sure what if this will work!

 

<!---Menu Hover-->
<script>
$('.header-burger').hover(function(){
    $('body').toggleClass("header--menu-open");
});
</script>
<!---END Menu Hover--->

7 hours ago, MayaViolet said:

I believe it was the following? I actually have it not active on the client site because we developed a diff solution, and the code link I found in my email shows up with an error, so not sure what if this will work!

 

<!---Menu Hover-->
<script>
$('.header-burger').hover(function(){
    $('body').toggleClass("header--menu-open");
});
</script>
<!---END Menu Hover--->

 

Thank you Alyssa!

It doesn't work for me either. @tuanphan - would you be able to take a look at this site for me please: https://www.lanmark.net/

And let me know whether we could do the hover effect for this burger menu?

Thank you 🙂

Add to Last Line in Code Injection > Footer

<script>
  $('.header-burger').hover(function(){
    $('body').addClass("header--menu-open");
    $('.close-icon').removeClass("header--menu-open");
});
</script>