Добавлять transition: 1s; плавности нет Как сделать чтобы менюшка плавно появлялась а не сразу так резко ? https://jsfiddle.net/967Ley2h/
Ну или как прикрутить к Код (Javascript): $(function() { $(".knopka").click(function() { $(".menu").toggleClass("visible "); }); }); этот кусок кода Код (Javascript): if ($(blockId).css('display') == 'none') { $(blockId).animate({height: 'show'}, 500); } else { $(blockId).animate({height: 'hide'}, 500); }}
transition не работает со свойством display. Вместо него можно использовать opacity и z-index. Код (CSS): .menu { position: fixed; z-index: -1; opacity: 0; transition: opacity 1s; } .visible { opacity: 1; z-index: 100; }
Убирает элемент на задний план, чтобы ничего не перекрывал. Т.к. opacity: 0, в отличие от display: none; не убирает элемент со страницы, а просто делает его прозрачным. -- Ну или еще можете использовать ваш старый пример Код (Javascript): if($(".ccc").css("display") == "none") { $(".ccc").fadeIn(500); } else { $(".ccc").fadeOut(500); } А чтобы меню не скрывалось на десктопе, задать правило Код (CSS): @media only screen and (min-width: 401px) { .ccc { display: block !important; } }