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

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

Есть код - https://jsfiddle.net/o1Lns9ta/
Как сделать такой эффект при нажатии на меню как тут - skalexander.ru
Не знаю как сделать? Помогите пожалуйста
  • Вопрос задан
  • 110 просмотров
Решения вопроса 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
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Webit Москва
До 90 000 руб.
Eagle Dynamics Москва
от 80 000 руб.