Pure CSS выпадающее меню с задержкой
Я нашел отличное решение CSS для меню с подменю, чистый CSS:
ссылка: Codepen от Phil Hoyt Теперь я хочу задержать скрытие меню на движениях мыши. Чтобы меню не скрывалось напрямую, когда мышь отключена от пункта меню (на короткое время). Поэтому я добавил CSS, нашел на этой странице, в результате чего появился код ниже. Предыдущая ссылка точно объясняет мою проблему, но я не смог ее исправить с помощью подсказок. При наведении указателя на главные пункты меню задержка первого элемента удерживает пункт меню открытым, а мышь уже находится во втором пункте меню. См. Gif ниже. Как я смогу это исправить? Сохраняя задержку, но когда открыто другое меню, скрывая элемент меню мгновенно.
#primary_nav_wrap < margin-top:15px >#primary_nav_wrap ul < list-style:none; position:relative; float:left; margin:0; padding:0 >#primary_nav_wrap ul a < display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif >#primary_nav_wrap ul li < position:relative; float:left; margin:0; padding:0 >#primary_nav_wrap ul li.current-menu-item < background:#ddd >#primary_nav_wrap ul li:hover < background:#f6f6f6 >#primary_nav_wrap ul ul < visibility: hidden; transition: 0.2s 1s; position:absolute; top:100%; left:0; background:#fff; padding:0 >#primary_nav_wrap ul ul li < float:none; width:200px >#primary_nav_wrap ul ul a < line-height:120%; padding:10px 15px >#primary_nav_wrap ul ul ul < top:0; left:100% >#primary_nav_wrap ul li:hover > ul
CSS → Выпадающее меню с задержкой
Обычное выпадающие css-меню сделанное с помощью переключения display:none; / display:block; повешенного на hover обладает двумя раздражающими недостатками:
— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю
Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать 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, но хотелось более лаконичный способ без нагромождения каскадов.
transition — delay
Если нужно плавно изменить какое-то CSS-свойство, но запустить изменение не сразу, а с задержкой, то используем transition — delay .
Пример
Скопировать ссылку «Пример» Скопировано
Анимация будет запущена через 0.3 секунды:
.box transition-property: color, padding; transition-duration: .3s; transition-delay: .3s;>.box transition-property: color, padding; transition-duration: .3s; transition-delay: .3s; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector transition-delay: 3s; /* Одно значение в секундах */ transition-delay: 2s, 4ms; /* Несколько значений в секундах и миллисекундах */>.selector transition-delay: 3s; /* Одно значение в секундах */ transition-delay: 2s, 4ms; /* Несколько значений в секундах и миллисекундах */ >
Как понять
Скопировать ссылку «Как понять» Скопировано
Синтаксически свойство полностью аналогично transition — duration , но использование их вместе помогает достичь интересных эффектов. Например, создать цепочку последовательных изменений свойств:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡В краткой записи свойства transition свойство transition — delay стоит на третьем месте сразу после указания длительности перехода: transition : color . 3s . 5s . Использовать свойство transition — delay отдельно от сокращённой записи стоит, если переход комплексный и анимируется несколько свойств с разными задержками.
💡 Хорошо всегда помнить о том, что мы можем стилизовать плавное изменение свойства в две стороны:
- от базового состояния → к изменённому состоянию;
- от изменённого состояния → к базовому состоянию.
Поэтому важно указывать transition — delay для обоих состояний. При убирании курсор мыши сразу начнёт меняться padding, а через 500 мс — цвет текста:
.box color: red; padding: 12px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: .5s, 0s>.box color: red; padding: 12px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: .5s, 0s >
При наведении мыши сразу начнёт меняться цвет текста, а через 500 мс — padding :
.box:hover color: green; padding: 24px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: 0s, .5s>.box:hover color: green; padding: 24px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: 0s, .5s >
Свойство transition-delay
CSS-анимация не обязательно должна начинаться мгновенно после ее инициализации. Вы можете управлять ее началом с помощью свойства transition-delay . Чтобы отложить совершение перехода на определенное время, укажите его в значении свойства:
transition-delay: 1s; /* отложить начало анимации на одну секунду */
Данное свойство мало используется при реализации простой интерактивности на сайте, однако оно может быть весьма полезным, если вам предстоит создавать более сложные эффекты. По аналогии с transition-duration можно записать время задержки для каждого свойства, указанного в transition-property (при этом также важно придерживаться порядка перечисления):
transition-property: color, background-color, letter-spacing; transition-duration: 1s, .5s, 2s; transition-delay: 0s, 0s, 2s; /* задержка анимации letter-spacing на 2 секунды */
Не забывайте о кроссбраузерности — абсолютно все свойства семейства transition требуют использования вендорных префиксов:
-webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;
Практическое применение
На практике свойство transition-delay весьма часто применяется при создании выпадающих меню, которые раскрываются при наведении курсора. В данном случае оно записывается не только для начального состояния, но и для конечного.
Возможно, вы замечали, что на некоторых сайтах выпадающие подменю исчезают слишком быстро, при этом сложно поймать нужную ссылку и кликнуть по ней. Предотвратить такое поведение как раз и помогает свойство transition-delay , установленное для обычного элемента и для элемента с псевдоклассом :hover . Значения будут отличаться: для обычного состояния свойство transition-delay должно иметь значение больше нуля, а для состояния наведенного курсора оно должно равняться 0. Пример:
.submenu < opacity: 0; transition-property: all; transition-duration: .5s; transition-delay: 1s; >.menu:hover .submenu
Данный код приведет к тому, что появление меню при наведении курсора будет происходить без задержки, а исчезновение задержится на одну секунду. Такой трюк однозначно сделает меню более удобным для использования.
задержка выпадающего меню
Помогите реализовать задержку выпадающего меню, скрипт на уровне копи паст, пытался реализовать через transition:delay, но почему то не работает!
Ссылка на комментарий
Поделиться на других сайтах
14 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |