Trick # 324 | Dieser Beitrag beinhaltet 460 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Wenn Sie eine Divi-Website auf dem Handy betrachten und das Menü öffnen, es dann aber schliessen möchten, neigen Sie vielleicht dazu, auf den Bereich ausserhalb des Dropdowns zu klicken (oder ihn zu berühren) – in der Annahme, dass dies wie bei anderen Apps funktioniert. Aber nein, im Divi-Theme ist das von Haus aus nicht der Fall. Dafür benötigen Sie ein jQuery-Snippet, das genau das tut.
Zunächst gibt es einen Unterschied, ob Sie das Divi-Standard-Menü oder das Menü-Modul des Divi-Themes verwenden. Wir stellen Ihnen natürlich eine Lösung für beide Menüs vor.
Mobilmenü im Menü-Modul des Divi-Themes schliessen
Dafür benötigen Sie das folgende jQuery-Script. Fügen Sie es in den <head>-Bereich Ihrer Website ein – im Backend unter Divi/Theme-Optionen/Integration:
<script>
jQuery(document).ready(function(){
jQuery("body").on("click", function(){
if(jQuery(".mobile_nav").hasClass("opened")){
jQuery(".mobile_nav").removeClass('opened');
jQuery(".mobile_nav").addClass('closed')
jQuery("ul#mobile_menu1").css("display", "none");
jQuery('.et_pb_menu_0 .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before').css("content","a");
}
})
})
</script>Mit diesem Code haben Sie dem Menü-Modul die Funktion hinzugefügt. Das Menü sollte nun auf Mobilgeräten schliessen, wenn Sie ausserhalb des Dropdownbereichs darauf klicken oder es berühren.
Mobilmenü im Standard-Menü des Divi-Themes schliessen
Der Code für das Standard-Menü ist ein klein wenig anders. Sie können den untenstehenden Block kopieren und ihn in den <head>-Bereich Ihrer Website (unter Divi/Theme-Optionen/Integration) einfügen:
<script>
jQuery(document).ready(function(){
jQuery("body").on("click", function(){
if(jQuery(".mobile_nav").hasClass("opened")){
jQuery(".mobile_menu_bar").click();
}
})
})
</script>Damit ist die Funktion auch bei einem allfälligen Divi-Standardmenü aktiv.
Praktisch, finden wir.
Werbung
Werbung
