Как создать гамбургер-меню с потрясающей анимацией с помощью Divi & Anime.js

Раньше мы делились различными типами заголовков, которые вы можете создать с помощью Divi и Divi Theme Builder. Фактически, вы можете найти все эти учебные пособия, перечисленные в этом навигационном посте. В этом посте вы заметите, что мы показали вам, как создать полноэкранный заголовок, но чтобы помочь вам развить дизайн заголовка еще дальше, мы покажем вам, как создать настраиваемое анимированное гамбургер-меню. В гамбургер-меню, которое мы создадим, есть несколько примечательных моментов:

• Как только посетители нажимают на значок гамбургера, появляется полноэкранный заголовок, и каждый пункт меню открывается один за другим, придавая ему настраиваемый анимированный вид.
• Пользовательские анимации запускаются каждый раз при открытии меню.
• Вы также сможете добавлять выпадающие элементы к элементам главного меню, они открываются по щелчку и автоматически закрываются, как только кто-то закрывает меню или щелкает элемент навигации.

Другими словами, это определенно руководство по заголовкам, которое поможет вам добавить этот расширенный вид на ваш сайт. Вы также можете стилизовать элементы, как хотите, и вы сможете бесплатно загрузить файл шаблона JSON!

Давайте перейдем к этому.

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Загрузите шаблон глобального заголовка БЕСПЛАТНО

Чтобы получить доступ к бесплатному шаблону глобального заголовка, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Создайте новый шаблон заголовка

Перейдите в конструктор тем Divi и добавьте новый шаблон глобального заголовка

Начните с перехода к Divi Theme Builder. Один там, добавьте новый глобальный заголовок.

Начать строительство с нуля

И начните создавать дизайн заголовка с нуля.

2. Создайте логотип и значок гамбургера.

Настройки раздела

Фоновый цвет

Оказавшись внутри редактора шаблонов, мы начнем с создания логотипа и значка гамбургера. Вы заметите, что там уже есть раздел. Откройте настройки раздела и примените прозрачный цвет фона.

• Цвет фона: rgba (255,255,255,0)

Интервал

Перейдите на вкладку дизайна раздела и удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Позиция

Затем перейдите к расширенному и зафиксируйте секцию.

• Позиция: фиксированная
• Расположение: вверху слева
• Индекс Z: 13

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя модули, откройте настройки строки, перейдите на вкладку дизайна и соответствующим образом измените настройки размеров:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 95%
• Максимальная ширина: 100%

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Основной элемент CSS

И чтобы убедиться, что и логотип, и значок гамбургера отображаются рядом друг с другом на экранах меньшего размера, мы вставим одну строку кода CSS в основной элемент строки.

display: flex;

Добавить модуль изображения в столбец 1

Загрузить логотип

Пора добавить модули, начиная с модуля изображения в столбце 1. Загрузите логотип по вашему выбору.

Размеры

Перейдите на вкладку дизайна и затем измените настройки размера.

• Максимальная ширина:
  • Рабочий стол: 80 пикселей
  • Планшет и телефон: 50 пикселей

Позиция

Затем переместите весь модуль.

• Позиция: Абсолютная
• Расположение: вверху слева
• Вертикальное смещение: 20 пикселей

Добавить текстовый модуль в столбец 3

HTML-структура в поле содержимого

В третьем столбце мы добавим текстовый модуль. Мы будем использовать этот текстовый модуль для создания нашего значка гамбургера. Начните с переключения на текстовую вкладку в поле содержимого и вставьте следующие теги HTML:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Размеры

Затем измените настройки размера модуля.

• Ширина: 80 пикселей
• Высота: 80 пикселей

Интервал

Затем примените пользовательские значения заполнения для разных размеров экрана.

• Верхняя обивка:
  • Рабочий стол: 10 пикселей
  • Планшет и телефон: 17 пикселей
• Нижняя обивка:
  • Рабочий стол: 10 пикселей
  • Планшет и телефон: 17 пикселей
• Левый отступ:
  • Рабочий стол: 15 пикселей
  • Планшет и телефон: 30 пикселей
• Правый отступ:
  • Рабочий стол: 15 пикселей
  • Планшет и телефон: 10 пикселей

Позиция

Также переставьте этот модуль.

• Позиция: Абсолютная
• Расположение: верхний левый угол

3. Создайте гамбургер-меню.

Добавить новый раздел

Градиентный фон

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

• Цвет 1: # 000000
• Цвет 2: # 111111
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Размеры

Затем примените минимальную и максимальную высоту к настройкам размера.

• Мин. Высота: 100vh
• Максимальная высота: 100vh

Интервал

Затем удалите все верхнее и нижнее заполнение раздела по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

Измените также переливы.

• Горизонтальное переполнение: скрыто
• Вертикальное переполнение: Авто

Позиция

Чтобы меню можно было открывать в любое время, мы переместим раздел на вкладке «Дополнительно».

• Позиция: фиксированная
• Расположение Top Center

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя модули, откройте настройки строки, перейдите на вкладку дизайна и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

Затем перейдите на вкладку «Дополнительно» и измените параметры переполнения.

• Горизонтальное переполнение: скрыто
• Вертикальное переполнение: Авто

Позиция

Также переместите строку.

• Позиция: Абсолютная
• Расположение Top Center

Столбец 1 Настройки

Интервал

Затем мы откроем настройки столбца 1 нашей строки и применим некоторые настраиваемые значения адаптивного заполнения.

• Верхняя обивка:
  • Рабочий стол: 24vh
  • Планшет и телефон: 10vh
• Нижняя обивка:
  • Рабочий стол: 24vh
  • Планшет и телефон: 5vh
• Левый отступ: 13%
• Правое заполнение: 13%

Граница

Мы также применим некоторые настройки границы:

• Ширина правой границы:
  • Рабочий стол: 2 пикселя
  • Планшет и телефон: 0px \
• Цвет правой границы: # 191919.
• Ширина нижней границы:
  • Рабочий стол: 0px
  • Планшет и телефон: 2 пикселя
• Цвет правой границы: # 191919.

Столбец 2 Настройки

Интервал

Затем мы перейдем к столбцу 2 и применим и к нему некоторые настраиваемые значения заполнения.

• Верхняя обивка:
  • Рабочий стол: 24vh
  • Планшет и телефон: 5vh
• Нижняя обивка:
  • Рабочий стол: 24vh
  • Планшет и телефон: 5vh
• Левый отступ: 13%
• Правое заполнение: 13%

Добавить текстовый модуль №1 в столбец 1

Добавить контент H3

Пора добавлять модули, начиная с первого текстового модуля в столбце 1. Добавьте контент H3 по вашему выбору.

Настройки текста H3

Перейдите на вкладку дизайна и измените настройки текста H3 следующим образом:

• Шрифт заголовка 3: Montserrat
• Толщина шрифта заголовка 3: Ультра полужирный
• Стиль шрифта заголовка 3: прописные
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3
  • Рабочий стол: 1vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw
• Расстояние между заголовками 3 букв: 5 пикселей

Интервал

Затем добавьте нижнее поле.

• Нижняя маржа: 5vh

Клонировать текстовый модуль и поместить дубликат в столбец 2

Завершив этот первый модуль, вы можете один раз клонировать его и поместить дубликат в столбец 2.

Изменить содержимое

Обязательно измените содержимое в этом дублирующем модуле.

Добавить текстовый модуль №2 в столбец 2

HTML-структура в поле содержимого

Чтобы продемонстрировать наши пункты меню, включая пункты подменю, мы будем использовать текстовую вкладку нового текстового модуля. Продолжайте и добавьте новый текстовый модуль в столбец 1 и вставьте следующий HTML-код:

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

Настройки текста

Перейдите на вкладку дизайна модуля и измените настройки текста следующим образом:

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: тонкий
• Цвет текста: #ffffff
• Размер текста:
  • Рабочий стол: 2.7vw
  • Таблетка: 4vw
  • Телефон: 6vw
• Расстояние между буквами текста: 0,1 м
• Высота текстовой строки: 1em

Настройки текста ссылки

Также измените цвет текста ссылки.

• Цвет текста Lin: #ffffff

Настройки текста неупорядоченного списка

Затем измените настройки текста неупорядоченного списка.

• Шрифт неупорядоченного списка: Montserrat
• Толщина шрифта неупорядоченного списка: полужирный
• Стиль шрифта неупорядоченного списка: прописные
• Размер неупорядоченного текста:
  • Рабочий стол: 1vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw
• Высота строки неупорядоченного списка: 1,5 em
• Тип стиля неупорядоченного списка: Нет
• Положение стиля неупорядоченного списка: внутри

Интервал

И завершите настройки модуля, добавив некоторые пользовательские верхние и нижние отступы.

• Верхняя набивка: 5%
• Нижняя обивка: 5%

Модуль клонирования текста для создания вариаций без подменю

Завершив первый модуль, вы можете один раз клонировать его. Мы будем использовать это дублирование, чтобы создать вариант пункта меню без пунктов подменю.

Оставить подменю и значок переключения

Чтобы превратить этот дублирующий модуль в обычный пункт меню без элементов подменю, используйте вместо этого эту структуру HTML:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

Повторное использование обоих типов пунктов меню

Когда у вас есть оба варианта пунктов меню, вы можете повторно использовать их соответственно, клонируя их и изменяя содержимое.

Добавить текстовый модуль №2 в столбец 2

Добавить содержимое H4 и абзаца в поле содержимого

В столбце 2 мы добавим еще один текстовый модуль с некоторым содержимым H4 и абзацами по нашему выбору.

Настройки текста

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста:

• Шрифт текста: Alata
• Цвет текста: #cecece
• Размер текста:
  • Рабочий стол: 0.8vw
  • Таблетка: 2.4vw
  • Телефон: 3.4vw
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 1,5 м
• Цвет текста: светлый

Настройки текста H4

Также внесите некоторые изменения в настройки текста H4.

• Размер текста заголовка 4:
  • Рабочий стол: 1vw
  • Таблетка: 3vw
  • Телефон: 4vw

Размеры

Затем измените ширину модуля в настройках размера.

• Ширина: 48%

Основной элемент CSS

И добавьте одну строку кода CSS к основному элементу модуля. Эта строка кода CSS поможет нам разместить два текстовых модуля рядом друг с другом.

display: inline-block;

Клонировать текстовый модуль №2

Изменить копию

Завершив работу с текстовым модулем, вы можете один раз клонировать его и соответствующим образом изменить содержимое.

Добавить модуль "Социальные сети" в столбец 2

Добавьте предпочтительные социальные сети

Последний модуль, который нам нужен в этом дизайне, - это модуль отслеживания социальных сетей в столбце 2. Добавьте социальные сети по вашему выбору.

Удаление цвета фона каждой социальной сети по отдельности

Удалите цвет фона каждой социальной сети по отдельности.

Интервал

Затем вернитесь к общим настройкам модуля и примените верхнее поле.

• Верхняя маржа: 5vh

4. Добавьте функциональность

Добавить класс CSS в текстовый модуль значка гамбургера

Теперь, когда фундамент нашего дизайна гамбургер-меню заложен, мы можем сосредоточиться на добавлении функциональности! Первое, что вам нужно сделать, это открыть текстовый модуль, содержащий значок гамбургера, и добавить следующий класс CSS:

• Класс CSS: полноразмерный-открытый

Добавить класс CSS в раздел № 2

Затем откройте раздел гамбургер-меню, раздел №2, и добавьте следующий класс CSS:

• Класс CSS: fullwidth-menu

Добавить класс CSS в каждый модуль в меню полной ширины

Чтобы создать эффект нестандартной анимации, нам нужно применить следующий класс CSS к каждому модулю в разделе №2.

• Класс CSS: эффект нестабильности

Добавить дополнительный класс CSS в пункты меню

Добавьте дополнительный класс CSS, названный «main-menu-item», к каждому из пунктов меню в столбце 1.

• Класс CSS: элемент главного меню с эффектом шахматного удара

Добавить модуль кода в раздел №1

Чтобы применить эту функциональность, мы будем использовать собственный код CSS и JQuery. Мы разместим этот код в новом модуле кода во втором столбце нашей строки в разделе №1.

Вставить код CSS

Добавьте следующий код CSS в модуль кода между тегами стилей, как вы можете заметить на экране печати ниже.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

Вставить библиотеку Anime.js

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

• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

Вставить код JQuery

Функции щелчка в нашем гамбургер-меню основаны на следующем коде JQuery. Убедитесь, что вы поместили этот код между тегами скрипта, как вы можете видеть на экране печати ниже.

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

Активируйте класс CSS, как только вы закончите дизайн полноэкранного заголовка

И последнее, но не менее важное: мы включим класс CSS в модуле кода, который вы можете найти в первом разделе. Откройте модуль кода и удалите символы «/ * * /» в начале и конце класса. Включение этого класса (в сочетании с некоторым уже включенным кодом JQuery) гарантирует, что раздел, содержащий элементы меню, не загружается сразу, когда кто-то посещает одну из ваших страниц. После включения этого класса второй раздел на вашей странице исчезнет из Visual Builder, но вы все равно сможете получить к нему доступ в режиме каркаса или отключить класс CSS, если хотите внести дополнительные изменения.

5. Сохраните изменения заголовка и построителя тем.

Вот и все! Осталось только сохранить шаблон и Divi Theme Builder и просмотреть результат на своем веб-сайте!

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как проявить творческий подход к заголовку Divi. В частности, мы показали вам, как создать собственное анимированное гамбургер-меню. Как только посетитель нажимает на значок гамбургера, появляется полноэкранное меню, в котором элементы меню отображаются один за другим, что обеспечивает приятный пользовательский интерфейс. Вы также смогли бесплатно скачать файл шаблона JSON! Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.