我正在尝试创建一个侧边栏菜单，该菜单栏在我单击汉堡菜单时出现，而在我单击关闭按钮时消失。问题是，当我单击关闭按钮时，汉堡包按钮会在侧边栏菜单完全滑出之前出现，并且覆盖淡出的不透明性太快，我更改了覆盖的过渡时间，但没有任何改变
demo
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
</head>
<body>
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div class="wrap">
<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
<ul class="menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">About</a>
</li>
<li class="menu-item">
<a href="#">Blog</a>
</li>
<li class="menu-item">
<a href="#">Login</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="content" itemprop="mainContentOfPage" role="main">
<main class="content" itemprop="mainContentOfPage" role="main">
<section class="row one white">
<div class="wrap">
<div class="advertisement">
</div>
<div class="three-fifths first">
</div>
</div>
</section>
<section class="row two white">
<div class="wrap">
<div class="advertisement">
</div>
<div class="three-fifths first">
</div>
</div>
</section>
</main>
</main>
<footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
...
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
$(function() {
// Insert Responsive Navigation Icon, Close Icon, and Overlay
// If you have access to your HTML, you should put this directly into your markup.
$('<div class="responsive-nav-icon" />').appendTo('.row.one');
$('<div class="responsive-nav-close" />').appendTo('nav');
$('<div id="overlay" />').insertAfter('footer');
// Navigation Slide In
$('.responsive-nav-icon').click(function() {
$('nav').addClass('slide-in');
$('html').css("overflow", "hidden");
$('#overlay').show();
return false;
});
// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
$('nav').removeClass('slide-in');
$('html').css("overflow", "auto");
$('#overlay').hide();
return false;
});
});
style.css
.responsive-nav-icon::before,
.responsive-nav-close::before {
color: #93a748;
content: "\f0c9";
font-family: FontAwesome;
font-size: 22px;
position: relative;
}
.responsive-nav-close::before {
color: #93a748;
content: "\f00d";
font-size: 18px;
}
.responsive-nav-icon {
background: #fff;
line-height: normal;
padding: 5px 8px 4px;
top: 5%; left: 5%;
}
.responsive-nav-icon:hover,
.responsive-nav-close:hover {
opacity: .7;
}
.responsive-nav-close {
top: 10px; right: 10px;
}
.responsive-nav-icon,
.responsive-nav-close {
cursor: pointer;
display: none;
}
#overlay {
background: 0 0 rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
position: fixed;
top: 0; left: 0;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
transition: all 1s linear 0s;
width: 100%;
z-index: 90;
}
@media only screen and (max-width: 960px) {
.responsive-nav-icon,
.responsive-nav-close {
display: block;
position: absolute;
z-index: 1;
}
nav {
background: #fff none repeat scroll 0 0;
height: 100%;
padding: 20px;
position: fixed;
top: 0; left: -400px;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
transition: all 1s linear 0s;
width: 0;
}
nav.slide-in {
left: 0;
overflow-y: scroll;
width: 280px;
z-index: 100;
}
nav .menu-item {
display: block;
}
}
最佳答案
它可能看起来像黑客，但我在您的jQuery代码中添加了setTimeout。
// Navigation Slide In
$('.responsive-nav-icon').click(function() {
$('nav').addClass('slide-in');
$('html').css("overflow", "hidden");
$('#overlay').show();
$('.responsive-nav-icon').hide();
return false;
});
// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
$('nav').removeClass('slide-in');
$('html').css("overflow", "auto");
$('#overlay').hide();
setTimeout(function() { $('.responsive-nav-icon').show() }, 600);
return false;
});
}）;
我使用
1000ms进行了测试，但是汉堡菜单出现为时已晚，500ms是一个折衷方案。你可以玩。另外，当您单击汉堡菜单时，我添加了
$('.responsive-nav-icon').hide();。