MegaMenu Builder mit Hover und Weiterleitung bei Klick

[Tim]

Da wird eine Lücke sein.

[TKG]

Ich habe das ganze mit diesem Code gelöst:

<div class="<?= $this->class ?> block megamenu_<?= $this->id; ?>"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> itemscope itemtype="http://schema.org/SiteNavigationElement">

<?php if ($this->headline): ?>
<<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
<?php endif; ?>

<?php foreach($this->items as $item): ?>
<div class="<?= $item['class']; ?>" data-page="<?= $item['id']; ?>">
<?php foreach($item['articles'] as $article): ?>
<?= \Contao\System::getContainer()->get('contao.insert_tag.parser')->replace('{{insert_article::'.$article->id.'}}'); ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>

<?php if( $this->items ): ?>
<script>
jQuery(document).ready(function()
{
var element = jQuery('.megamenu_<?= $this->id; ?>');
var closeTimeout; // Timeout variable to delay closing

// sticky
var top = jQuery('#top-wrapper').height();
if( jQuery('body').hasClass('fixed-header') )
{
top = jQuery('#stickyheader').height();
}
element.css('top', top);

var toggler = null;

var items = jQuery(".megamenu_<?= $this->id; ?> [data-page!=''][data-page]");
jQuery.each(items, function(i, elem)
{
elem = jQuery(elem);

// .page_PAGE-ID
// .megamenu_page_PAGE-ID
var togglers = ['.mainmenu a.page_' + elem.data('page'), '.megamenu_page_' + elem.data('page')];

// Menü öffnen bei Mouseenter
jQuery(togglers.join(',')).on('mouseenter', function()
{
clearTimeout(closeTimeout); // Timeout entfernen, falls aktiv
// Menü öffnen
items.not(togglers.join(',')).removeClass('active' );
jQuery(this).addClass('active');
elem.addClass('active');
element.addClass('active');

// Toggler aktualisieren
toggler = this;

// Event auslösen
jQuery(document).trigger('MegaMenu.change', {
'selector': '.megamenu_<?= $this->id; ?>',
'id': '<?= $this->id; ?>',
'active': element.hasClass('active'),
'target': element,
'item': elem,
'toggler': this
});
});

// Menü schließen, wenn die Maus den Menübereich und das Megamenü verlässt
jQuery(togglers.join(',')).add(element).on('mousel eave', function()
{
closeTimeout = setTimeout(function() {
// Menü schließen, wenn die Maus vollständig den Menübereich verlässt
jQuery(togglers.join(',')).removeClass('active');
elem.removeClass('active');
element.removeClass('active');
}, 300); // Verzögerung hinzufügen, um versehentliches Schließen zu verhindern
});

// Entfernen des Timers, wenn die Maus wieder in den Menübereich fährt
jQuery(togglers.join(',')).add(element).on('mousee nter', function()
{
clearTimeout(closeTimeout); // Timeout verhindern, wenn die Maus zurückkehrt
});
});

//--- toggle menu on scroll
jQuery(document).scroll(function()
{
jQuery(document).trigger('MegaMenu.scroll', {
'selector': '.megamenu_<?= $this->id; ?>',
'id': '<?= $this->id; ?>',
'active': element.hasClass('active'),
'target': element,
'items': items,
'toggler': toggler
});
});
});
</script>
<?php endif; ?>

</div>

[Tim]

Ein Timer ist auch eine gute Idee. Danke Dir.

Man kann im mouse-Event auch die Austritts-Richtung erfragen. Das geht auch gut.