1
Я хочу, чтобы мое меню переключилось с левой стороны на правое и левое содержимое слева направо. Я устал, и я сделал, но переключился с неправильного места (справа от кнопки меню). Однако, когда мы нажимаем кнопку «Меню», еще раз слева и справа содержимое отображается правильно.Переключить меню в двух разных направлениях
здесь ссылку на мой codepen: 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
, когда вы нажимаете значок меню, все содержимое переключается справа от значка меню, но когда вы нажимаете для переключения вниз по правому содержимому, спрячьте в правой части значка, а левое содержимое спрячьте в левой части значка. –