Möchten Sie ein Hamburger-Symbol für Ihr Mega-Menü erstellen? divi ?
Divi verwendet das Hamburger-Symbol, um Ihr Hauptmenü auf Mobilgeräten umzuschalten, und einige Kopfzeilenstile wie „Einschieben“ und „Vollbild“.
Heute zeigen wir Ihnen, wie Sie mit einem Hamburger-Symbol ein Mega-Menü mit einem Klick umschalten können. Dies ist eine großartige Lösung für Websites mit vielen Menüoptionen.
Das Hamburger-Symbol vermeidet Kopfzeilen-Unordnung. Darüber hinaus ermöglicht das übersichtliche 4-Spalten-Layout des Mega-Menüs den Benutzern, schnell und effizient zu finden, was sie brauchen.
Übersicht
Bevor wir zu diesem Tutorial springen, werfen wir einen Blick auf das Ergebnis, das wir erreichen möchten.
Implementieren Sie das Hamburger-Symbol mit Divi
Verwandeln Sie Ihr Menü in ein Mega-Menü
Sie müssen zuerst Erstellen Sie ein Mega-Menü oder ändern Sie Ihr aktuelles Menü in ein Mega-Menü. Dieser Teil ist ganz einfach.
Gehen Sie im WordPress-Dashboard zu Aussehen> Menüs.
Klicken Sie auf Erstellen Sie ein neues Menü, geben Sie Ihrem Menü einen Namen und klicken Sie dann auf Erstellen Sie das Menü.
Stellen Sie sicher, dass Sie die Menüeigenschaft CSS-Klassen aktivieren, indem Sie auf die Registerkarte klicken Bildschirmoptionen oben rechts auf dem Bildschirm Menüs und Ticken CSS-Klassen.
Sie können nun Ihre Menüpunkte zu dem neu erstellten Menü hinzufügen.
Lassen Sie uns zuerst den Menüpunkt hinzufügen, der als Hamburger-Symbol fungiert. Dieser Menüpunkt wird allen anderen Menüpunkten übergeordnet.
Um diesen Menüpunkt zu erstellen, erstellen Sie einen benutzerdefinierten Link mit den folgenden Parametern:
- URL: http//#
- Navigationstitel: <div class="hamburger">
- CSS-Klassen: Mega-Menü
Die URL ist einfach ein Hashtag (#), da dieser Menüpunkt nicht auf eine bestimmte Seite verweist. Wir werden diesen Menüpunkt verwenden, um unser Mega-Menü mit einem Klick bereitzustellen.
Die CSS-Klasse „Megamenü“ stellt die Megamenüfunktionalität bereit. Diese CSS-Klasse sollte nur einmal auf das übergeordnete Hauptmenüelement und auf alle Unterelemente angewendet werden.
Jetzt ist es an der Zeit, die Menüpunkte hinzuzufügen, aus denen Ihr Mega-Menü besteht.
Ordnen/ziehen Sie nun die vier Menüpunkte (jeweils mit drei eigenen Unterpunkten) so an, dass sie Unterpunkte des übergeordneten Haupt-Megamenü-Links werden.
Wenn Sie mit der Zusammenstellung des Menüs fertig sind, überprüfen Sie es unbedingt Hauptmenü sous Gerichte des Menüs und klicken Sie auf Speichern Menü
jQuery hinzugefügt, um das Menü beim Klicken und nicht beim Hover anzuzeigen
Nachdem Ihr Mega-Menü erstellt wurde, müssen wir etwas jQuery hinzufügen, damit unser Mega-Menü angezeigt wird, wenn Sie auf das Symbol klicken, anstatt mit der Maus darüber zu fahren (was die Standardeinstellung ist).
Gehen Sie dazu zu Divi > Theme-Optionen > Integration
Fügen Sie das folgende Skript im Abschnitt hinzu „Fügen Sie eine Codezeile zum <head> von hinzu Ihr Blog » :
<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>
Hinzufügen von benutzerdefiniertem CSS
Wenn Sie sich in den Themenoptionen befinden, gehen Sie zur Registerkarte General
Scrollen Sie zu 'CSS anpassen' und fügen Sie das CSS unten ein und klicken Sie dann auf 'Änderungen speichern' :
/*** 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*/
}
Es ist vollbracht !
Ergebnis
Betrachten wir das Ergebnis am Ende dieser Schritte.
Laden Sie DIVI jetzt herunter!!!
Ansprechbar?
Mega-Menüs funktionieren nur bei Bildschirmgrößen über 980 Pixel. Bei einer Bildschirmgröße unter 980 Pixel (Tablets und Smartphones) wechselt das Menü standardmäßig in den mobilen Menümodus.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Wenn Sie Mega-Menüs mögen und ein klares und minimalistisches Design für Ihre Kopfzeile erstellen möchten, ist das Hinzufügen eines Hamburger-Symbols zur Anzeige Ihres Mega-Menüs eine großartige Lösung.
Jetzt können Ihre Benutzer alle Ihre Navigationslinks auf einmal mit einem einzigen Klick sehen. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
