CSS → Выпадающее меню с задержкой
Обычное выпадающие css-меню сделанное с помощью переключения display:none;
/display:block;
повешенного на hover обладает двумя раздражающими недостатками:
— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю
Пример такого меню:
<ul class="menu"> <li class="menu-item"> <a href="#">item</a> <ul class="submenu"> <li class="submenu-item">subitem 1</li> <li class="submenu-item">subitem 2</li> </ul> </li> </ul> <style> .menu { margin: 0; padding: 0; list-style: none; } .menu .menu-item { float: left; margin: 0 1px 0 0; padding: 0; background: #E1E1E1; } .menu .menu-item a { display: block; padding: 5px 10px; } .menu .submenu { display: none; /* По умолчанию скрываем подменю */ position: absolute; margin: 0; padding: 0; list-style: none; background: #E1E1E1; } .menu .menu-item:hover .submenu { display: block; /* Показываем подменю при ховере */ } .menu .submenu-item { margin: 0; padding: 5px 10px; } </style>
Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.
Весь фокус в свойстве transition
, а точнее его подсвойстве transition-delay
, которое позволяет добавить задержку перед показом анимации:
.menu .submenu { opacity: 0; /* По умолчанию скрываем подменю */ visibility: hidden; transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */ transition-duration: 0.2s; /* Добавляем анимацию 0.3 сек. */ transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */ } .menu .menu-item:hover .submenu { opacity: 1; /* Показываем подменю при ховере */ visibility: visible; }
Поскольку анимацию нельзя вешать на display
, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;
.
Комментарии
Пользовался таким способом, есть недостаток, если меню/подменю содержит кучу элементов, а сама страница имеет малый объем данный, внезапно может появится вертикальный скролл.
Вывожу меню с помощью menu_tree. Убил весь вечер, так и не смог найти адекватного способа добавления "submenu" и "submenu-item" к дочерним элементам. Т.е. стандартный вывод проставляет классы "menu" и "menu-item" как для родительских, так и для дочерних пунктов меню. Как генерируется меню, показанное в примере?
Конечно, можно достучаться до дочерних через css, но хотелось более лаконичный способ без нагромождения каскадов.
блин благодарю
Спасибо! Отлично работает.
Я правильно понимаю, это свойство можно добавить в любое меню и оно станет анимированным.
Брал пример от сюда http://help-wp.ru/vypadayushhee-menu/ но вроде transition-delay не сильно помог
Спасибо очень помогли!
Спасибо большое. Просто и работает.
Огромное спасибо за статью. Очень сильно помогла.
Спасибо! Для моего случая подошло как нельзя лучше
Огромное спасибо. Класс!
Оставить комментарий