Выпадающее горизонтальное меню с задержкой на CSS

Выпадающее горизонтальное меню с задержкой на CSS

Постер - Выпадающее горизонтальное меню с задержкой на CSS

Пример реализации выпадающего горизонтального меню с задержкой на CSS, без JavaScript.

Показанное нами ранее Простое выпадающее горизонтальное меню на CSS имеет два недостатка:

  • при наведении курсора на область родительского пункта, подменю мгновенно показывается
  • при выходе курсора за подменю, подменю мгновенно исчезает

С помощью CSS создадим небольшую задержку перед показом и скрытием подменю. Для этого будем использовать свойство transition в котором можно добавить задержку перед показом анимации. На свойство display анимацию нельзя вешать, для скрытия подменю будем использоваться связку opacity:0; и visibility:hidden;.

Код html:

<ul class="menu">
    <li><a href="#">Пункт меню 1</a></li>
    <li>
      <a href="#">Пункт меню 2</a>
      <ul>
        <li><a href="#">Подпункт меню 1</a></li>
        <li><a href="#">Подпункт меню 2</a></li>
        <li><a href="#">Подпункт меню 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Пункт меню 3</a>
      <ul>
        <li><a href="#">Подпункт меню 1</a></li>
        <li><a href="#">Подпункт меню 2</a></li>
        <li><a href="#">Подпункт меню 3</a></li>
        <li><a href="#">Подпункт меню 4</a></li>
        <li><a href="#">Подпункт меню 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Пункт меню 4</a>
      <ul>
        <li><a href="#">Подпункт меню 1</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Пункт меню 5</a>
      <ul>
        <li><a href="#">Подпункт меню 1</a></li>
        <li><a href="#">Подпункт меню 2</a></li>
        <li><a href="#">Подпункт меню 3</a></li>
        <li><a href="#">Подпункт меню 4</a></li>
        <li><a href="#">Подпункт меню 5</a></li>
      </ul>
    </li>
</ul>

Код css:

.menu{
    padding: 0;
    margin: 0;
    font-size: 100%;
}
.menu li{
    list-style: none;
    float: left;
    height: 33px;
    padding: 0;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #1abc9c;
    position: relative;
    padding-top: 12px;
}
.menu li:hover{
    background: #16a085;
}
.menu li ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 150px;
    position: absolute;
    left: 0;
    top: 45px;
    /* По умолчанию скрываем подменю */
    opacity: 0;
    visibility: hidden;
    /* Добавляем анимацию 0.3 сек. и задержку в 0.2 сек. */
    transition: all .3s ease .2s;
}
.menu li:hover ul{
    /* Показываем подменю при ховере */
    opacity: 1;
    visibility: visible;
}
.menu li ul li{
    float: none;
    height: 33px;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #34495e;
}
.menu li a{
    display: block;
    width: 150px;
    height: 33px;
    color: #fff;
    text-decoration: none;
}

Пример:
http://codepen.io/belka/pen/LpXxQQ

Читайте также  Ещё 50 лучших бесплатных кириллических шрифтов для дизайна II
CSS Styling Radio Button and Checkboxes The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much t...
Многоуровневое выпадающее горизонтальное меню на C... Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+). Код html: ...
Верстка сетки из ромбов с изображениями... Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками. Пример как сверст...
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...

Сохрани, чтобы не потерять