webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Как закрыть меню при повторном клике?

Привет.
Что-то жара как-то совсем плохо влияет на меня.
https://jsfiddle.net/webirus/r8yLhagp/ - вот мой вариант.
Не могу написать скрипт закрытия меню по клику на навикон.
Кто подскажет, как это реализовать?
  • Вопрос задан
  • 1078 просмотров
Решения вопроса 7
@devstudent
frontend-developer
$(document).ready(function(){
 $('.navicon').click(function(){
        $('.leftbar').toggleClass('active');
     });
});

.leftbar {-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}

.leftbar.active {left: 0; position: relative;}
Ответ написан
Комментировать
werty1001
@werty1001
undefined
https://jsfiddle.net/r8yLhagp/2/
Лучше использовать CSS анимации, и лучше через transform.
Ответ написан
Комментировать
@Gregpopov
Full stack web developer
Лучше делать такие вещи с помощью CSS:
когда есть .active, то реализовывается перепозиционирование (просто меняется занчение left), при этом мы устанавливаем на .leftbar анимацию для position и имеем результат.

P.S. Используйте .stop().animate(), это предотврватит дерганую анимацию, стек событий будет очищаться и они не будут выполняться дург за другом
Ответ написан
Комментировать
@ArturArturov
$(document).ready(function(){

    $('.navicon').click(function(){
        $('.leftbar').toggleClass('active');
    });
   
});

.leftbar{
  transition: .3s;
}
.leftbar.active{
  left: 0;
}
Ответ написан
Комментировать
Arsenowitch
@Arsenowitch
Front-End developer
api.jquery.com/toggle так проще

или так, но это не очень красиво
https://jsfiddle.net/wfyx6kx5/
Ответ написан
Комментировать
@Aiden_Mihail
Front-end Developer
Ответ написан
Комментировать
@lega
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы