Искате ли да създадете плъзгащо се и реагиращо странично меню в Divi?

Когато създавате уебсайт, често се чудите какъв тип заглавка да създадете. Най-често използваната в мрежата е хоризонталната лента с менюта в горната част, но има и други опции, като например плъзгащо се меню. 

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

Следователно, използването на плъзгащо се меню ви помага да добавите допълнително взаимодействие към уебсайта си.

Ето защо в този урок ще ви покажем как да създадете такъв с помощта на Theme Builder на Divi.

Да започнем!

изследване

Преди да се потопим в този урок, нека първо да разгледаме резултата, който ще получим.

Отидете в Theme Builder и създайте глобална заглавка

Отидете на Theme Builder

За да започнете, отидете на Theme Builder от менюто Divi във вашето табло за управление на WordPress и щракнете върху „Добавяне на глобална заглавка“.

Създайте глобалната заглавка

Продължете, като изберете „Създаване на глобална заглавка“.

Създайте стил на заглавка

Настройки на секцията

Цвят на фона

След като влезете в редактора на шаблони, ще забележите секция. Отворете този раздел и направете цвета на фона прозрачен.

• Фон: rgba (255,255,255,0)

разстояние

Превключете към раздела Стил и премахнете всички долни и горни полета.

• Върх на вътрешен марж: 0px
• Долно вътрешно поле: 0px

Пост

След това ще променим позицията на секцията, като отидем в раздела за разширени и променим настройките за позиция.

• Позиция: фиксирана
• Местоположение: Топ център

Добавете първия ред

Структура на колоната

След като завършите настройките на секцията, добавете нов ред, като използвате следната структура на колоните:

оразмеряване

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

• Максимална ширина: 97%
• Максимална ширина: 100%

разстояние

Променете настройките за разстояние.

• Пиков вътрешен марж: 1%
• Долно вътрешно поле: 0px

основен елемент

След това отидете в раздела „Разширени“ и добавете два реда CSS код към основния елемент на реда. Това ще ни помогне да подравним вертикално съдържанието на колоните в нашия ред.

display: flex;

align-items: center;

Добавете модул за изображения към колона 1

Изтеглете логото

Време е да добавите модули, като започнете с модул Image в колона 1. Качете вашето лого.

Добавете текстов модул към колона 3

Добавете 3 интервала към областта на съдържанието

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

Цвят на фона

Променете цвета на фона на модула.

• Фон: rgba (0,0,0,0.04)

Текстови настройки

След това превключете към раздела Стил и премахнете височината на текстовия ред. Това ще ни помогне да имаме пълен контрол върху обхватите, които сме добавили.

• Височина на текстовия ред: 0em

оразмеряване

Ще променим параметрите за оразмеряване на модула.

• Максимална ширина: 120 пиксела
• Подравняване на текста: вдясно

разстояние

И ние ще завършим параметрите на модула, като трансформираме модула в квадрат. За това ще използваме персонализирани стойности за допълване в настройките за разстояние.

• Върх на вътрешен марж: 40px
• Долно вътрешно поле: 60px
• Ляво вътрешно поле: 40px
• Вътрешно поле вдясно: 40px

Добавете втория ред

Структура на колоната

Следващият ред! Ще използваме тази линия, за да проектираме цялото си плъзгащо се меню. Използвайте следната структура на колоните:

Цвят на фона

Без да добавяте модули, отворете настройките на реда и променете цвета на фона, както следва:

• Фон: #e7e0e2

Изображение на фона

Използваме и шаблонно фоново изображение. Можете да използвате фонов модел по ваш избор.

• Размер на фоновото изображение: действителен размер
• Позиция на фоновото изображение: център
• Повторете фоново изображение: Повторете

оразмеряване

След това превключете към раздела Стил и променете съответно настройките за оразмеряване:

• Използвайте персонализирана ширина на улука: Да
• Разстояние между колоните: 1
• Максимална ширина: 20% (настолен компютър), 40% (таблет), 60% (телефон)
• Височина: 100vh

разстояние

Също така променете настройките за разстояние на различни размери на екрана.

• Вътрешен марж на върха: 10 vw (настолен компютър), 30 vw (таблет), 40 vw (телефон)

граница

И завършете параметрите на линията, като добавите ляв контур.

• Ширина на лявата граница: 10px
• Цвят на лявата граница: #24394a
• Стил на лявата граница: двоен

Добавете текстов модул към колоната

Добавете съдържание

Време е да добавите първия елемент от менюто на текстовия модул! Добавете копието към областта със съдържание.

Добави линк

Продължете, като добавите подходяща връзка към елемента от менюто.

• URL адрес на връзката към модула: #

Цвят на фона

След това променете цвета на фона.

• Фон: rgba (216,210,212,0.35)

Текстови настройки

След това превключете към раздела Style'3 и променете настройките за текст, както следва:

• Шрифт на текста: Domine
• Мек светъл текст: Удебелен текст
• Цвят на текста Текст: #000000
• Размер на текста: 1vw (настолен компютър), 2vw (таблет), 3vw (телефон)
• Подравняване на текста: Центрирано

разстояние

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

• Долен марж: 1vw (настолен компютър), 2vw (таблет), 3vw (телефон)
• Пиков вътрешен марж: 1vw
• Долно вътрешно поле: 1vw

Клониране на текстов модул (1 модул на елемент от менюто)

След като завършите първия текстов модул за елемент от менюто, можете да го клонирате толкова пъти, колкото е необходимо. Просто се уверете, че модулите ви не надвишават височината на прозореца.

Редактиране на съдържание и връзки на дублиран текстов модул

Редактирайте съдържанието и връзките на всеки модул „Дублиран текст“.

Добавете бутонен модул към колоната

Добавете копие

Последният модул, от който се нуждаем в този ред, е модул Button. Добавете копие по ваш избор.

Добави линк

Добавете и връзка.

• URL адрес на връзката към бутона: #

подравняване

Превключете към раздела Стил и променете подравняването на бутоните.

• Подравняване на бутоните: центрирано

Настройки на бутоните

Продължете, като персонализирате модула Button, както следва:

• Използвайте персонализирани стилове за бутона: Да
• Размер на текста на бутона: 0,7 vw (настолен компютър), 1,5 vw (таблет), 2,5 vw (телефон)
• Цвят на текста на бутона: #000000
• Фонов бутон: rgba (0,0,0,0)
• Цвят на рамката на бутона: #24394a
• Бутон за радиус на границата: 0 пиксела
• Бутоно разстояние между буквите: 4px

• Бутон за шрифт: Отвори Няма
• Бутон за мека светлина: Удебелен текст
• Бутон за копиране на стил: TT

разстояние

И завършете настройките на модула чрез добавяне на персонализирани стойности за разстояние на различни размери на екрана.

• Горен марж: 5vw
• Пиков вътрешен марж: 1vw (настолен компютър), 2vw (таблет), 3vw (телефон)
• Вътрешен марж отдолу: 1vw (настолен компютър), 2vw (таблет), 3vw (телефон)
• Вътрешен марж вляво: 1,8 vw (настолен компютър), 3 vw (таблет), 4 vw (телефон)
• Дясно вътрешно поле: 1,8 vw (настолен компютър), 3 vw (таблет), 4 vw (телефон)

Добавете плъзгаща се функционалност

Добавете CSS ID към текстовия модул на иконата на менюто

Сега, когато разполагаме с всички елементи, е време да създадем ефекта на отзивчивото плъзгащо се меню! Първо отворете текстовия модул (съдържащ обхватите) в третата колона на първия си ред и използвайте персонализиран CSS ID в раздела за разширени. Ще използваме този CSS ID, за да създадем функция за щракване в нашия код.

• CSS ID: плъзгане при отваряне

Добавете CSS клас към ред #2

След това отворете втория ред, отидете в раздела Разширени и добавете персонализиран CSS клас. При щракване линията ще се плъзне.

• CSS клас: слайд-в-меню-контейнер

Променете позиционирането на ред #2

Ние също ще препозиционираме тази линия. Забележете как хоризонталното отместване съвпада с ширината на линията на различни размери на екрана в настройките за оразмеряване.

• Позиция: Абсолютна
• Местоположение: горе вдясно
• Хоризонтално изместване: -20% (настолен компютър), -40% (таблет), -60% (телефон)

Променете непрозрачността на ред 2

И доведете непрозрачността до 0 в състояние по подразбиране.

opacity: 0;

Добавете модула Code към втората колона на първия ред

Вмъкнете CSS код

За да създадем ефекта на функцията за щракване и да стилизираме пръчките на нашата икона за хамбургер, ще ни трябва малко CSS код. Добавете кодов модул към втората колона на първия ред и поставете следните редове от CSS код между етикетите за стил, както можете да видите на екрана за печат по-долу:

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

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;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

Вмъкнете JQuery код

Ще трябва също да добавим малко JQuery за функцията за щракване. Уверете се обвиване на код между скриптови тагове , както можете да видите на екрана за печат по-долу:

jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });

Запазете промените в конструктора на теми и покажете резултата на уебсайта

След като завършите всички елементи на вашия глобален хедър, всичко, което трябва да направите, е да запазите всички промени и да покажете резултата на вашия сайт!

изследване

Сега, след като преминахме през всички стъпки, нека да разгледаме за последно резултата.

Заключение

В заключение, в тази статия ви показахме как да използвате конструктора на теми на Divi, за да създадете отзивчиво плъзгащо се меню. За това сме комбинирали най-доброто от вградените елементи и опции на Divi с персонализиран код на функция за щракване. Така че ви позволява да се съсредоточите върху проектирането на плъзгащото се меню и да оставите кода да се погрижи за функционалната част на глобалната заглавка! 

Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.