Анимированная навигация

Создание плавной и интерактивной навигации — одна из ключевых задач современного фронтенда. С помощью фреймворка Vue.js такие компоненты реализуются элегантно и с минимальным количеством кода. Реактивность Vue позволяет легко управлять состоянием интерфейса (например, открытием/закрытием меню), а система привязки классов и стилей делает анимации простыми и декларативными.

Компонент ниже наглядно демонстрирует, как Vue упрощает разработку сложного интерактивного поведения.

<div id="app" class="app">
  <div class="app__top"></div>
  <nav class="app__nav" :class="{shrinked: !isExpanded}">
    <div class="app__menu" :class="{expanded: isExpanded}">
      <div class="app__menu-content">
        <a class="app__menu-item" v-for="item in items" :class="{hide: !isExpanded}" href="#" target="_blank" rel="nofollow">
          {{item}}
        </a>
      </div>
    </div>
    <div class="app__burger" @click="isExpanded = !isExpanded">
      <div class="app__burger-line up" :class="{rotate: !isExpanded}"></div>
      <div class="app__burger-line down" :class="{rotate: !isExpanded}"></div>
    </div>
  </nav>
  <div class="app__bottom"></div>
</div>

.app {  
  position: absolute;
  inset: 0;  
}
.app__top {
  position: absolute;
  z-index: -1;
  inset: 0 0 50% 0;
  background-color: #D6EAF8;
}
.app__bottom {
  position: absolute;
  z-index: -1;
  inset: 50% 0 0 0;
  background-color: #3498DB;
}
.app__nav {
  --tr: .6s ease-in-out;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 20px;  
  inline-size: max-content;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.25);
  transition: gap var(--tr);
}
.app__nav.shrinked {
  gap: 0;
}
.app__menu {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns var(--tr);
}
.app__menu.expanded {
  grid-template-columns: 1fr;
}
.app__menu-content {
  overflow: hidden;
  display: flex;
  gap: 0 20px;
}
.app__menu-item {
  flex: 0 0;
  inline-size: -moz-max-content;
  inline-size: max-content;  
  color: inherit;
  transition: opacity var(--tr);
}
.app__menu-item.hide {
  opacity: 0;
}
.app__burger {
  position: relative;
  min-inline-size: 30px;
  block-size: 30px;
  cursor: pointer;
}
.app__burger-line {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: 100%;
  block-size: 2px;
  background-color: #3498DB;
}
.app__burger-line.up {
  transform: translate(0, 0) rotate(45deg);
  transition: transform var(--tr);
}
.app__burger-line.up.rotate {
  transform: translate(0, -5px) rotate(540deg);
}
.app__burger-line.down {
  transform: translate(0, 0) rotate(-45deg);
  transition: transform var(--tr);
}
.app__burger-line.down.rotate {
  transform: translate(0, 5px) rotate(-540deg);
}

const {createApp, ref} = Vue
createApp({
    setup(){
        const isExpanded = ref(true)
        const items = ref(['Дом','Портфолио','О нас','Контакты'])
        return{isExpanded, items}
    }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Подробный разбор кода компонента

Давайте детально разберем, как устроен этот компонент.

HTML-структура (Vue Template)

<nav class="app__nav">: Основной контейнер навигации. Класс shrinked управляет уменьшением отступа gap между меню и кнопкой-бургером при сворачивании.
<div class="app__menu">: Контейнер для пунктов меню. Ключевая логика анимации скрытия/раскрытия реализована здесь через CSS Grid. Класс expanded переключает grid-template-columns с 0fr на 1fr, создавая плавное анимируемое схлопывание и расширение.
<a class="app__menu-item">: Ссылки-пункты меню. Генерируются директивой v-for из массива items. Класс hide плавно изменяет их прозрачность opacity при сворачивании.
<div class="app__burger">: Кнопка-бургер для переключения состояния. Обработчик @click инвертирует булево значение реактивной переменной isExpanded — сердце логики компонента.

CSS-стили

Адаптивность: Для анимации переключается свойство grid-template-rows.
Анимации: Все переходы управляются CSS-переменной --tr (transition), задающей длительность и функцию плавности ease-in-out. Это обеспечивает согласованность анимаций.
Бургер-иконка: Превращение крестика в две линии (и обратно) реализовано через трансформации transform: rotate двух псевдоэлементов .app__burger-line.up и .down. Класс .rotate меняет их положение и вращение.

Логика на Vue.js (Composition API)

const isExpanded = ref(true): Реактивная переменная, хранящая состояние меню (открыто/закрыто). Является «единым источником истины» для всех анимаций.
const items = ref(['Дом','Портфолио','О нас','Контакты']): Реактивный массив данных для пунктов меню. Для добавления или переименования пунктов достаточно изменить только этот массив.
Связь шаблона и логики: Состояние isExpanded через директиву :class динамически добавляет или убирает CSS-классы (expanded, shrinked, hide, rotate), запуская соответствующие анимации.

Этот компонент — лишь небольшая демонстрация того, как Vue.js помогает создавать живые, отзывчивые интерфейсы. Подобные решения делают пользовательский опыт значительно приятнее и современнее.

Готовы оживить ваш сайт?

Нужна уникальная анимированная навигация, сложный интерактивный элемент или целый креативный сайт? Наша веб-студия готова воплотить ваши идеи в код. Мы специализируемся на создании производительных, визуально притягательных и удобных веб-интерфейсов, которые решают бизнес-задачи и цепляют пользователей.

Давайте создадим что-то выдающееся вместе!

Предыдущий Следующий