Chtěli byste vytvořit posuvné a tlačné menu v DIVI která neskrývá prvky vaší stránky?
Velké záhlaví se spoustou navigačních odkazů vám může zabírat cenné místo Webové stránky. To je důvod, proč jsou kontextové a vysouvací nabídky stále populárnější. Nabídky, které se posouvají k zobrazení, většinou zůstávají nad ikonou obsah stránky, které skryjí určité prvky.
Posuvné push menu však funguje trochu jinak. Efekt posuvného zatlačení je jedinečný v tom, že nabídka se zasune z horní části stránky a současně stiskne tlačítko obsah od stránky dolů, takže nic není skryté.
V tomto tutoriálu vám ukážeme, jak vytvořit posuvné push menu od začátku pomocí Divi Theme Builder.
Pojďme!
přehled
Zde je rychlý pohled na posuvnou nabídku push, kterou vytvoříme v tomto tutoriálu.
Sestavte posuvné push menu pomocí Divi theme builderu
Vytvoření nového globálního menu
Pro vytvoření nabídky vytvoříme novou globální hlavičku v Divi Theme Builderu.
Přejděte na Divi > Theme Builder.
Čtěte také: Jak vytvořit globální hlavičku s přihlašovacím formulářem v DIVI
Poté klikněte na oblast „Přidat globální záhlaví“ v šablona webových stránek ve výchozím stavu. Z rozevíracího seznamu vyberte "Sestavit globální záhlaví".
Vytvoření push menu
Prvním prvkem, který společně vytvoříme, je sekce nabídky push. Tato část bude obsahovat položky nabídky, které se budou přepínat nahoru a dolů, když kliknete na tlačítko přepínání nabídky.
Nastavení sekce
Otevřete výchozí nastavení sekce a aktualizujte nastavení následovně:
Pozadí
- Pozadí: #1a1e36
Vnitřní okraj
- Vnitřní okraj: 0px nahoře, 0px dole
CSS třídy
Na kartě Upřesnit přidejte následující třídu CSS, která bude později použita v našem kódu JS.
- CSS třída: et-push-menu
Přidejte řádek 1
Jakmile jsou parametry sekce definovány, vytvořte v sekci řádek s jedním sloupcem.
Parametry řádku 1
Dále aktualizujte parametry linky následovně:
dimenzování
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Maximální šířka: 100%
- Maximální šířka: 1 pixelů
vzdálenost
- Okraj: Horní 3vh, Dolní 3vh
Hranice
- Šířka spodního okraje: 1px
- Barva spodního okraje: rgba (255,255,255,0.2)
Vlastní CSS
Na kartě Upřesnit přidejte do hlavního prvku následující vlastní CSS:
display:flex;
justify-content:center;
align-items:center;
Parametry sloupce
Jakmile jsou nastavení řádků definována, otevřete nastavení sloupců a přidejte vlastní fragment CSS do hlavního prvku:
display:flex;
align-items:center;
justify-content:center;Tím se vycentruje obsah sloupu jak vertikálně, tak horizontálně.
Přidání tlačítka
Nyní jsme připraveni začít přidávat položky naší nabídky pomocí modulu Tlačítko. Začněte přidáním nového tlačítka do sloupce.
Podívejte se také na našeho průvodce na: Jak vytvořit vertikální navigační menu v DIVI
Nastavení tlačítek
Dále aktualizujte nastavení tlačítka následovně:
Obsah
- Text tlačítka: Design
- Adresa URL odkazu tlačítka: # (nahraďte později vlastní adresou URL)
Styl
- Použít vlastní styly pro tlačítko: ANO
- Barva textu tlačítka: #ffffff
- Šířka okraje tlačítka: 0 pixelů
- Písmo tlačítka: Montserrat
- Tlačítko Soft Light: Těžké
- Tlačítko ikony: ANO
- Tlačítko ikony: [Vaše volba]
- Zobrazit pouze ikonu na tlačítku přechodu: NE
- Tlačítko Umístění ikony: Vlevo
Duplicitní sloupec
Nyní, abychom vytvořili další tlačítka pro nabídku, můžeme duplikovat sloupec. Pro tento návrh zduplikujme sloupec 4krát, abychom získali celkem 5 položek/tlačítek nabídky v řadě po pěti sloupcích.
Přidejte řádek 2
Po dokončení prvního řádku jsme připraveni přidat další řadu tlačítek, která lze použít pro jinou sadu položek nabídky.
Čtěte také: Jak přidat kontaktní formulář do globální hlavičky v DIVI
Chcete-li vytvořit další řádek, duplikujte řádek 1.
Smazat všechny sloupce kromě jednoho
Poté odstraňte všechny sloupce v duplicitním řádku kromě jednoho.
Parametry řádku 2
Aktualizujte parametry řádku 2 následovně:
- Maximální šířka: 1 pixelů
- Šířka spodního okraje: 0px
Parametry sloupce
Poté přidejte ohraničení do sloupce takto:
- Šířka pravého okraje: 1px
- Barva pravého okraje: rgba (255,255,255,0.2)
Aktualizovat nastavení tlačítka
Jakmile má sloupec pravý okraj, otevřete nastavení tlačítka a aktualizujte následující:
- Velikost textu tlačítka: 14px
- Tlačítko Soft Light: tučný text
- Rozteč písmen tlačítka: 2 px
- Styl kopírování tlačítka: TT
- Tlačítko ikony: NE
Duplicitní sloupec
Stejně jako dříve, zduplikujme sloupec, abychom vytvořili další tlačítka a sloupce. Pro tento návrh zduplikujme sloupec 3krát, abychom získali celkem 4 tlačítka v řadě po 4 sloupcích.
Odebrat ohraničení z posledního sloupce
Protože nechceme, aby měl poslední sloupec pravý okraj, otevřete nastavení pro sloupec 4 a aktualizujte šířku okraje:
- Šířka pravého okraje: 0px
Vytvoření hlavního záhlaví
Dále vytvoříme hlavní sekci záhlaví. Tato lišta záhlaví zůstane vždy viditelná a bude obsahovat logo našeho webu, výzvu k akci a tlačítko pro přepínání nabídky.
Přidejte sekci
Před přidáním nové sekce je dobré aktualizovat popisek předchozí sekce na "Sekce nabídky Push".
Viz také: Jak vytvořit globální záhlaví pomocí Theme Builder v DIVI
Poté vytvořte novou sekci pod první částí.
Nastavení sekce
Nyní aktualizujte štítek nové sekce na „Záhlaví“. Poté otevřete nastavení sekce a aktualizujte následující:
vzdálenost
- Vnitřní okraj: 0px nahoře, 0px dole
Přidejte řádek
Jakmile je výplň sekce nastavena, přidejte do sekce řádek se třemi sloupci.
Nastavení linky
Otevřete parametr řádku a aktualizujte následující:
dimenzování
- Šířka žlabu: 1
- Šířka: 90%
- Výška: 70px
vzdálenost
- Vnitřní okraj: 0px nahoře, 0px dole
Vlastní CSS
Na kartě Upřesnit přidejte do hlavního prvku následující vlastní CSS:
display:flex;
align-items:center;Tím se sloupce v řádku svisle vycentrují.
Přidání tlačítka
K vytvoření hlavní CTA v sekci záhlaví můžeme použít tlačítko druhého řádku v horní sekci. Zkopírujte tlačítko ze sloupce 1 řádku 2 horní části a vložte jej do sloupce 1 řádku části záhlaví.
Aktualizovat nastavení tlačítka
Poté otevřete nastavení duplicitního tlačítka a aktualizujte následující:
- Text tlačítka: Registrace
- Velikost textu tlačítka: 14px
- Barva textu tlačítka: #1a1e36
- Tlačítko ikony: ANO
- Tlačítko ikony: Šipka vpravo (viz snímek obrazovky)
Přidejte logo
Do prostředního sloupce přidejte modul Image. Takto dynamicky přidáme logo webu.
Najeďte myší na oblast obrázku a klikněte na ikonu „Použít dynamický obsah“. Z rozbalovací nabídky vyberte „Logo webu“.
Nastavení obrazu
Poté na kartě Styl aktualizujte následující:
- Zarovnání obrázku: na střed
- Maximální výška: 55 pixelů
Přidejte vlastní ikonu hamburgeru
Mohli bychom použít běžnou ikonu prostřednictvím modulu rozvržení jako přepínač nabídky, ale pro tento tutoriál jsem si myslel, že bychom přidali vlastní přepínač nabídky se skvělým přechodovým efektem.
Přidat textový modul
K vytvoření ikony menu použijeme textový modul s vlastním HTML kódem, který bude stylizován pomocí externího CSS.
Pokračujte a přidejte textový modul do sloupce 3.
Přidejte HTML kód do textového modulu
Poté přidejte do obsahu textového modulu následující HTML kód:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Pozadí
Dejte textovému modulu barvu pozadí:
- Barva pozadí: #1a1e36
Formátování textu
Dále aktualizujte nastavení stylu následovně:
- Šířka: 70 pixelů
- Zarovnání modulu: vpravo
- Výška: 70px
- Vnitřní okraj: 20 pixelů nahoře, 20 pixelů dole, 16 pixelů vlevo, 16 pixelů vpravo
CSS třídy
Na kartě Upřesnit přidejte následující třídu CSS:
- Třída CSS: et-push-menu-toggle
Přidejte kód
Abychom přinesli funkcionalitu, kterou potřebujeme k tomu, aby tato posuvná nabídka fungovala, přidáme do modulu Kód naše vlastní CSS a jQuery.
Pokračujte a přidejte modul Kód do sloupce 3 pod modulem Text.
Poté vložte následující kód (Poznámka: zabalte tento kód do značek styl aby to fungovalo správně):
.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;
}
Poté zkopírujte a vložte tento kód přímo níže (důležité: zabalte tento kód do značek skriptu, aby správně fungoval):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Aktualizujte text tlačítka a odkazy
Nakonec můžeme všechna tlačítka aktualizovat o potřebný text tlačítka a adresy URL odkazů.
Hotovo !
Uložte nastavení
Nezapomeňte si uložit rozložení a nastavení Theme Builder.
Konečný výsledek
Chcete-li vidět konečný výsledek, podívejte se na svou stránku webové stránky.
Make Sticky
Pokud chcete „lepící“ verzi nabídky, stačí přidat následující fragment kódu CSS do modulu kódu (mezi značky stylu):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Tady je výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Doufáme, že se vám toto posuvné push menu bude líbit. Efekt je jedinečný a otevírá dveře kreativnějším hlavičkám. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
