Chcete vytvořit posuvné a citlivé postranní menu v Divi?

Při vytváření a Webové stránky, často přemýšlíte, jaký typ záhlaví vytvořit. Nejpoužívanější na webu je vodorovná lišta nabídek nahoře, ale jsou tu i další možnosti, například posuvné menu. 

Posuvné nabídky vám nejčastěji pomáhají omezit prostor, který zabírá globální záhlaví. Můžete si tedy nechat zobrazit vysouvací nabídku Návštěvníci klikněte na ikonu hamburgeru v pravém horním rohu. 

Použití vysouvací nabídky vám proto pomůže přidat další interakci Webové stránky.

V tomto tutoriálu vám proto ukážeme, jak jej vytvořit pomocí Divi's Theme Builder.

Začněme!

přehled

Než se ponoříme do tohoto tutoriálu, podívejme se nejprve na výsledek, kterého se dočkáme.

Přejděte do Tvůrce motivů a vytvořte globální záhlaví

Přejděte do Tvůrce témat

Chcete-li začít, přejděte na Theme Builder z nabídky Divi na hlavním panelu WordPress a klikněte na „Přidat globální záhlaví“.

Vytvořte globální záhlaví

Pokračujte výběrem 'Vytvořit globální záhlaví'.

Vytvořte styl záhlaví

Nastavení sekce

Barva pozadí

Jakmile jste v editoru šablon, všimnete si sekce. Otevřete tuto sekci a zprůhledněte barvu pozadí.

  • Pozadí: rgba (255,255,255,0 XNUMX XNUMX)

vzdálenost

Přepněte na kartu Styl a odstraňte všechny spodní a horní okraje.

  • Vertex vnitřního okraje: 0px
  • Spodní vnitřní okraj: 0px

Zveřejnit

Dále změníme pozici sekce tím, že přejdeme na záložku Advanced a změníme nastavení pozice.

  • Poloha: Pevná
  • Umístění: nahoře uprostřed

Přidejte první řádek

Struktura kolony

Jakmile dokončíte nastavení sekce, přidejte nový řádek pomocí následující struktury sloupců:

dimenzování

Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a změňte nastavení velikosti následujícím způsobem:

  • Maximální šířka: 97%
  • Maximální šířka: 100%

vzdálenost

Změňte nastavení mezer.

  • Špičková vnitřní marže: 1 %
  • Spodní vnitřní okraj: 0px

hlavním prvkem

Dále přejděte na kartu Upřesnit a do hlavního prvku řádku přidejte dva řádky kódu CSS. To nám pomůže svisle zarovnat obsah sloupce v našem řádku.

display: flex;

align-items: center;

Přidejte Image modul do sloupce 1

Stáhnout logo

Je čas přidat moduly, počínaje modulem Image ve sloupci 1. Nahrajte své logo.

vytvořit posuvnou a citlivou postranní nabídku v Divi

Přidejte textový modul do sloupce 3

Přidejte 3 mezery do oblasti obsahu

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

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

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

Barva pozadí

Upravte barvu pozadí modulu.

  • Pozadí: rgba (0,0,0,0.04 XNUMX XNUMX)

Nastavení textu

Dále se přepněte na kartu Styl a odeberte výšku textového řádku. To nám pomůže mít plnou kontrolu nad rozsahy, které jsme přidali.

  • Výška řádku textu: 0 em

dimenzování

Chystáme se upravit parametry velikosti modulu.

  • Maximální šířka: 120 pixelů
  • Zarovnání textu: vpravo

vzdálenost

A parametry modulu doplníme přeměnou modulu na čtverec. K tomu použijeme vlastní hodnoty výplně v nastavení mezer.

  • Vertex vnitřního okraje: 40px
  • Spodní vnitřní okraj: 60px
  • Levý vnitřní okraj: 40px
  • Vnitřní okraj vpravo: 40px

Přidejte druhý řádek

Struktura kolony

Další řada! Tuto řadu použijeme k návrhu celého našeho posuvného menu. Použijte následující strukturu sloupců:

Barva pozadí

Bez přidávání modulů otevřete nastavení řádku a změňte barvu pozadí následovně:

  • Pozadí: #e7e0e2

Obrázek na pozadí

Používáme také vzorovaný obrázek na pozadí. Můžete použít vzor pozadí dle vlastního výběru.

  • Velikost obrázku na pozadí: skutečná velikost
  • Umístění obrázku na pozadí: střed
  • Opakovat obrázek na pozadí: Opakovat

dimenzování

Dále přejděte na kartu Styl a podle toho změňte nastavení velikosti:

  • Použít vlastní šířku okapu: Ano
  • Rozteč sloupců: 1
  • Maximální šířka: 20 % (počítač), 40 % (tablet), 60 % (telefon)
  • Výška: 100vh

vzdálenost

Změňte také nastavení mezer na různých velikostech obrazovky.

  • Vnitřní marže Summit: 10 vw (počítač), 30 vw (tablet), 40 vw (telefon)

Hranice

A doplňte parametry čáry přidáním levého okraje.

  • Šířka levého okraje: 10px
  • Barva levého okraje: #24394a
  • Styl levého okraje: Dvojitý

Přidejte do sloupce modul Text

Přidat obsah

Je čas přidat první položku nabídky Textový modul! Přidejte kopii do krabice obsah.

Přidání odkazu

Pokračujte přidáním příslušného odkazu k položce nabídky.

  • Adresa URL odkazu na modul: #

Barva pozadí

Poté změňte barvu pozadí.

  • Pozadí: rgba (216,210,212,0.35 XNUMX XNUMX)

Nastavení textu

Dále přejděte na kartu Styl'3 a změňte nastavení textu následovně:

  • Písmo textu: Domine
  • Text Soft Light: Tučný text
  • Barva textu Text: #000000
  • Text Velikost textu: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
  • Zarovnání textu: Na střed

vzdálenost

Dokončete nastavení modulu přidáním vlastních hodnot mezer na různých velikostech obrazovky.

  • Dolní okraj: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
  • Špičkový vnitřní okraj: 1vw
  • Spodní vnitřní okraj: 1vw

Klonovat textový modul (1 modul na položku nabídky)

Jakmile dokončíte první textový modul položky nabídky, můžete jej klonovat tolikrát, kolikrát je potřeba. Jen se ujistěte, že vaše moduly nepřesahují výšku okna.

Upravit obsah modulu Duplicate Text a odkazy

Upravit obsah a odkazy každého modulu Duplicate Text.

Přidat modul tlačítka do sloupce

Přidat kopii

Poslední modul, který v tomto řádku potřebujeme, je modul Button. Přidejte kopii dle vlastního výběru.

Přidání odkazu

Přidejte také odkaz.

  • Adresa URL odkazu tlačítka: #

zarovnání

Přejděte na kartu Styl a změňte zarovnání tlačítka.

  • Zarovnání tlačítek: na střed

Nastavení tlačítka

Pokračujte přizpůsobením modulu Button následovně:

  • Použít vlastní styly tlačítka: Ano
  • Velikost textu tlačítka: 0,7 vw (počítač), 1,5 vw (tablet), 2,5 vw (telefon)
  • Barva textu tlačítka: #000000
  • Tlačítko pozadí: rgba (0,0,0,0)
  • Barva ohraničení tlačítka: #24394a
  • Tlačítko Poloměr okraje: 0 pixelů
  • Mezera mezi písmeny tlačítka: 4px
  • Tlačítko písma: Otevřít Žádné
  • Tlačítko Soft Light: Tučný text
  • Tlačítko kopírovat styl: TT

vzdálenost

A dokončete nastavení modulu přidáním vlastních hodnot mezer na různých velikostech obrazovky.

  • Horní okraj: 5vw
  • Špičkový vnitřní okraj: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
  • Spodní vnitřní okraj: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
  • Levý vnitřní okraj: 1,8 vw (stolní počítač), 3 vw (tablet), 4 vw (telefon)
  • Pravý vnitřní okraj: 1,8 vw (stolní počítač), 3 vw (tablet), 4 vw (telefon)
vytvořit posuvnou a citlivou postranní nabídku v Divi

Přidejte posuvnou funkci

Přidejte CSS ID do textového modulu ikony nabídky

Nyní, když máme všechny prvky na svém místě, je čas vytvořit efekt responzivního posuvného menu! Nejprve otevřete modul Text (obsahující rozsahy) ve třetím sloupci prvního řádku a použijte vlastní CSS ID na kartě Upřesnit. Toto CSS ID použijeme k vytvoření funkce kliknutí v našem kódu.

  • CSS ID: slide-in-open

Přidejte třídu CSS na řádek #2

Poté otevřete druhý řádek, přejděte na kartu Upřesnit a přidejte vlastní třídu CSS. Po kliknutí se čára posune.

  • CSS třída: slide-in-menu-container
vytvořit posuvnou a citlivou postranní nabídku v Divi

Změňte umístění řádku #2

Tento řádek také přemístíme. Všimněte si, jak vodorovné odsazení odpovídá šířce čáry na různých velikostech obrazovky v nastavení velikosti.

  • Pozice: Absolutní
  • Umístění: Vpravo nahoře
  • Horizontální posun: -20 % (počítač), -40 % (tablet), -60 % (telefon)
vytvořit posuvnou a citlivou postranní nabídku v Divi

Změňte neprůhlednost řádku 2

A nastavte krytí na 0 ve výchozím stavu.

opacity: 0;

Přidejte modul Kód do druhého sloupce prvního řádku

Vložte kód CSS

Abychom vytvořili efekt funkce kliknutí a stylovali osnovy naší ikony hamburgeru, budeme potřebovat nějaký CSS kód. Přidejte modul kódu do druhého sloupce prvního řádku a umístěte následující řádky kódu CSS mezi značky stylu, jak můžete vidět na tiskové obrazovce níže:

#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;

}

Vložte kód JQuery

Budeme také muset přidat nějaký JQuery pro funkci kliknutí. Ujisti se umístěte kód mezi značky skriptu , jak můžete vidět na tiskové obrazovce níže:

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

Uložte změny v tvůrci motivů a zobrazte výsledek na webu

Jakmile dokončíte všechny prvky vaší globální hlavičky, stačí všechny změny uložit a výsledek zobrazit na vašem webu!

přehled

Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na výsledek.

Proč investovat do čističky vzduchu?

Na závěr jsme vám v tomto článku ukázali, jak použít Divi's theme builder k vytvoření responzivního posuvného menu. Za tímto účelem jsme zkombinovali to nejlepší z vestavěných prvků a možností Divi s vlastním kódem funkce kliknutí. Umožňuje vám tedy soustředit se na návrh výsuvné nabídky a nechat kód, aby se postaral o funkční část globální hlavičky! 

Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.