0

Необходимо:

  1. Чтобы при перезагрузке страницы меню было изначально свернуто, а потом функционировало в нормальном режиме.

  2. Чтобы при плавном переводе мыши со слова "MENU" на пункты меню, окно с пунктами меню не закрывалось. Т.е. оно должно закрываться только при уводе мыши с блока меню.

Подскажите, кто знает.

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>

4
  • Привет. Почему бы тебе просто не сделать это все без JQuery? 22 мая 2019 в 6:39
  • @Владимир, может хочется ему на JQ, к тому же, почему бы и нет?
    – De.Minov
    22 мая 2019 в 8:16
  • @CbIPoK2513, зачем усложнять если можно сделать то что он хочет простым способом. 22 мая 2019 в 9:30
  • @Владимир, можно учитывать то, что человек, допустим, не силён в "хаках" CSS и ему проще реализовать такое на JS\JQ. Тогда это не усложнение, а наоборот упрощение. UPD: Я написал подобное меню на CSS ниже, не сказал бы что оно простое. Допустим про pointer-events я узнал недавно.
    – De.Minov
    22 мая 2019 в 9:39

2 ответа 2

0

Я бы на вашем месте не выставлял жестко ширину и внешние отступы в пикселях. Но из того что было можно сделать примерно вот так:

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

Похожее на CSS, вдруг пригодиться.

.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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.