xandeadx.ru Блог музицирующего веб-девелопера

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;.

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

Комментарии RSS

Аватар пользователя Tab10id
Tab10id, #

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

Аватар пользователя Пинджак
Пинджак, #

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

Аватар пользователя Гость
Гость, #

блин благодарю

Аватар пользователя Крош
Крош, #

Спасибо! Отлично работает.

Аватар пользователя alex
alex, #

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

Аватар пользователя Гость
Гость, #

Спасибо очень помогли!

Аватар пользователя Рафис
Рафис, #

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

Аватар пользователя Holger
Holger, #

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

Аватар пользователя Гость
Гость, #

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

Аватар пользователя Гость
Гость, #

Огромное спасибо. Класс!

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании