The drop-down menu collapses when you hover over the jquery items

Required:

  1. So that when the page is reloaded, the menu is initially minimized, and then functions in normal mode.

  2. So that when the mouse moves smoothly from the word "MENU" to the menu items, the window with the menu items does not close. That is, it should only close when the mouse moves away from the menu block.

Tell me who knows.

function hideMenu() {
  $('.menu').slideUp(700, function() {
    $('.hide').hide();
    $('.show').show();
  });
}

function showMenu() {
  $('.menu').slideDown(700, function() {
    $('.hide').show();
    $('.show').hide();
  });
}
$(document).ready(function() {
  $(".show").bind("mouseover", showMenu);
  $(".hide,.menu").bind(" mouseleave", hideMenu);
});
* {
  font-family: 'Poppins', sans-serif;
}

.menu {
  margin-top: -31px;
  margin-left: 100px;
  border-bottom: 2px solid gold;
  border-top: 2px solid gold;
  border-left: 2px solid #ADA2F6;
  border-right: 2px solid #ADA2F6;
  padding: 20px;
  width: 100px;
  background-color: #ADA2F6;
  border-radius: 10px;
}

.menu p {
  width: 100px;
  border-bottom: 2px solid gold;
}

.show {
  display: none;
}

.com {
  border-radius: 10px;
  margin-left: 140px;
  padding: 5px;
  height: 30px;
  width: 40px;
  text-transform: uppercase;
  color: #040119;
  background-color: #ADA2F6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">

<a href="#" class="hide com"> Menu</a>
<a href="#" class="show com"> Menu</a>

<div class="menu hide">
  <p>Games</p>
  <p>Programs</p>
  <p>Soft</p>
  <p>Sale</p>
</div>
Author: Air, 2019-05-22
Source

2 answers

If I were you, I wouldn't rigidly set the width and outer margins in pixels. But from what was possible to do something like this:

function hideMenu() {
  $('.menu__dropdown').slideUp(700);
}
function showMenu() {
  $('.menu__dropdown').slideDown(700);
}
$(document).ready(function() {
  $(".menu__toggle").on("mouseover", showMenu);
  $(".menu").on(" mouseleave", hideMenu);
});
* {
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

.menu {
  width: 200px;
  position: relative;
}

.menu__dropdown {
  margin-top: -32px;
  border-bottom: 2px solid gold;
  border-top: 2px solid gold;
  border-left: 2px solid #ADA2F6;
  border-right: 2px solid #ADA2F6;
  padding: 20px;
  background-color: #ADA2F6;
  border-radius: 10px;
  display: none;
}

.menu__dropdown p {
  border-bottom: 2px solid gold;
}

.menu__toggle {
  position: relative;
  z-index: 2;
  display: block;
  border-radius: 10px;
  margin: 0 auto;
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
  width: 60px;
  text-transform: uppercase;
  color: #040119;
  background-color: #ADA2F6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <a href="#" class="menu__toggle"> Menu</a>

  <div class="menu__dropdown">
    <p>Games</p>
    <p>Programs</p>
    <p>Soft</p>
    <p>Sale</p>
  </div>
<div>
 0
Author: Gonzo, 2019-05-22 07:50:49

Similar to CSS, suddenly useful.

.menu {
  display: block;
  width: 200px;
  pointer-events: none;
  position: relative;
}

.menu .button {
  display: block;
  width: 100px;
  height: 40px;
  background: #07f;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  margin: 0 auto;
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  left: 0; right: 0;
}

.links {
  display: block;
  width: 100%;
  position: absolute;
  top: 40px;
  background: #07f;
  border-radius: 5px;
  padding: 45px 10px 5px;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
}

.links a {
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none !important;
}

.links a:not(:last-child) {
  margin-bottom: 5px;
}

.menu:hover .links {
  top: 0;
  opacity: 1;
  pointer-events: all;
}

.menu .button, .menu .links {
  transition: all .2s linear;
}
<div class="menu">
  <div class="links">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>
  <div class="button">Menu</div>
</div>
 0
Author: CbIPoK2513, 2019-05-22 08:16:26