Как сделать плавную анимацию для меню JS?

Question

[TitNIk]

Доброго дня. Есть JS код, который при нажатии открывает меню, и при повторном нажатии на кнопку закрывает его.

function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }
}

Сам скрипт. Вопрос. Как сделать так, чтобы скрипт не запрашивал стиль меню, а сразу открывал его? Зная, что блок с меню уже скрыт. Делаю меню для мобильной версии сайта и оно открывается только при двойном клике. Как я понимаю, первый клик запрашивает стиль, а затем уже принимает решение, что делать.

И еще момент. Как можно сделать плавное открытие меню и изменение иконки (бэкграунда) кнопки меню, при нажатии на которую открывается само меню.

Заранее спасибо!

Answer 1

[Александр]

Возьмите за правило, писать сразу весь пример на jsfiddle.net или ему подобных ресурсах.
Вот код на чистом js, анимация css3
с анимацией на js быстрее сделать на jQuery

Answer 2

[drtvader]

Делал так, добавлял класс, которые показывал.
К примеру изначально, position: absolut; right/left: -100%; Когда добавлял active, то right/left: 0;
и transition.
Попробую поискать в готовых у себя.

Answer 3

[Fillark]

Я тут ковыряюсь в css и нашёл один lifehack, в общем ты можешь все сделать на css
https://developer.mozilla.org/ru/docs/Web/CSS/:checked
В двух словах создаёшь невидимый чекбокс и на его состояние вешаешь отображение элемента)
Такой подход безумен, но зато без js стопроцентный css))