Vill du skapa en hamburgerikon för din megameny divi ?
Divi använder hamburgerikonen för att växla mellan din huvudmeny på mobilen och vissa rubrikstilar som "skjut in" och "helskärm".
Idag ska vi visa dig hur du använder en hamburgerikon för att växla en megameny med ett klick. Detta är en bra lösning för webbplatser med många menyalternativ.
Hamburgerikonen undviker rubriker. Dessutom tillåter den organiserade 4-kolumnlayouten på megamenyn användare att hitta det de behöver snabbt och effektivt.
undersökningen
Innan vi hoppar in i den här handledningen, låt oss ta en titt på resultatet vi vill uppnå.
Implementera Hamburger-ikonen med Divi
Konvertera din meny till en megameny
Du måste först skapa en megameny eller ändra din nuvarande meny till en megameny. Denna del är ganska enkel.
Från wordpress instrumentpanel, gå till Utseende> Menyer.
Klicka på Skapa en ny meny, ge din meny ett namn och klicka sedan på Skapa menyn.
Se till att aktivera menyegenskapen CSS Classes genom att klicka på fliken Skärmalternativ uppe till höger på skärmen Menyer och tickande CSS klasser.
Du kan nu lägga till dina menyalternativ till den nya menyn du skapade.
Låt oss först lägga till menyalternativet som kommer att fungera som hamburgerikonen. Detta menyalternativ kommer att vara överordnat till alla andra menyalternativ.
För att skapa detta menyalternativ, skapa en anpassad länk med följande parametrar:
- URL: http//#
- Navigeringstitel: <div class="hamburger">
- CSS-klasser: megameny
URL:en är helt enkelt en hashtag (#) eftersom det här menyalternativet inte länkar till en viss sida. Vi kommer att använda det här menyalternativet för att distribuera vår megameny med ett klick.
CSS-klassen "mega meny" är det som distribuerar megamenyfunktionaliteten. Denna CSS-klass ska endast tillämpas en gång på huvudmenyalternativet och på någon av underposterna.
Nu är det dags att lägga till menyalternativen som kommer att utgöra din megameny.
Ordna/dra nu de fyra menyalternativen (var och en med tre egna underpunkter) för att bli underposter till den överordnade Megameny-länken.
När du är klar med att ordna menyn, se till att kontrollera Huvudmeny sous Réglages du meny och klicka Spara menyn
Lade till jQuery för att visa menyn vid klick och inte vid hovring
Nu när din megameny har skapats måste vi lägga till lite jQuery så att vår megameny visas när du klickar på ikonen istället för att hålla muspekaren över den (vilket är standard).
För att göra detta, gå till Divi > Temaalternativ > Integration
Lägg till följande skript i avsnittet "Lägg till kodrad till <head> av din blogg » :
<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>
Lägga till anpassad CSS
När du är i temaalternativen, gå till fliken Général
Bläddra till "Anpassa CSS" och klistra in CSS nedan och klicka sedan 'Spara ändringar' :
/*** 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*/
}
Det är klart !
Resultat
Låt oss observera resultatet i slutet av dessa steg.
Ladda ner DIVI nu!!!
Mottaglig?
Megamenyer fungerar bara på skärmstorlekar större än 980 pixlar. För en skärmstorlek under 980px (surfplattor och smartphones) växlar menyn till mobilt menyläge som standard.
Ladda ner DIVI nu!!!
Slutsats
Om du gillar megamenyer och vill skapa en ren och minimalistisk design för din header, så är det en bra lösning att lägga till en hamburgerikon för att visa din megameny.
Nu kan dina användare se alla dina navigeringslänkar på en gång med ett enda klick. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
