我的网页上有一个拉出式菜单，但是＆＃39;显示＆＃39;并不是那么顺利。
请参阅我的示例：http://jsfiddle.net/kcp6hn7e/
是否可以使用简单的过渡效果，以便在单击汉堡图标时显示菜单？
(function()
{
'use strict';
var toggleX = document.querySelector('.toggle-x');
var classActive = 'active';
var innerDiv = document.createElement('div');
innerDiv.className = 'toggle-icon-line';
toggleX.appendChild(innerDiv);
toggleX.addEventListener('click', onClickHandler);
function onClickHandler(evt)
{
(this.classList.contains(classActive) === true) ? this.classList.remove(classActive): this.classList.add(classActive);
$('.menu-wrap').toggleClass('open');
}
})(); /************Reset**************/
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section {
margin: 0;
padding: 0;
border: 0;
}
ol, ul {
list-style: none;
}
header, footer, nav, section, article, hgroup, figure {
display: block;
}
legend {
display: none;
}
/************End Reset**************/
/************Global**************/
/************Custom**************/
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow:scroll;
padding-top:40px;
/* non-critical appearance styles */
list-style: none;
background:red;
text-transform:lowercase;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
padding: 1em 1em 0 1em;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding-bottom:0;
color: #111;
text-decoration: none;
}
.nav-item a:hover {
text-decoration:underline;
color: #666;
}
.nav-item a:focus, .nav-item a:active {
text-decoration:underline;
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-color: white; /* Needs a background or else the nav will show through */
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
/* non-critical apperance styles */
padding: 30px 15px 20px 15px;
}
body {
/* Without this, the body has excess horizontal scroll when the menu is open */
overflow-x: hidden;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.toggle
{
z-index: 1002;
position: relative;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: nd 0.3s
}
.toggle:focus
{
outline: none
}
.toggle .toggle-icon-line
{
position: absolute;
top: 23px;
left: 12px;
right: 12px;
height: 2px;
background: white
}
.toggle .toggle-icon-line::before, .toggle .toggle-icon-line::after
{
content: '';
position: absolute;
display: block;
height: 2px;
background-color: white;
left: 0;
width: 100%
}
.toggle .toggle-icon-line::before
{
top: -9px
}
.toggle .toggle-icon-line::after
{
bottom: -9px
}
.toggle-x
{
background-color: #00b4ff
}
.toggle-x:hover
{
background-color: #007eb2
}
.toggle-x .toggle-icon-line
{
transition: background 0s linear 0.3s
}
.toggle-x .toggle-icon-line::before
{
transition-property: top, -webkit-transform;
transition-property: top, transform
}
.toggle-x .toggle-icon-line::after
{
transition-property: bottom, -webkit-transform;
transition-property: bottom, transform
}
.toggle-x .toggle-icon-line::before, .toggle-x .toggle-icon-line::after
{
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s
}
.toggle-x.active
{
background-color: #007eb2
}
.toggle-x.active .toggle-icon-line
{
background: none
}
.toggle-x.active .toggle-icon-line::before
{
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.toggle-x.active .toggle-icon-line::after
{
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.toggle-x.active .toggle-icon-line::before, .toggle-x.active .toggle-icon-line::after
{
transition-delay: 0s, 0.3s
}
.toggle
{
position: absolute;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: background 0.3s;
}
.toggle:focus
{
outline: none;
}
.toggle .toggle-icon-line
{
position: absolute;
top: (48 / 2) - (48 / 2);
left: 12px;
right: 14px;
height: 2px;
background: rgb(255, 255, 255);
}
.toggle .toggle-icon-line::before, .toggle .toggle-icon-line::after
{
content: '';
position: absolute;
display: block;
height: 2px;
background-color: rgb(255, 255, 255);
left: 0;
width: 100%;
}
.toggle .toggle-icon-line::before
{
top: -( (48 / 2) - (48 / 2) - 14);
}
.toggle .toggle-icon-line::after
{
bottom: -( (48 / 2) - (48 / 2) - 14);
}
.toggle-x
{
background-color: rgb(0, 180, 255);
}
.toggle-x:hover
{
background-color: rgb(0, 126, 178);
}
.toggle-x .toggle-icon-line
{
transition: background 0s linear 0.3s;
}
.toggle-x .toggle-icon-line::before
{
transition-property: top, transform;
}
.toggle-x .toggle-icon-line::after
{
transition-property: bottom, transform;
}
.toggle-x .toggle-icon-line::before, .toggle-x .toggle-icon-line::after
{
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.toggle-x.active
{
background-color: rgb(0, 126, 178);
}
.toggle-x.active .toggle-icon-line
{
background: none;
}
.toggle-x.active .toggle-icon-line::before
{
top: 0;
transform: rotate(45deg);
}
.toggle-x.active .toggle-icon-line::after
{
bottom: 0;
transform: rotate(-45deg);
}
.toggle-x.active .toggle-icon-line::before, .toggle-x.active .toggle-icon-line::after
{
transition-delay: 0s, 0.3s;
}
.menu-wrap
{
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px, 0, 0);
transform: translate3d(-320px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Shown menu */
.menu-wrap
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
position: fixed;
}
.content::before
{
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.open{
left:750px;
}
.transition{
-webkit-transition: left 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: left 0.3s ease-out; /* Firefox 4-15 */
-o-transition: left 0.3s ease-out; /* Opera 10.50–12.00 */
transition: left 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.menu-wrap {
width:750px;
-webkit-transform: translate3d(-750px,0,0);
transform: translate3d(-750px,0,0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu-wrap transition">
<nav class="menu">
<ul class="navigation">
<li class="nav-item">
<a href="#">Hello There!</a>
</li>
</ul>
</nav>
</div>
<div class="toggle toggle-x"></div>
<div class="site-wrap">
<div id="container">
<main id="content" role="main" class="scroll">
<div>
<h1 class="title">welcome</h1>
</div>
</main>
</div>
</div>
答案 0 :(得分：1)
使用此jsfiddle来帮助动画。 你可以使用那里的代码。 Here --> jsfiddle
$('#btn').click(function(e){
$('#fancy, #btn').fadeOut('slow', function(){
$('#bank, #btn-bk').fadeIn('slow');
});
});
$('#btn-bk').click(function(e){
$('#bank, #btn-bk').fadeOut('slow', function(){
$('#fancy, #btn').fadeIn('slow');
});
});
答案 1 :(得分：1)
您需要设置元素将在默认状态下从转换的属性;在这种情况下，您需要在left: 0px类之前的类中的元素上设置open，例如menu-wrap。请参阅an update of your fiddle。
答案 2 :(得分：0)
我喜欢自己的slideToggle - 而且它在没有jQuery-UI的jQuery中。首先，我必须删除您的向左翻译并使用display:none隐藏元素：
.menu-wrap {
display:none;
width:750px;
}
另外，仅仅是FYI，你有两次.menu-wrap - 最好将CSS中的两个位置整合到一个调用中，这样你就知道应用了什么以及代码中的位置。< / p>
这是使用slideToggle - http://jsfiddle.net/jrjb6x2a/1/