CSS Випадне меню із затримкою
Звичайне css-меню, що випадає, зроблене за допомогою перемикання display:none; / display: block; повішеного на hover має дві дратівливі недоліки:
- підменю показується миттєво, як тільки курсор миші потрапив в область батьківського пункту - підменю миттєво зникає, як тільки курсор вийшов за межі підменю
Приклад такого меню:
Щоб створити невелику затримку перед показом і прихованням підменю, раніше доводилося використовувати javascript, але тепер натрапив на css варіант.
Весь фокус у властивості transition , а точніше його під властиві transition-delay , яке дозволяє додати затримку перед показом анімації:
Оскільки анімацію не можна вішати на display , то приховування підменю доводиться використовувати зв'язку opacity:0; visibility:hidden; .
Коментарі
Користувався таким способом, є недолік, якщо меню/підменю містить купу елементів, а сама сторінка має низький обсяг, раптово може з'явитися вертикальний скролл.
Виводжу меню за допомогою menu_tree. Вбив весь вечір, так і не зміг знайти адекватного способу додавання submenu і submenu-item до дочірніх елементів. Тобто. стандартний висновок проставляє класи "menu" і "menu-item" як батьківських, так дочірніх пунктів меню. Як генерується меню, наведене в прикладі? Звичайно, можна достукатися до дочірніх через css, але хотілося лаконічніший спосіб без нагромадження каскадів.