rafamont
@rafamont
Паграмист

Как сделать меню как на этом сайте?

Есть код - https://jsfiddle.net/o1Lns9ta/
Как сделать такой эффект при нажатии на меню как тут - skalexander.ru
Не знаю как сделать? Помогите пожалуйста
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
  • dpr
    @dpr
    frontend developer
    Показать/скрыть я думаю сможете, это просто.
    А тот эффект с пунктами меню реализуется с помощью transition и transform
    Начальное состояние пунктов меню

    .menu__item {
      transform: translateY(100%);
      opacity: 0;
      transition: 0.4s ease;
      transition-property: opacity, transform;
    }


    В открытом состоянии меню, пункты стилизуются через какой-то класс (который может и видимостью всего меню управлять, кстати)

    .menu_state_open .menu__item {
      opacity: 1;
      transform: translate(0);
    }


    Примечание: скрывать меню с помощью display не стоит, переходы не будут работать. Лучше уносить его за пределы экрана

    .menu {
      position: fixed;
      left: -99999px;
    }
    
    .menu_state_open {
      left: 0;
    }
    Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы