Выпадающее горизонтальное меню с задержкой на 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

Читайте также  Google Chrome как текстовый редактор
Верстка сетки из ромбов с изображениями... Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками. Пример как сверст...
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...
Кириллица veranda и roboto шрифт. font-family: Verdana, Geneva, sans-serif; font: normal 13px Roboto,arial,sans-serif;
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...

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