Как улучшить выпадающее меню?

Question

[Влад]

Пациент https://seegi.ee/index.php?route=product/product&p...
Подскажите, пожалуйста, как по другому реализовать выпадающее меню.

Очень неудобно, что меню занимает почти всю ширину экрана и практически невозможно не провести курсором мышки по одному из пунктов меню и.. оно сразу же разворачивается и почти на весь экран, что вызывает дискомфорт.

Как поступить? Сделать задержку при наведение на меню? Открывать только после клика? Но както не хочется заставлять посетителей лишний раз кликать. Или есть более грамотное решение?

Comments

[Данакт Фрост]

Можно в css сделать маленькую задержку на появление меню. Что бы при обычном проведении мышкой по меню оно не открывалось. Плюс, можно добавить задержку после того, как пользователь убрал мышку с меню, что бы оно не сразу пропадало.

[Влад]

Данакт Фрост, почему то не помогает - что не так?

#menu > ul > li:hover > ul {
display: block;
transition-delay: 3s !important;
}

[Данакт Фрост]

Влад, я вижу только, что прописан transition-delay, а сам transition прописан?
P.S. Старайтесь не использовать important'ы в вёрстке.

[Влад]

Данакт Фрост, не помогает:

#menu > ul > li:hover > ul {
transition-delay: 3s;
transition-duration: 2s;
transition-property: display;
display: block;
}

[Данакт Фрост]

Влад, используйте visible вместо display в css-анимациях. А если помимо delay хотите использовать duration, то используйте visible в связке c opacity.

[Влад]

Данакт Фрост, все равно чтото не то. Вот стиль, который я использовал. На сайте он не применен сейчас.

#menu > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}

#menu > ul > li > ul {
list-style: none;
padding: 14px 0px 10px 0px;
position: absolute;
left: 0;
width: 100%;
min-height: 330px;
background-color: #E2DCEB;
box-shadow: 0 3px 11px rgba(0, 0, 0, .2);
top: 100%;
-webkit-columns: auto 2;
-moz-columns: auto 2;
columns: auto 2;
padding: 20px 38% 25px 0;
margin-left: 0 !important;
margin-top: 0;
border-radius: 0;
border-top: 0;
visibility: hidden;
opacity: 0;
transition: visibility 2s, opacity 2s linear;
}

Answer 1

[Данакт Фрост]

Задержка перед появлением, задержка после появления
https://jsfiddle.net/zbqkjrn0/

Comments

[Влад]

чтото не получается перенести на мой код..
подскажите, пожалуйста, что означает запись ".button:hover + .faded_block" ? знак плюса никогда не использовал

[vladimir_html]

Влад, знак плюса

[Влад]

vladimir_html, я думал для этого используется знак >

[Влад]

спасибо, получилось!

[Влад]

а вот как исправить теперь...
навожу на категорию - вылазит меню.
убираю курсор ниже - меню пропадает - и в ту же секунду снова начинаю поднимать курсор вверх, и даже не доведя до категории сразу же появляется раскрытое меню...

как сделать, чтобы меню пропадало моментально без задержки?
надеюсь проблема понятна..

[Данакт Фрост]

Влад, знак «>» служит для того, чтобы обращаться непосредственно к дочернему элементу. Знак «+» служит для обращения к следующему элементу.

[Данакт Фрост]

Влад, проблема в том, что когда элемент становится прозрачным в процессе анимации, он всё еще visible, соответственно для него работает hover. Вам нужно установить время анимации на 0, что бы все задержки работали, а анимация — нет.

[Влад]

Данакт Фрост, мм дописал transition-duration: 0s; - все равно не удобно.. вот посмотрите записал https://yadi.sk/i/EtDk1sMU3NEhK9

[Данакт Фрост]

Влад, у меня такое ощущение, что вы убрали анимацию для opacity, а для visibility оставили.

[Влад]

Данакт Фрост, вроде нет. именно для #menu > ul > li > ul
попробуйте

[Данакт Фрост]

Влад, пробуйте колдовать с тем кодом, который я отправил. Если у него убирать время анимации, всё четко отрабатывает.