1
私のトグルメニューをスライドさせてコンテンツを左から右に右から左と右のコンテンツにしたいと思います。私は疲れていましたが、間違った場所（メニューボタンの右側）からトグルスタートしました。しかし、メニューボタンをもう一度クリックすると、左右のコンテンツが正しくスライドアウトされます。私codepenへ2つの異なる方向にメニューを切り替えます
ここにリンク：あなたの隠された要素のどれも：http://codepen.io/EmilBuszylo/pen/bgQZQp
// Burger animation
$('.burger-menu').on('click', function() {
if ($(this).hasClass("burger-menu-clicked")) {
$(this).removeClass("burger-menu-clicked");
$(this).addClass("burger-menu-closing");
} else {
$(this).addClass("burger-menu-clicked");
$(this).removeClass("burger-menu-closing");
}
});
// toggle menu
$('.burger-menu').click(function(){
$('.nav-l').toggle('slide',{direction: 'right'} ,900);
$('.nav-r').toggle('slide',{direction: 'left'} ,900);
});* {
box-sizing: border-box;
}
body {
background: #4A96AD;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
// hamburger button
[class^="line-"] {
display: block;
height: 7px;
width: 50px;
background: white;
border-radius: 1px;
}
.burger-menu {
display: inline-block;
background: rgba(white, .15);
border: 1px solid rgba(black, .15);
padding: 9px;
border-radius: 3px;
transition: background .3s;
text-align: center;
&:hover {
background: rgba(white, .2);
cursor: pointer;
}
& .label {
display: inline-block;
font-size: 14px;
line-height: 0;
margin: 16px 0;
letter-spacing: 0.15rem;
}
}
.burger-menu-clicked {
.line-1 {
animation: menu-top .4s forwards ease-in-out;
}
.line-3 {
animation: menu-bottom .4s forwards ease-in-out;
}
.label {
opacity: 0;
}
}
.burger-menu-closing {
.line-1 {
animation: menu-top-reverse .5s forwards ease-in-out;
}
.line-3 {
animation: menu-bottom-reverse .5s forwards ease-in-out;
}
.label {
transition: .5s;
opacity: 1;
}
}
@keyframes menu-top {
0% {
transform: rotate(0deg) translateY(0px);
}
50% {
transform: rotate(0deg) translateY(20px);
}
100% {
transform: translateY(20px) rotate(45deg);
}
}
@keyframes menu-top-reverse {
0% {
transform: translateY(20px) rotate(45deg);
}
50% {
transform: rotate(0deg) translateY(20px);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
@keyframes menu-bottom {
0% {
transform: rotate(0deg) translateY(0px);
}
50% {
transform: rotate(0deg) translateY(-19px);
}
100% {
transform: translateY(-19px) rotate(-45deg);
}
}
@keyframes menu-bottom-reverse {
0% {
transform: translateY(-19px) rotate(-45deg);
}
50% {
transform: rotate(0deg) translateY(-19px);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
// Menu
.top {
height: 100%;
margin: 0 auto;
text-align: center;
background-color: rgba(255, 233, 243, 0.4);
}
.over-menu {
.nav-l {
display:none;
}
.nav-r {
display:none;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 35px;
text-transform: uppercase;
}
}
.show {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<nav>
<ul class="over-menu">
<li>
<ul class="nav-l">
<li>category1</li>
<li>category2</li>
</ul>
</li>
<li>
<div class="burger-menu">
<span class="line-1"></span>
<span class="label">menu</span>
<span class="line-3"></span>
</div>
</li>
<li>
<ul class="nav-r">
<li>category3</li>
<li>category4</li>
</ul>
</li>
</ul>
</nav>
</div>
問題は表示されません。 – pudility
メニューアイコンをクリックするとすべてのコンテンツがメニューアイコンの右側からトグルしますが、クリックすると右のコンテンツがアイコンの右側に隠れ、左側のコンテンツがアイコンの左側に隠れます。 –