Искате да проявите креативност, като създадете разгъващо се лепящо се меню при задържане на курсора на мишката с Divi?
Dans ce tutoriel, nous allons vous montrer comment créer un menu collant extensible au survol à l'aide de Divi's Mechanic Layout Pack .
Ще разгледаме два различни примера за дизайн, които можете да пресъздадете от нулата и да приложите към всеки тип уебсайт, който създавате!
Менюто ще се покаже при задържане на курсора на мишката на работния плот и ще се активира при щракване на мобилни устройства.
Да вървим!
изследване
Преди да се потопим в този урок, нека набързо разгледаме резултата на екрани с различни размери.
Пример 1
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Пример 2
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Общи стъпки
Деактивирайте фиксираната навигация
Достъп до опциите на темата Divi
Ще започнем с някои общи стъпки. Тези стъпки са еднакви и за двата примера и са необходими за постигане на желания резултат.
Si vous prévoyez d'utiliser un menu sticky en expansion au bas de votre page, vous voudrez peut-être laisser de côté la barre de menu principale en haut.
Прочетете още: Как да създадете персонализирани наслагвания на изображения в Divi
За това ще трябва да отидете Divi >> Опции на темата от таблото за управление на WordPress
Деактивирайте фиксираната навигация
Там ще трябва да деактивирате "Fixed Navigation Bar" pour vous assurer qu'il ne reste aucun espace en haut de votre page.
- Фиксирана лента за навигация: Дезактивирана
Скрийте лентата с главно меню на страницата
Отворете настройките на страницата
Отидете на страницата, където искате да добавите разширяемото лепкаво меню, и отворете настройките на страницата.
Добавете персонализиран CSS
Скрийте главното меню, като добавите следните редове CSS код към вашата страница.
#main-header {
display: none;
}
Добавете нов раздел в края на страницата
Quel que soit l'exemple que vous souhaitez recréer, certaines des étapes de base restent les mêmes. La première étape consiste à ajouter une section régulière au bas de la page.
разстояние
Ouvrez les paramètres de section et modifiez les paramètres suivants dans l'onglet Дизайн под опцията Отстояние.
- Подложка (отгоре и отдолу): 0px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
оразмеряване
Sans ajouter encore de modules, ouvrez les paramètres de la ligne et modifiez les paramètres suivants, dans l'onglet Дизайн под опцията Оразмеряване
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
разстояние
Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut, sous l'option Отстояние.
- Подложка (отгоре и отдолу): 0px
Основен елемент
Nous permettons à la ligne entière de coller au bas de notre page en ajoutant deux lignes simples de code CSS à l'élément principal de la ligne.
bottom: 0px;
position: fixed;
Z-индекс
Et nous nous assurerons que la ligne (et le module Texte que nous ajouterons dans les étapes à venir) reste au-dessus de tout le contenu de la page en augmentant l'index Z, Déroulez l'option Позиция.
- Z-индекс: 99
Добавете модул Код към колоната
Добавете CSS код между стиловите тагове
La dernière partie des étapes générales consiste à ajouter un module Code à la nouvelle ligne. Le code CSS que nous ajoutons dans ce module Code nous aidera à obtenir l'effet révélateur au survol.
Вижте също: Как да създадете меню с въртящо се колело при задържане на мишката в Divi
Поставете следните редове от CSS код в модула:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Conception de l'exemple #1
Добавете текстов модул към колоната
Добавете съдържание
Сега, след като преминахме през всички стъпки, можем да започнем да се фокусираме върху двата различни примера за дизайн, като започнем с първия!
Добавете модул Text към колоната на реда. В областта на съдържанието използваме стила на абзаца, за да покажем текста. '≡ Menu'.
След това поставяме всички елементи от менюто в неподреден списък. Също така ще добавим връзка към всяко от заглавията на страницата поотделно.
Цвят на фона по подразбиране
Passez aux paramètres d'arrière-plan du module et modifiez la couleur d'arrière-plan.
- Фон: #ffffff
Цвят на фона при задържане на курсора на мишката
Променете този цвят на фона при задържане.
- Фон (Hover): rgba(255,255,255,0.83)
Градиентен фон
И също така добавете градиентен фон по подразбиране.
- Цвят вляво: rgba(255,255,255,0)
- Десен цвят: #ffffff
- Позиция вдясно: 60%
Текстови настройки по подразбиране
Continuez en allant dans l'onglet Дизайн и промяна на настройките на текста.
- Шрифт на текста: Khand
- Тегло на шрифта: получер
- Цвят на текста: #021827
- Размер на текста: 3vh
- Ориентация: Център
Задръжте курсора на текстовите настройки
Променете някои от настройките на текста при задържане.
- Цвят на текста (задръжте курсора на мишката: rgba(255,255,255,0)
- Размер на текста (задръжте курсора): 0vh
Настройки на текста на връзката
След това отидете на настройките на текста на връзката и променете цвета на текста на връзката.
- Цвят на текста на връзката: #000000
Списък по подразбиране (десктоп)
Passez aux paramètres du texte de la liste par défaut et personnalisez-le comme vous le souhaitez. Assurez-vous que vous utilisez '0px' pour la taille du texte dans son état par défaut.
- Шрифт на неподреден списък: Khand
- Стил на шрифта на списъка: TT
- Подравняване на текста в списъка: центрирано
- Неподреден цвят на текста: rgba(255,255,255,0)
- Размер на текста на неподреден списък: 0px
- Тегло на списък текст: 0em
- Позиция на стила на неподреден списък: отвътре
Настройки на списъка с курсора на мишката
Ensuite, modifiez certaines des valeurs au survol pour permettre aux éléments de menu d'apparaître.
- Цвят на текста в списъка (задръжте курсора): #000000
- Размер на неподреден текст в списъка (задръжте курсора на мишката): 2vh
- Височина на текста в неподреден списък (задръжте курсора): 2,1 em
Разстояние по подразбиране (работен плот)
Accédez ensuite aux paramètres d'espacement (option Отстояние) и придайте форма на текстовия модул.
- Поле (ляво и дясно): 45vw (десктоп), 39vw (таблет), 33vw (телефон)
- Подложка (отгоре и отдолу): 2vw (десктоп), 4vw (таблет), 6vw (телефон)
Ховър Разстояние
Променете същите тези стойности при задържане.
- Поле (ляво и дясно): 14vw
- Подплата (отгоре и отдолу): 8vw
Граница по подразбиране (работен плот)
Passez aux paramètres de bordure et assurez-vous que chacun des coins arrondis a une valeur de '0px'.
Граница при задържане
Активирайте опциите за задържане върху заоблени ъгли и променете стойностите горе вляво и горе вдясно.
- Горе вляво: 50vw
- Горе вдясно: 50vw
Кутия за сянка
Continuez en donnant de la profondeur au module à l'aide d'une ombre de boîte. Cela garantira que le menu ne passe pas inaperçu sur la page.
- Сила на замъгляване на сенки в кутия: 1000px
- Цвят на сянка: rgba(0,0,0,0.68)
CSS клас
Добавяме и CSS клас към модула.
- CSS клас: dt-меню
Преходите
И накрая, намалете продължителността на прехода в настройките на преходите.
- Продължителност на прехода: 100ms
Conception de l'exemple #2
Добавете текстов модул към колоната
Добавете съдържание
Да преминем към втория пример! Тук отново ще добавим '≡ Menu' като използвате стила на текста на абзаца и елементи от менюто, като използвате неподреден списък. Също така ще добавим връзка към всеки от елементите на менюто поотделно.
Couleur d'arrière-plan par défaut (Desktop)
Passez aux paramètres d'arrière-plan et modifiez la couleur d'arrière-plan.
- Фон: #ffffff
Цвят на фона при задържане на курсора на мишката
Променете цвета на фона при задържане.
- Фон (задръжте): #f71535
Текстови настройки по подразбиране (десктоп)
След това отидете на раздела Дизайн et apportez quelques modifications à l'apparence du texte.
- Шрифт на текста: Khand
- Тегло на шрифта: получер
- Цвят на текста: #021827
- Размер на текста: 3vh
Настройки за текст при задържане на мишката
Променете тези настройки при задържане.
- Цвят на текста (задръжте курсора): rgba(255,255,255,0)
- Размер на текста (задръжте курсора): 0vh
Настройки на текста на връзката
Отидете на настройките на текста и променете цвета на текста на връзката.
- Цвят на текста на връзката: #ffffff
Настройки на текста на списъка по подразбиране
Също така променете настройките на дизайна на неподредените елементи от списъка.
- Шрифт на неподреден списък: Khand
- Стил на шрифта на неподреден списък: TT
- Списък Подравняване на текста: център
- Неподреден цвят на текста на списъка: rgba(255,255,255,0)
- Размер на текста на списъка: 0px
- Височина на реда на неподреден списък: 0em
- Позиция на стила на неподреден списък: отвътре
Настройки на списъка с курсора на мишката
И променете някои от тези стойности при задържане.
- Цвят на текста на неподреден списък: #ffffff
- Размер на текста на списъка: 2vh
- Височина на реда на неподредения списък: 2,1 em
Разстояние по подразбиране (работен плот)
Ensuite, allez dans les paramètres d'espacement et donnez un peu d'espace au module.
- Марж (вдясно): 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 клас
Ensuite, nous ajouterons une classe CSS dans l'onglet Подробно.
- CSS клас: dt-меню
Преходите
Et diminuez la durée de la transition dans l'onglet Подробно за създаване на бърз преход.
- Продължителност на прехода: 100ms
изследване
След като преминахме през всички стъпки, нека да разгледаме за последен път резултата на различни размери на екрана.
Пример №1
бюро
подвижен
Изтеглете DIVI сега!!!
Пример №2
Настолен компютър
подвижен
Изтеглете DIVI сега!!!
Заключение
Dans cet article, nous vous avons montré comment créer un menu sticky extensible à l'aide от Divi Mechanic Layout Pack. Nous avons traité deux exemples de conception différentes que vous pouvez modifier et utiliser sur n'importe quel type de site Web que vous créez !
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...