Я получил его на работу, ребята!Немного дополнительной работы с кодом, которая не может быть на 100% практичной, но работает так, как я хочу!Спасибо всем за участие!Если вы хотите увидеть, что я сделал, я опубликую его в этом ответе.
Мой HTML:
<div class="navbar-fullscreen-background">
</div>
<div class="mobile-navbar-button">
<div class="bar-1">
</div>
<div class="bar-2">
</div>
</div>
<div class="navbar-background">
<p class="closebtn">×</p>
</div>
Я добавил класс navbar-background позади mobile-navbar-button, чтобычто пользователь не сможет его увидеть.
Мой CSS:
.mobile-navbar-button {
background-color: blue;
width: 90px;
height: 90px;
border-radius: 50%;
position: fixed;
left: 2vw;
top: 30px;
transition: 0.5s;
z-index: 3;
}
.navbar-background {
background-color: blue;
width: 90px;
height: 90px;
border-radius: 50%;
position: fixed;
left: 2vw;
top: 30px;
transition: 0.5s;
z-index: 2;
}
.navbar-fullscreen-background {
background-color: rgba(0, 0, 0, 0.9);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
transition: 0.5s;
display: none;
}
.closebtn {
color: white;
font-size: 100px;
position: fixed;
top: -80px;
left: 35px;
display: none;
transition: 0.8s;
}
.bar-1 {
background-color: white;
width: 54px;
height: 3px;
position: fixed;
top: 65px;
left: 37px;
}
.bar-2 {
background-color: white;
width: 54px;
height: 3px;
position: fixed;
top: 85px;
left: 37px;
}
Затем я добавил navbar-background в CSS, а затем дал кнопку mobile-navbar, navbar-fullscreen-background и navbar-background z-index, чтобы изменить их укладку.
Мой jQuery:
$(document).ready(function() {
$(".mobile-navbar-button").on('touchstart', function() {
$('.navbar-background').css({'width': 1450 + 'px', 'height': 1200 + 'px', 'left': -400 + 'px', 'top': -400 + 'px',});
$('.navbar-fullscreen-background').css('display', 'block');
$('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
$('.closebtn').css('display', 'block');
});
$(".closebtn").on('touchstart', function() {
$('.navbar-background').css({'width': 90 + 'px', 'height': 90 + 'px', 'left': 2 + 'vw', 'top': 30 + 'px',});
$('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'block');
$('.navbar-fullscreen-background').css('display', 'none');
$('.closebtn').css('display', 'none');
});
});
Я, наконец, взял свой jQuery (исправленную версию) и исправил его, чтобы он соответствовал моим изменениям в HTML и CSS, и смог сделать .mobile-navbar-Кнопки .bar-1 и bar-2 не отображают ничего, поэтому вместо них будет использоваться фон панели навигации в качестве области увеличения и сжатия содержимого.
Не на 100% уверен, что это лучший способ, но этотак, что сработало для меня!