Burger menu on mouseover

Question

what I need to add to the code so that my menu does not roll back when I hover (.menu) ?

 $('.menuBurger').hover(function()
 {
  $('.menu').slideToggle(300);
 });

.menu {

width: 70px;
height: 60px;
background: #ccc;
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuBurger main_flex_column flex__align-items_end">
       <img src="img/list.svg" width="40px"> 
</div>
<ul class="menu">
           <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contacts</a></li>
</ul>

Try using `hover` and `mouseleave`. https://stackoverflow.com/questions/10080067/mouseover-and-mouseleave-trigger-every-time-i-move-the-mouse-inside-the-given-el — Don'tDownvoteMe, Mar 02 '19 at 13:14

Janneck Lange · Accepted Answer · 2019-03-02T16:11:04.137

this is without animations, maybee it will help you

UPDATE: add hint from @jakewow (now with animation)

$(".menuBurger").mouseenter(function(){
    $(".menu").slideToggle(300);
});

$(".menu").mouseleave(function(){
    $(".menu").slideToggle(300);
});

.menu {

width: 70px;
height: 60px;
background: #ccc;
display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuBurger main_flex_column flex__align-items_end">
       <img src="img/list.svg" width="40px"> 
</div>
<ul class="menu">
           <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contacts</a></li>
</ul>

Burger menu on mouseover

1 Answers1