CSS → Выпадающее меню с задержкой

08.02.2015

Обычное выпадающие 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;.

Похожие записи

Комментарии

Пользовался таким способом, есть недостаток, если меню/подменю содержит кучу элементов, а сама страница имеет малый объем данный, внезапно может появится вертикальный скролл.

Пинджак
12.04.2015, 23:25

Вывожу меню с помощью menu_tree. Убил весь вечер, так и не смог найти адекватного способа добавления "submenu" и "submenu-item" к дочерним элементам. Т.е. стандартный вывод проставляет классы "menu" и "menu-item" как для родительских, так и для дочерних пунктов меню. Как генерируется меню, показанное в примере?
Конечно, можно достучаться до дочерних через css, но хотелось более лаконичный способ без нагромождения каскадов.

Я правильно понимаю, это свойство можно добавить в любое меню и оно станет анимированным.
Брал пример от сюда http://help-wp.ru/vypadayushhee-menu/ но вроде transition-delay не сильно помог

Рафис
27.06.2016, 15:28

Спасибо большое. Просто и работает.

Огромное спасибо за статью. Очень сильно помогла.

Гость
14.04.2018, 10:10

Спасибо! Для моего случая подошло как нельзя лучше

Добавить комментарий