@Makkons
Фронтенд фрилансер

Как доработать аккордеон-меню на CSS 3, построенное на свойстве «transition»?

Добрый день!
Реализовал на своем сайте аккордеон-меню с помощью свойства "transition", но хотелось бы кое-что доработать....
пример css для наглядности
.akkordeon ul{
   display:block;
  overflow: hidden;
   height:50px;
   transition: height 1s ease-in-out;
  -webkit-transition: height 1s ease-in-out;
}
.akkordeon ul:hover{
  height:300px;
}

При наведении на меню оно раскрывается до 300px с определенной скоростью и если убрать курсор с меню до того, как оно полностью раскроется, то оно сразу начнет закрываться.
Это не очень удобно, например, как на моем сайте, переход с 1-го меню на 2-е осуществляется неудобно (почему, можно посмотреть тут www.favorkrep.ru).

Вопрос: можно ли с помощью одного лишь css заставить меню раскрываться всегда до конца, независимо от времени наведения курсора? Если это под силу только jquery, то как это проще всего реализовать, оставляя в работе уже мой css 3 код?
p.s. ссылки на толковые ресурсы jquery для чайников приветствуются
  • Вопрос задан
  • 3069 просмотров
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Используйте тот же hover, но на jquery - по хаверу присваивайте класс active пункту меню.
А так - не советую использовать hover для такой важной вещи, как меню. Используйте hover как вспомогательное средство, как основное - click.
Для исключения Вашей проблемы сходу в голову приходит такой вариант: при хавере присваивайте какой-нибудь переменной значение false и запускайте таймаут на время работы анимации. После выполнения таймаута присваивайте этой переменной true. Соответственно, при хавере проверяйте значение переменной, и если она false - не обрабатывайте событие hover.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@CloudMonster
www.getbootstrap.com пожалуйста)
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы