0

Здравствуйте. Есть меню, при наведение на него появляется выпадающее вертикальное меню. Только это происходит моментально. Хотелось бы добавить задержку в 2-3 секунды.

К сожалению мне не удалось все это красиво оформить в JSFiddle. Объемный CSS +возможно есть JS.

Ссылка на меню (вертикальное, категории товаров) http://demo.cs-cart.ru/stores/137929/.

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

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 16 мая 2016 в 7:10

2 ответа 2

1

Необходимо добавить свойства к CSS классам:

.ty-menu__submenu-items {
    display: block;
    opacity: 0;
    visibility: hidden;
}

.no-touch .ty-menu__item:hover .ty-menu__submenu-items, .is-hover-menu .ty-menu__submenu-items {
    display: block;
    visibility: visible;
    opacity: 1;
    transition: all linear 1s;
}
2
  • Спасибо, то что нужно. А как убрать эффект перехода?
    – Lebedev
    15 мая 2016 в 12:11
  • Можно использовать нелинейную функцию перехода transition: all cubic-bezier(1, -0.3, 1, -0.35) 0.3s;
    – Sweet-Bob
    15 мая 2016 в 13:18
0

nav a {
  display: block;
  text-decoration: none;
  padding: 0 .5em;
  line-height: 2em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  display: inline-block;
}

nav li ul {
  display: block;
  position: absolute;
  transform: scale(0);
  transition: transform 1s step-end;
}

nav li li {
  display: block;
}

nav a:hover {
  background: silver;
}

nav li:hover > ul {
  transform: scale(1);
}
<nav>
  <ul>
    <li>
      <a href="#">Menu 1</a>
      <ul>
        <li><a href="#">Submenu 1.1</a></li>
        <li><a href="#">Submenu 1.2</a></li>
        <li><a href="#">Submenu 1.3</a></li>
      </ul>
    </li><li>
      <a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Submenu 2.1</a></li>
        <li><a href="#">Submenu 2.2</a></li>
        <li><a href="#">Submenu 2.3</a></li>
        <li><a href="#">Submenu 2.4</a></li>
      </ul>
    </li>
  </ul>
</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.