Kako dodati meni za hamburgerje preklop na glavo z Divi

Rifat Divi Tutorials Mar 3, 2022

Divi je zelo prilagodljiva tema, saj je v vsakem razdelku veliko možnosti za implementacijo novih edinstvenih dizajnov. Spletno mesto ima veliko razdelkov, kot so glava, noga, telo itd. Med njimi je razdelek z glavo eden najpomembnejših, saj vsebuje povezave do pomembnih strani na vašem spletnem mestu, ki jih bodo potencialne stranke pogosto želele obiskati. Prav tako prinaša ključne točke o vašem spletnem mestu, ki spodbujajo vaše stranke k nadaljnjemu raziskovanju. V današnji vadnici boste videli, kako lahko dodate preklop menija za hamburgerje v zgornji meni glave navigacije. Na splošno vemo, da se meni za hamburgerje uporablja za majhne zaslone. Toda danes ga bomo videli v namiznem načinu. Ne izgubljajmo več časa in začnimo z našo današnjo vadnico.

Sneak Peek

Danes bomo ustvarili ta dizajn, kjer bo navigacijski meni skrit za menijem hamburgerjev.

Prvi del: Globalna predloga glave.

Začeli bomo tako, da gremo v ustvarjalnik tem Divi in ​​kliknemo »Dodaj globalno glavo«. Pojavi se meni in izberite "Zgradi globalno glavo".

Izberite "Zgradi iz nič" in pojdite naprej.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Drugi del: Globalno oblikovanje glave

Nastavitve: Glavni razdelek

Barva ozadja

Zdaj bomo začeli oblikovati glavo. Najprej spremenite barvo ozadja začetnega razdelka.

  • Barva ozadja: #f6f9fb

Razmik

Nato se pomaknite na nastavitve razmika pod zavihkom načrtovanje in nastavite zgornje in spodnje oblazinjenje nič.

  • Zgornje oblazinjenje: 0px
  • Spodnje odmikanje: 0px

Dodajanje: Nova vrstica

Pojdimo naprej, tako da dodamo novo vrstico našemu dizajnu. Izberite omembo vrstice na sliki.

Dimenzioniranje

Preden dodate dodatne module, spremenite velikost vrstice.

  • Največja širina: 1280 slikovnih pik

Razmik

Prilagodite zgornje in spodnje oblazinjenje.

  • Zgornje oblazinjenje: 5px
  • Spodnji odmik: 5px

Dodajanje: menijski modul v stolpec

Izbira menija

Zdaj dodajte menijski modul v stolpec nove vrstice in izberite meni.

Dodaj logotip

Zdaj dodajte logotip modulu.

Odstrani barvo ozadja

Nato odstranite privzeto barvo ozadja module’s.

Nastavitve: Besedilo menija

Na zavihku načrtovanja tega modula in ustrezno spremenite nastavitve besedila menija:

  • Pisava menija: Poppins
  • Teža pisave menija: polkrepko
  • Barva besedila menija: #003e51
  • Velikost besedila menija: 16px
  • Poravnava besedila: desno

Nastavitve: spustni meni

Nato spremenite nastavitve spustnega menija.

  • Barva vrstice spustnega menija: #7159c8

Nastavitve: ikone

Spremenite tudi nastavitve ikon.

  • Barva ikone nakupovalnega vozička: #670fff
  • Barva ikone za iskanje: #670fff
  • Barva ikone menija za hamburgerje: #670fff

Dimenzioniranje

V nastavitvah velikosti spremenite največjo širino za logotip.

  • Največja širina logotipa: 60 slikovnih pik

Razmik

Naredite nekaj prilagoditev razmika.

  • Spodnji rob: 0px

Obrnite razdelek na lepljiv

Naš manu je zdaj položen. Torej je čas, da razdelek postane lepljiv. V nastavitvah razdelka pojdite na zavihek napredno in naredite spodaj omenjeno nastavitev.

  • Lepljiv položaj: drži se na vrhu
  • Odmik od okoliških lepljivih elementov: Da
  • Privzeti in lepljivi slogi prehoda: Da

Barva ozadja: Sticky Mode

Zdaj spremenite barvo ozadja celotnega razdelka v lepljivem stanju.

  • Barva ozadja: #ffffff

Senca: Sticky Mode

Uporabite senco škatle tudi na razdelku z zavihka za načrtovanje.

  • Privzeta barva sence: rgba(0,0,0,0)
  • Barva lepljive sence: rgba(0,0,0,0,04)

Tretji del: Preklop ikone hamburgerja

ID CSS meniskega modula

We’ se bomo v naslednjem delu vadnice osredotočili na ustvarjanje ikone za preklop ikone hamburgerja na namizju. Najprej odprite nastavitve Menu Module’s, pojdite na zavihek Napredno in dodelite ID CSS.

  • CSS ID: divi-meni

Dodajte kodni modul

Zdaj dodajte kodni modul pod menijski modul.

koda CSS

Zdaj dodajte oznako Style in vstavite kodo v oznako.

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Koda JQuery

Nato dodajte oznako Script in vstavite kodo v oznako.

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

toggleIcon.insertAfter(desktopMenu);

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});
 
});
});

Zdaj shranite napredek in se vrnite na možnost divi builder s pritiskom na zgornji desni križec.

Končni rezultat

Ker smo vse korake uspešno opravili, tako izgleda naša današnja zasnova.

Zadnje misli

Z Divijem ste lahko ustvarjalni na veliko načinov. Omogoča vam popolno svobodo pri oblikovanju vaše spletne strani tako, kot jo potrebujete. Danes ste videli dodajanje zgornjega navigacijskega menija znotraj menija hamburgerjev na namiznem pogledu. Upam, da vam bo to pomagalo ustvariti bolj ustvarjalne naslove, in če se vam bo ta vadnica zdela v pomoč, bo delitev s prijatelji NEVERJETNA!