Trick # 306 | Dieser Beitrag beinhaltet 406 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Die Submenu-Links im Divi-Theme werden normalerweise angezeigt, wenn man die Maus über den höher eingeordneten Menülink bewegt – beim hovern also. Doch das ganze funktioniert auch per Mausklick. Wir zeigen Ihnen wie.
Für den Trick benötigen Sie ein funktionierendes Menü-Modul, ein jQuery-Script und ein wenig CSS-Code. Beginnen wir mit dem Script – Sie finden es nachfolgend. Kopieren Sie es und fügen Sie den Textblock dem <head>-Bereich der Website hinzu. Im Backend unter Divi/Theme-Optionen/Integration:
<script>
(function($) {
function setup_collapsible_submenus() {
var $menu = $('nav > ul.nav'),
top_level_link = '.menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ($(this).is(top_level_link)) {
$(this).attr('href', '#');
$(this).next('.sub-menu').addClass('hide');
}
if ($(this).siblings('.sub-menu').length) {
$(this).on('click', function(event) {
event.stopPropagation();
$(this).next('.sub-menu').toggleClass('visible');
return false;
});
}
$(window).click(function() {
//Hide the menus if visible
$('.sub-menu').removeClass('visible');
});
});
}
$(window).on('load', function () {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>Nun folgt der CSS-Code. Auch diesen kopieren Sie. Fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:
.nav li.et-touch-hover>ul,
.nav li:hover>ul {
opacity: 0;
visibility: hidden;
}
ul.sub-menu.hide.visible {
opacity: 1;
visibility: visible;
}Die Submenüs im Divi-Theme werden nun nicht mehr beim hovern geöffnet, sondern per Mausklick.
Werbung
Werbung
