您需要從函數中刪除以下行。openMenu
$('div.menu-bg').addClass('animate');
請查看更新后的功能。openMenu
if( 'ontouchstart' in window ){ var click = 'touchstart'; }
else { var click = 'click'; }
$('div.burger').on(click, function(){
if( !$(this).hasClass('open') ){ openMenu(); }
else { closeMenu(); }
});
$('div.menu ul li a').on(click, function(e){
e.preventDefault();
closeMenu();
});
function openMenu(){
(document.getElementById("see").setAttribute("style", "display: block;"));
//Remove this line
// $('div.menu-bg').addClass('animate');
$('div.burger').addClass('open');
$('div.x, div.z').addClass('collapse');
setTimeout(function(){
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function(){
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu(){
$('.menu li').removeClass('animate');
(document.getElementById("see").setAttribute("style", "display: none;"));
setTimeout(function(){
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.menu-bg').removeClass('animate');
setTimeout(function(){
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function(){
$('div.y').show();
$('div.x, div.z').removeClass('collapse');
}, 70);
}, 100);
}
body {
background: blue;
}
.nav {
height: 100vh;
position: relative;
outline: none;
}
.nav ul {
list-style: none;
padding: 0.5em 0;
margin: 0;
}
.nav ul li {
margin: 10px;
width: 300px;
height: 40px;
line-height: 40px;
background-color: white;
padding: 0.5em 1em 0.5em 1em;
font-size: 24px;
background-repeat: no-repeat;
background-position: left 15px center;
background-size: auto 40px;
transition: all 0.15s linear;
border-radius: 5px;
border: 1px solid black;
opacity: 0.75;
}
.nav img {
float: left;
}
.menu li:hover {
background-color: #ffffff;
opacity: 1;
}
@media screen and (max-width: 900px) {
.menu {
display: none;
}
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
}
div.x,
div.y,
div.z {
position: absolute; margin: auto;
top: 0px; bottom: 0px;
background: #fff;
border-radius:2px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x, div.y, div.z { height: 3px; width: 26px; }
div.y {top: 18px;}
div.z {top: 37px;}
div.collapse {
top: 20px;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.menu-bg {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background:#203d63;
opacity:0;
-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu-bg.animate{
opacity:0.9;
-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
ul.menu {
padding-top: 5em;
}
ul.menu li {
width:300px;
margin: 0 auto;
}
ul.menu span {
text-align: right;
}
ul.menu li a {
background-color: white;
color:rgb(0, 0, 0);
opacity: 0.75;
}
section > div {
transition: transform 1s;
transform: translateX(0px);
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">
<li class="home"><a href="#"><img src="https://picsum.photos/200/300" alt="img" height="40px"><span>Главная</span></a></li>
<li class="gallery"><a href="#"><img src="https://picsum.photos/200/300" alt="img" height="40px"><span>Галерея</span></a></li>
</ul>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</nav>
