Адаптивное меню с использованием ствола JS, как сделать ящик, чтобы открыть правую сторону

Question

Адаптивное меню с использованием ствола JS, как сделать ящик, чтобы открыть правую сторону

0

hey plz проверить это отзывчивое меню, я хочу, чтобы ящик двигался с правой стороны, но я понятия не имею о анимации css, может кто-нибудь предложить мне, что делать. здесь скрипка

Я пытаюсь сделать translate3d -240px, чтобы выдвижные ящики двигались вправо, но навигация исчезает.

header.open,
.content.open 
{   
    -webkit-transform: translate3d(240px,0,0);
    -webkit-animation: open .5s ease-in-out;

    -moz-transform: translate3d(240px,0,0);
    -moz-animation: open .5s ease-in-out;

    transform: translate3d(240px,0,0);
    animation: open .5s ease-in-out;
}

Arun 25 апр. 2014, в 08:45

Источник

Теги:

javascript

jquery

css3

css-animations

1 ответ

Ещё вопросы

Zeech · Answer 1 · 2015-04-06T19-16-00.000Z

Я тоже нуждался в этом, и сделал необходимые настройки, и теперь он работает. Некоторые из приведенных ниже изменений, но проверьте скрипт для рабочего кода: http://jsfiddle.net/pkxtj9z1/

.burger {
    float: right;
    right: 10px;
}

nav {
    right: 5px;
}

nav li {
    text-align: right;
}

header.open,
.content.open 
{   
    -webkit-transform: translate3d(-240px,0,0);
    -webkit-animation: open .5s ease-in-out;

    -moz-transform: translate3d(-240px,0,0);
    -moz-animation: open .5s ease-in-out;

    transform: translate3d(-240px,0,0);
    animation: open .5s ease-in-out;
}
@-webkit-keyframes open {
    0%      {-webkit-transform: translate3d(0,0,0);}
    70%    {-webkit-transform: translate3d(-260px,0,0);}
    100%  {-webkit-transform: translate3d(-240px,0,0);}
}
@-moz-keyframes open {
    0%      {-moz-transform: translate3d(0,0,0);}
    70%    {-moz-transform: translate3d(-260px,0,0);}
    100%  {-moz-transform: translate3d(-240px,0,0);}
}
@keyframes open {
    0%      {transform: translate3d(0,0,0);}
    70%    {transform: translate3d(-260px,0,0);}
    100%  {transform: translate3d(-240px,0,0);}
}