Есть ли готовый скрипт для выпадающего меню-каталога?

Question

[Toast]

На некоторых страницах сайта необходимо реализовать выпадающее меню-каталог с подуровнями, как реализовано например на таких крупных сайтах как Озон или Юлмарт.

Проблема в том, что если использовать просто jQuery и дропдауны (я не мастер JS), то каталог работает довольно кривенько, неприятные косяки вроде закрывающегося подуровня если ведешь мышку не строго по кнопке и тд. Может кто то знает какие то хорошие готовые решения?

Answer 1

[Виталий Киренков]

А что мешает сделать на одном css?

Comments

[Toast]

Да в принципе ничего кроме квалификации... тут вопрос с задержками и тд, разве это можно на css реализовать? Просто иначе экспириенс в большом меню теряется, когда оно из-за неаккуратного движения отваливается/переключается на другой пункт. Пока нашел https://github.com/kamens/jQuery-menu-aim - интересный плагин, как раз борется с этой проблемой.

[Дмитрий Ермолаев]

пример бы кода тогда привели

Answer 2

[Дмитрий Клусевич]

Учить JS. Понадобится думаю)

Answer 3

[Дмитрий Ермолаев]

решение на css
codepen.io/iusfof/pen/Drjwc?editors=110 пот пример приведенный ниже в действии
все просто:
html:
<div class="hover_me">hover_me</div>

css:

.hover_me {
  width: 300px;
  margin: 0 auto;
  border: 10px solid grey;
  padding: 20px;
  text-align: center;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  transition: padding .5s 2s; //<= padding - свойство на которое влияет этот транзишон,
                              //.5s - время анимации, 2s - задержка анимации

                              //в данном случае получается, что при потере ховера
                              //в течении 2х секунд блок не будет возвращаться
                              //к первоначальному размеру, если в течении двух
                              //секунд опять будет ховер на блоке, то возврата
                              //к начальному состоянию не будет
}

.hover_me:hover {
  transition: padding .5s;    //<= здесь же не надо указывать задержку, чтобы анимация
                              //происходила сразу, хотя правильней буджет сказать, что
                              //тут указана задержка в 0 секунд (по дэфолту), при этом
                              //свойство указывать нужно иначе будет использовано
                              //свойство из обычного состояния объекта
  padding: 60px 20px;
}