Необходимо:
Чтобы при перезагрузке страницы меню было изначально свернуто, а потом функционировало в нормальном режиме.
Чтобы при плавном переводе мыши со слова "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>
pointer-events
я узнал недавно.