Я использую скользящую навигацию на основе CSS3.
В настоящее время навигация перемещается слева направо с необходимыми переходами под углом. Я хотел бы использовать тот же эффект, но мне нужно, чтобы слайд происходил справа налево.
Я нашел этот фрагмент из codepen, я пытался внести в него изменения, но я не смог его достичь.
Если бы кто-нибудь мог решить это для меня, это очень помогло бы.
Вот быстрый Fiddle к моему коду -
.navigation-menu__bars, .navigation-menu__bars::before, .navigation-menu__bars::after {
cursor: pointer;
border-radius: 1px;
height: 2px;
width: 25px;
background: #fff;
position: absolute;
left: 0;
top: 50%;
display: block;
transition: all .3s;
}
.navigation-menu {
background-color: transparent;
height: 100%;
position: fixed;
width: 527px;
transform: translateX(-100%);
transition: transform .3s .3s;
}
.navigation-menu::before {
background: #4E567E;
content: '';
height: 400%;
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, -50%) rotate(40deg);
width: 100%;
z-index: 0;
}
.navigation-menu--open {
transform: translateX(0);
}
.navigation-menu--open .navigation-menu__bars {
background-color: transparent;
}
.navigation-menu--open .navigation-menu__bars::before, .navigation-menu--open .navigation-menu__bars::after {
top: 0;
}
.navigation-menu--open .navigation-menu__bars::before {
transform: rotate(45deg);
}
.navigation-menu--open .navigation-menu__bars::after {
transform: rotate(-45deg);
}
.navigation-menu--open .menu-list__item {
opacity: 1;
transition-delay: 1.25s;
}
.navigation-menu__toggle {
cursor: pointer;
height: 30px;
position: absolute;
right: -40px;
top: 5px;
width: 30px;
}
.navigation-menu__bars::before, .navigation-menu__bars::after {
content: '';
}
.navigation-menu__bars::before {
left: 0;
top: -8px;
}
.navigation-menu__bars::after {
left: 0;
top: 8px;
}
.menu-list {
padding: 60px 20px;
position: relative;
z-index: 10;
}
.menu-list__item {
margin: 40px 0;
opacity: 0;
transition: opacity .5s .5s;
}