Doriți să creați o pictogramă de hamburger pentru mega-meniul dvs Divi ?
Divi folosește pictograma hamburger pentru a comuta meniul principal de pe mobil și unele stiluri de antet, cum ar fi „alunecare” și „ecran complet”.
Astăzi vă vom arăta cum să utilizați o pictogramă hamburger pentru a comuta un mega meniu cu un singur clic. Aceasta este o soluție excelentă pentru site-urile web cu multe opțiuni de meniu.
Pictograma hamburger evită dezordinea antetului. Mai mult, aspectul organizat pe 4 coloane a mega-meniului permite utilizatorilor să găsească ceea ce au nevoie rapid și eficient.
studiu
Înainte de a trece în acest tutorial, să aruncăm o privire asupra rezultatului pe care vrem să-l obținem.
Implementați pictograma Hamburger cu Divi
Transformă-ți meniul într-un mega meniu
Mai întâi trebuie creați un mega meniu sau schimbați meniul actual într-un mega meniu. Această parte este destul de simplă.
Din tabloul de bord wordpress, accesați Aspect> Meniuri.
Faceți clic pe Creați un meniu nou, dați un nume meniului dvs. apoi faceți clic pe Creați meniul.
Asigurați-vă că activați proprietatea meniului CSS Classes făcând clic pe filă Opțiuni de ecran în partea dreaptă sus a ecranului Meniuri și bifat Clasele CSS.
Acum puteți adăuga elementele de meniu în noul meniu creat.
Mai întâi, să adăugăm elementul de meniu care va acționa ca pictograma hamburger. Acest element de meniu va fi părintele tuturor celorlalte elemente de meniu.
Pentru a crea acest element de meniu, creați o legătură personalizată cu următorii parametri:
- URL: http//#
- Titlul navigației: <div class="hamburger”>
- Clase CSS: mega-meniu
Adresa URL este pur și simplu un hashtag (#), deoarece acest element de meniu nu va trimite către o anumită pagină. Vom folosi acest element de meniu pentru a ne implementa mega meniul cu un singur clic.
Clasa CSS „mega meniu” este cea care implementează funcționalitatea mega meniului. Această clasă CSS ar trebui să fie aplicată o singură dată elementului principal de meniu părinte și oricăruia dintre subarticole.
Acum este timpul să adăugați elementele de meniu care vor alcătui mega meniul dvs.
Acum aranjați/trageți cele patru elemente de meniu (fiecare cu trei sub-articole proprii) pentru a deveni sub-articole ale link-ului principal Mega Menu principal.
Când ați terminat de aranjat meniul, asigurați-vă că verificați Meniu principal sub Reglages du menu și faceți clic Salvați meniul
S-a adăugat jQuery pentru a afișa meniul la clic și nu la trecerea cursorului
Acum că este creat mega meniul, trebuie să adăugăm ceva jQuery, astfel încât mega meniul nostru să se afișeze atunci când faceți clic pe pictogramă în loc să treceți cu mouse-ul peste ea (care este implicit).
Pentru a face acest lucru, accesați Divi > Opțiuni teme > Integrare
Adăugați următorul script în secțiune „Adăugați o linie de cod la de blogul tău » :
<script>
/*** Open menu itmes with children on click not hover ***/
(function($) {
jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();
jQuery(this).parent().toggleClass('show-submenu');
});
});
jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});
})(jQuery);
</script>
Adăugarea CSS personalizate
Când vă aflați în opțiunile temei, accesați fila general
Derulați la „Personalizați CSS” și inserați CSS-ul de mai jos, apoi faceți clic 'Salvează modificările' :
/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }
/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }
/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
a{display:none;}
#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}
/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}
/*** show hamburger icon ***/
.hamburger:before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0.6em;
text-transform: none;
speak: none;
position: relative;
cursor: pointer;
top: 0;
left: 0;
vertical-align: -11px;
padding-right: 3px;
font-size: 32px; /*change size of icon here*/
content: "61"; /*change icon here*/
color: #333; /*change color of icon here*/
}
/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
content: "4d"; /*change x icon here*/
}
E gata !
rezultat
Să observăm rezultatul la sfârșitul acestor pași.
Descărcați DIVI acum!!!
Receptiv?
Mega meniurile funcționează numai pe ecrane cu dimensiuni mai mari de 980 de pixeli. Pentru o dimensiune a ecranului sub 980 px (tablete și smartphone-uri), meniul va comuta implicit în modul meniu mobil.
Descărcați DIVI acum!!!
Concluzie
Dacă vă plac mega meniurile și doriți să creați un design curat și minimalist pentru antetul dvs., atunci adăugarea unei pictograme hamburger pentru a vă afișa mega meniul este o soluție excelentă.
Acum utilizatorii dvs. pot vedea toate linkurile dvs. de navigare simultan cu un singur clic. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
