Искате ли да създадете плъзгащо се и натискащо меню в DIVI който не скрива елементи от вашата страница?
Големите заглавки с много връзки за навигация могат да заемат ценно място във вашия уеб сайт. Ето защо контекстните и плъзгащите се менюта стават все по-популярни. През повечето време менютата, които се плъзгат, за да се покажат, остават над съдържание на страницата, скривайки определени елементи.
Плъзгащото се меню с натискане обаче работи малко по-различно. Ефектът на плъзгащо натискане е уникален с това, че менюто се плъзга от горната част на страницата, докато едновременно с това натискате съдържание от страницата до дъното, така че нищо да не е скрито от погледа.
В този урок ще ви покажем как да създадете плъзгащо се меню за натискане от нулата с помощта на Divi Theme Builder.
Да вървим!
изследване
Ето бърз поглед върху плъзгащото се меню за натискане, което ще създадем в този урок.
Създайте плъзгащото се натискащо меню с конструктора на теми Divi
Създаване на ново глобално меню
За да създадем менюто, ще създадем нов глобален хедър в Divi Theme Builder.
Отидете на Divi > Theme Builder.
Прочетете още: Как да създадете глобална заглавка с формуляр за влизане в DIVI
След това щракнете върху областта „Добавяне на глобална заглавка“ в шаблон за уебсайт по подразбиране. От падащия списък изберете „Build Global Header“.
Създаване на push меню
Първият елемент, който ще изградим заедно, е секцията с менюто за натискане. Този раздел ще съдържа елементите от менюто, които ще се превключват нагоре и надолу, когато щракнете върху бутона за превключване на менюто.
Настройки на секцията
Отворете настройките на секцията по подразбиране и актуализирайте настройките, както следва:
Заден план
- Фон: #1a1e36
Вътрешен марж
- Вътрешно поле: 0px отгоре, 0px отдолу
CSS клас
Под разширения раздел добавете следния CSS клас, който ще бъде използван по-късно в нашия JS код.
- CSS клас: et-push-menu
Добавете линията 1
След като параметрите на раздела са определени, създайте ред с една колона в раздела.
Параметри на ред 1
След това актуализирайте параметрите на линията, както следва:
оразмеряване
- Използване на персонализирана ширина на улука: ДА
- Разстояние между колоните: 1
- Максимална ширина: 100%
- Максимална ширина: 1 пиксела
разстояние
- Поле: Горно 3vh, Долно 3vh
граница
- Ширина на долната граница: 1px
- Цвят на долната граница: rgba(255,255,255,0.2)
Персонализиран CSS
Под разширения раздел добавете следния персонализиран CSS към основния елемент:
display:flex;
justify-content:center;
align-items:center;
Параметри на колоната
След като настройките на реда са определени, отворете настройките на колоната и добавете персонализиран CSS фрагмент към основния елемент:
display:flex;
align-items:center;
justify-content:center;Това ще центрира съдържание на колоната както вертикално, така и хоризонтално.
Добавете бутон
Вече сме готови да започнем да добавяме нашите елементи от менюто с помощта на модула Button. Започнете с добавяне на нов бутон към колоната.
Вижте също нашето ръководство за: Как да създадете вертикално меню за навигация в DIVI
Настройки на бутона
След това актуализирайте настройките на бутоните, както следва:
Съдържание
- Текст на бутона: Дизайн
- URL адрес на връзка към бутона: # (заменете по-късно със собствен персонализиран URL адрес)
Стил
- Използвайте персонализирани стилове за бутон: ДА
- Цвят на текста на бутона: #ffffff
- Ширина на рамката на бутона: 0 пиксела
- Бутон Шрифт: Монсерат
- Бутон с мека светлина: Тежък
- Бутон с икона: ДА
- Бутон с икона: [Ваш избор]
- Показване само на икона при задържане на мишката върху бутона: НЕ
- Разположение на иконата на бутона: отляво
Дублирана колона
Сега, за да създадем допълнителните бутони за менюто, можем да дублираме колоната. За този дизайн нека дублираме колоната 4 пъти, за да ни дадат общо 5 елемента/бутона от менюто в ред от пет колони.
Добавете линията 2
След като първият ред е завършен, ние сме готови да добавим друг ред от бутони, които могат да се използват за различен набор от елементи от менюто.
Прочетете още: Как да добавите формуляр за контакт към глобална заглавка в DIVI
За да създадете следващия ред, дублирайте ред 1.
Изтрийте всички колони с изключение на една
След това изтрийте всички колони освен една в дублиращия се ред.
Параметри на ред 2
Актуализирайте параметрите на ред 2, както следва:
- Максимална ширина: 1 пиксела
- Ширина на долната граница: 0px
Параметри на колоната
След това добавете рамка към колоната, както следва:
- Ширина на дясната граница: 1px
- Цвят на дясната граница: rgba(255,255,255,0.2)
Актуализиране на настройките на бутона
След като колоната има дясната граница, отворете настройките на бутона и актуализирайте следното:
- Размер на текста на бутона: 14px
- Бутон за мека светлина: удебелен текст
- Разстояние между буквите на бутоните: 2 px
- Стил на копиране на бутон: TT
- Бутон с икона: НЕ
Дублирана колона
Както направихме преди, нека дублираме колоната, за да създадем допълнителни бутони и колони. За този дизайн нека дублираме колоната 3 пъти, за да имаме общо 4 бутона в ред от 4 колони.
Премахване на границата от последната колона
Тъй като не искаме последната колона да има правилната граница, отворете настройките за колона 4 и актуализирайте ширината на границата:
- Ширина на дясната граница: 0px
Създаване на основната заглавна лента
След това ще създадем основната секция на заглавната лента. Тази заглавна лента винаги ще остане видима и ще съдържа логото на нашия сайт, призив за действие и нашия бутон за превключване на менюто.
Добавете раздел
Преди да добавите новия раздел, добра идея е да актуализирате етикета на предишния раздел, за да гласи „Секция на менюто за натискане“.
Вижте също: Как да създадете глобален хедър с Theme Builder в DIVI
След това създайте нов раздел под първия раздел.
Настройки на секцията
Сега актуализирайте етикета на новия раздел, за да гласи „Раздел за заглавка“. След това отворете настройките на раздела и актуализирайте следното:
разстояние
- Вътрешно поле: 0px отгоре, 0px отдолу
Добавете ред
След като подложката на секцията е зададена, добавете ред с три колони към секцията.
Настройки на линията
Отворете параметъра на реда и актуализирайте следното:
оразмеряване
- Ширина на улука: 1
- Ширина: 90%
- Височина: 70px
разстояние
- Вътрешно поле: 0px отгоре, 0px отдолу
Персонализиран CSS
Под разширения раздел добавете следния персонализиран CSS към основния елемент:
display:flex;
align-items:center;Това ще центрира вертикално колоните в реда.
Добавете бутон
За да създадем основната CTA в секцията на заглавката, можем да използваме бутон на втория ред в горната секция. Копирайте бутона от колона 1 на ред 2 на горната секция и го поставете в колона 1 на реда на секцията на заглавката.
Актуализиране на настройките на бутона
След това отворете настройките на дублирания бутон и актуализирайте следното:
- Текст на бутона: Регистрация
- Размер на текста на бутона: 14px
- Цвят на текста на бутона: #1a1e36
- Бутон с икона: ДА
- Бутон с икона: стрелка надясно (вижте екранната снимка)
Добавете лого
В средната колона добавете модул Image. Така ще добавим динамично логото на сайта.
Задръжте курсора на мишката върху областта на изображението и щракнете върху иконата „Използване на динамично съдържание“. От падащото меню изберете „Лого на сайта“.
Настройки на изображението
След това в раздела Стил актуализирайте следното:
- Подравняване на изображението: центрирано
- Максимална височина: 55 пиксела
Добавете персонализирана икона за хамбургер
Можем да използваме обикновена икона чрез модул за оформление като превключвател на менюто, но за този урок реших да добавим персонализиран превключвател на менюто със страхотен преходен ефект.
Добавете текстов модул
За да създадем иконата на менюто, ще използваме текстов модул с персонализиран HTML код, който ще бъде стилизиран с външен CSS.
Продължете и добавете текстов модул към колона 3.
Добавете HTML код към текстовия модул
След това добавете следния HTML код към съдържанието на текстовия модул:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Заден план
Дайте фонов цвят на текстовия модул:
- Цвят на фона: #1a1e36
Форматиране на текста
След това актуализирайте настройките за стил, както следва:
- Ширина: 70 пиксела
- Подравняване на модула: дясно
- Височина: 70px
- Вътрешно поле: 20px отгоре, 20px отдолу, 16px отляво, 16px отдясно
CSS клас
Под разширения раздел добавете следния CSS клас:
- CSS клас: et-push-menu-toggle
Добавяне на код
За да донесем функционалността, от която се нуждаем, за да работи това плъзгащо се меню за натискане, ще добавим нашия персонализиран CSS и jQuery към модул Code.
Продължете и добавете модул Код към колона 3 под модула Текст.
След това поставете следния код (NB: увийте този код в тагове стил за да работи правилно):
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
След това копирайте и поставете този код директно отдолу (важно: увийте този код в скриптови тагове, за да работи правилно):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Актуализирайте текста на бутона и връзките
И накрая, можем да актуализираме всички бутони с необходимия текст на бутона и URL адреси на връзки.
Това е направено !
Запазване на настройките
Не забравяйте да запазите оформлението и настройките на Theme Builder.
Краен резултат
За да видите крайния резултат, проверете страницата на вашия уебсайт.
Направете Sticky
Ако искате "залепваща" версия на менюто, просто добавете следния CSS кодов фрагмент към кодовия модул (между стиловите тагове):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Ето резултата.
Изтеглете DIVI сега!!!
Заключение
Надяваме се, че ще харесате това плъзгащо се меню. Ефектът е уникален и отваря вратата към по-креативни заглавки. Ако срещнете някакви притеснения или предложения, нека ни намерите раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...