Бихте ли искали да проявите креативност, като създадете разширяемо лепкаво меню при задържане на мишката с Divi ?
В този урок ще ви покажем как да създадете разширяемо лепкаво меню при задържане на курсора на мишката от Divi's Mechanic Layout Pack .
Ще се справим с два различни примерни дизайна, които можете да пресъздадете от нулата и да приложите към всеки тип уеб сайт които създавате!
Менюто ще се покаже при задържане на курсора на мишката на работния плот и ще се активира при щракване на мобилни устройства.
Да вървим!
изследване
Преди да се потопим в този урок, нека хвърлим бърз поглед на резултата при различни размери на екрана.
Пример 1
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Пример 2
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Общи стъпки
Деактивирайте фиксираната навигация
Достъп до опциите на темата Divi
Ще започнем с някои общи стъпки. Тези стъпки са еднакви и за двата примера и са необходими за постигане на желания резултат.
Ако планирате да използвате разширяващо се лепкаво меню в долната част на вашата страница, може да искате да оставите лентата с главно меню в горната част.
Прочетете още: Как да създадете персонализирани наслагвания на изображения в Divi
За това ще трябва да отидете Divi >> Опции за тема от таблото за управление на WordPress
Деактивирайте фиксираната навигация
Там ще трябва да деактивирате „Фиксирана лента за навигация“ за да се уверите, че няма останало място в горната част на вашата страница.
- Фиксирана лента за навигация: Дезактивирана
Скрийте лентата с главно меню на страницата
Отворете настройките на страницата
Отидете на страницата, където искате да добавите разширяемото лепкаво меню, и отворете настройките на страницата.
Добавете персонализиран CSS
Скрийте главното меню, като добавите следните редове CSS код към вашата страница.
#main-header {
display: none;
}
Добавете нов раздел в края на страницата
Без значение кой пример искате да пресъздадете, някои от основните стъпки остават същите. Първата стъпка е да добавите обикновен раздел в долната част на страницата.
разстояние
Отворете настройките на секцията и променете следните настройки в раздела Дизайн под опция Отстояние.
- Подложка (отгоре и отдолу): 0px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
оразмеряване
Без да добавяте още модули, отворете настройките на линията и променете следните настройки в раздела Дизайн под опция Оразмеряване
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
разстояние
След това премахнете всички горни и долни подложки по подразбиране, под опцията Отстояние.
- Подложка (отгоре и отдолу): 0px
Основен елемент
Позволяваме на целия ред да се придържа към дъното на нашата страница, като добавяме два прости реда от CSS код към основния елемент на реда.
bottom: 0px;
position: fixed;
Z-индекс
И ние ще се уверим, че редът (и текстовият модул, който ще добавим в следващите стъпки) остават над всичко съдържание на страницата чрез увеличаване на индекса Z, Разширете опцията Позиция.
- Z-индекс: 99
Добавете модул Код към колоната
Добавете CSS код между стиловите тагове
Последната част от общите стъпки е да добавите кодов модул към новия ред. CSS кодът, който добавяме в този модул за кодове, ще ни помогне да постигнем разкриващия ефект при задържане на мишката.
Вижте също: Как да създадете меню с въртящо се колело при задържане на мишката в Divi
Поставете следните редове от CSS код в модула:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Примерен дизайн #1
Добавете текстов модул към колоната
Добавете съдържание
Сега, след като преминахме през всички стъпки, можем да започнем да се фокусираме върху двата различни примера за дизайн, като започнем с първия!
Добавете текстов модул към колоната на вашия ред. В района на съдържание, използваме стила на абзаца за показване на текста „≡Меню“.
След това поставяме всички елементи от менюто в неподреден списък. Също така ще добавим връзка към всяко от заглавията на страницата поотделно.
Цвят на фона по подразбиране
Отидете до настройките на фона на модула и променете цвета на фона.
- Фон: #ffffff
Цвят на фона при задържане
Променете този цвят на фона при задържане.
- Фон (Hover): rgba(255,255,255,0.83)
Градиентен фон
И също така добавете градиентен фон по подразбиране.
- Цвят вляво: rgba(255,255,255,0)
- Десен цвят: #ffffff
- Позиция вдясно: 60%
Текстови настройки по подразбиране
Продължете, като отидете на раздела Дизайн и промяна на настройките на текста.
- Шрифт на текста: Khand
- Тегло на шрифта: получер
- Цвят на текста: #021827
- Размер на текста: 3vh
- Ориентация: Център
Задръжте курсора на текстовите настройки
Променете някои от настройките на текста при задържане.
- Цвят на текста (задръжте курсора на мишката: rgba(255,255,255,0)
- Размер на текста (задръжте курсора): 0vh
Настройки на текста на връзката
След това отидете на настройките на текста на връзката и променете цвета на текста на връзката.
- Цвят на текста на връзката: #000000
Списък по подразбиране (десктоп)
Превключете към настройките за текст на списъка по подразбиране и го персонализирайте, както желаете. Уверете се, че използвате „0px“ за размера на текста в състоянието му по подразбиране.
- Шрифт на неподреден списък: Khand
- Стил на шрифта на списъка: TT
- Подравняване на текста в списъка: центрирано
- Неподреден цвят на текста: rgba(255,255,255,0)
- Размер на текста на неподреден списък: 0px
- Тегло на списък текст: 0em
- Позиция на стила на неподреден списък: отвътре
Настройки на списъка с курсора на мишката
След това променете някои от стойностите при задържане на курсора, за да позволите на елементите от менюто да се показват.
- Цвят на текста в списъка (задръжте курсора): #000000
- Размер на неподреден текст в списъка (задръжте курсора на мишката): 2vh
- Височина на текста в неподреден списък (задръжте курсора): 2,1 em
Разстояние по подразбиране (работен плот)
След това отидете на настройките за разстояние (опция Отстояние) и придайте форма на текстовия модул.
- Поле (ляво и дясно): 45vw (десктоп), 39vw (таблет), 33vw (телефон)
- Подложка (отгоре и отдолу): 2vw (десктоп), 4vw (таблет), 6vw (телефон)
Ховър Разстояние
Променете същите тези стойности при задържане.
- Поле (ляво и дясно): 14vw
- Подплата (отгоре и отдолу): 8vw
Граница по подразбиране (работен плот)
Отидете до настройките на границите и се уверете, че всеки от заоблените ъгли има стойност „0px“.
Граница при задържане
Активирайте опциите за задържане върху заоблени ъгли и променете стойностите горе вляво и горе вдясно.
- Горе вляво: 50vw
- Горе вдясно: 50vw
Кутия за сянка
Продължете, като придадете дълбочина на модула, като използвате сянка в кутия. Това ще гарантира, че менюто няма да остане незабелязано на страницата.
- Сила на замъгляване на сенки в кутия: 1000px
- Цвят на сянка: rgba(0,0,0,0.68)
CSS клас
Добавяме и CSS клас към модула.
- CSS клас: dt-меню
Преходите
И накрая, намалете продължителността на прехода в настройките на преходите.
- Продължителност на прехода: 100ms
Примерен дизайн #2
Добавете текстов модул към колоната
Добавете съдържание
Да преминем към втория пример! Тук отново ще добавим „≡Меню“ като използвате стила на текста на абзаца и елементи от менюто, като използвате неподреден списък. Също така ще добавим връзка към всеки от елементите на менюто поотделно.
Цвят на фона по подразбиране (работен плот)
Отидете на настройките на фона и променете цвета на фона.
- Фон: #ffffff
Цвят на фона при задържане
Променете цвета на фона при задържане.
- Фон (задръжте): #f71535
Текстови настройки по подразбиране (десктоп)
След това отидете в раздела Дизайн и направете някои промени във външния вид на текста.
- Шрифт на текста: Khand
- Тегло на шрифта: получер
- Цвят на текста: #021827
- Размер на текста: 3vh
Настройки за текст при задържане на мишката
Променете тези настройки при задържане.
- Цвят на текста (задръжте курсора): rgba(255,255,255,0)
- Размер на текста (задръжте курсора): 0vh
Настройки на текста на връзката
Отидете на настройките на текста и променете цвета на текста на връзката.
- Цвят на текста на връзката: #ffffff
Настройки на текста на списъка по подразбиране
Също така променете настройките на дизайна на неподредените елементи от списъка.
- Шрифт на неподреден списък: Khand
- Стил на шрифта на неподреден списък: TT
- Списък Подравняване на текста: център
- Неподреден цвят на текста на списъка: rgba(255,255,255,0)
- Размер на текста на списъка: 0px
- Височина на реда на неподреден списък: 0em
- Позиция на стила на неподреден списък: отвътре
Настройки на списъка с курсора на мишката
И променете някои от тези стойности при задържане.
- Цвят на текста на неподреден списък: #ffffff
- Размер на текста на списъка: 2vh
- Височина на реда на неподредения списък: 2,1 em
Разстояние по подразбиране (работен плот)
След това отидете на настройките за разстояние и дайте на модула малко място.
- Марж (вдясно): 88 vw (настолен компютър и таблет), 71 vw (телефон)
- Подплата (отгоре): 6 vw (десктоп)), 10 vw (таблет), 18 vw (телефон)
- Подложка (отдолу): 4 vw (десктоп), 10 vw (таблет), 12 vw (телефон)
- Лява подложка: 1vw
Ховър Разстояние
Промяна на стойностите при задържане.
- Марж (вдясно): 59vw
- Подложка: (отгоре)13vw, (отдолу)8vw, (отляво)1vw, (дясно)13vw
граница
И за да създадем този дизайн на четвърт кръг, ще променим горната дясна граница в настройките на границата.
- Горе вдясно: 50vw
Кутия за сянка
Също така ще добавим сянка на кутия, за да създадем дълбочина на страницата.
- Сила на замъгляване на сянката на кутията: 1000px
- Цвят на сянка: rgba(0,0,0,0.68)
CSS клас
След това ще добавим CSS клас в раздела Подробно.
- CSS клас: dt-меню
Преходите
И намалете продължителността на прехода в раздела Подробно за създаване на бърз преход.
- Продължителност на прехода: 100ms
изследване
След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.
Пример №1
бюро
подвижен
Изтеглете DIVI сега!!!
Пример №2
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да създадете разширяемо лепкаво меню с помощта на от Divi Mechanic Layout Pack. Разгледахме два различни примера за дизайн, които можете да модифицирате и използвате на всеки тип уеб сайт които създавате!
Надяваме се, че този урок ще ви вдъхнови за следващите ви проекти. Divi. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...