Уже в отчаянии. Не знаю, что делать :-( Помогите, пожалуйста. Есть мобильное меню. По клику вне меню, меню закрывается, все хорошо. Используется стандартное решение для этого. Но на данном меню есть так же кнопка закрытия, "крестик". И эта кнопка работает не совсем корректно. Это заключается в том, что открытие/закрытие меню сработает по клику на этот крестик, но только если клик произойдет в любую верхнюю или нижнюю область, кроме центра. В центре текст "меню". Я уже по "всякому" пробовал играться с кодом. И никакого результата, к моему сожалению. Помогите, пожалуйста..
$(document).ready(function () {
$(document).mouseup(function (e){
if (!$(".header_content_one_menu").is(e.target) && $(".header_content_one_menu").has(e.target).length === 0) {
$('#header_menu_adaptive').prop('checked', false);
}
if (!$(".header_content_one_menu").is(e.target) && $(".header_menu_adaptive_button").has(e.target).length !== 0) {
$('#header_menu_adaptive').prop('checked', true);
}
});
});
#header_menu_adaptive {
display: none;
}
.header_menu_adaptive_button {
display: flex;
align-items: center;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 999999;
padding: 0 20px 0 0;
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span {
transform: rotate(45deg);
visibility: hidden;
transition: 0.05s;
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button> span::before {
top: 0;
transform: rotate(0);
visibility: visible;
}
#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span::after {
top: 0;
transform: rotate(90deg);
visibility: visible;
}
.header_menu_adaptive_button > span::after {
content: '';
top: 28px;
width: 50px;
height: 2px;
background-color: #B72A20;
transition-duration: .25s;
}
#header_menu_adaptive:checked ~ .header_content_one_menu {
visibility: visible;
left: 0;
}
.header_menu_adaptive_button > span, .header_menu_adaptive_button> span::before, .header_menu_adaptive_button > span::after {
display: flex;
justify-content: center;
width: 50px;
position: absolute;
text-transform: uppercase;
color: #B72A20;
font-family: RobotoCondensed;
letter-spacing: 2.4px;
transition-duration: .25s;
font-size: 16px;
z-index: 11112;
}
.header_menu_adaptive_button > span::before {
content: '';
bottom: 29px;
width: 50px;
height: 2px;
background-color: #B72A20;
transition-duration: .25s;
}
.header_content_one_menu {
display: grid;
grid-row-gap: 20px;
position: absolute;
visibility: hidden;
top: 0;
border-radius: 0 0 0 0;
left: -100%;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0 40px 0;
background-color: yellow;
transition-duration: .25s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="header_menu_adaptive" type="checkbox">
<label class="header_menu_adaptive_button" for="header_menu_adaptive">
<span>меню</span>
</label>
<ul class="header_content_one_menu">
<li class=""><a href="" class="header_content_one_menu_unit">111</a></li><li class=""><a href="" class="header_content_one_menu_unit">222</a></li><li class=""><a href="" class="header_content_one_menu_unit">333</a></li><li class=""><a href="" class="header_content_one_menu_unit">444</a></li><li class=""><a href="" class="header_content_one_menu_unit">555</a></li>
</ul>