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

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

Есть код - https://jsfiddle.net/o1Lns9ta/
Как сделать такой эффект при нажатии на меню как тут - skalexander.ru
Не знаю как сделать? Помогите пожалуйста
  • Вопрос задан
  • 109 просмотров
Решения вопроса 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
Похожие вопросы