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.

[tschero]

Moin Zusammen,

ich hänge mich hier mal dran.

Es soll in einem Megamenü per Klick das Menü und zusätzlich auch eine Seite öffnen.
Also schon so etwas wie eine Weiterleitung im Seitentyp "Megamenü".

Wie würdet Ihr das mit Contao 5.3 lösen?

Grüße

[Tim]

Moin Zusammen,

ich hänge mich hier mal dran.

Es soll in einem Megamenü per Klick das Menü und zusätzlich auch eine Seite öffnen.
Also schon so etwas wie eine Weiterleitung im Seitentyp "Megamenü".

Wie würdet Ihr das mit Contao 5.3 lösen?

Grüße

Das eine schließt das andere aus Wenn das Menü per Klick öffnen soll, kann es keine Seite öffnen.

[tschero]

Alles klar,

Danke für die Info und Grüße

[tschero]

Noch mal zurück zur ursprünglichen Beschreibung.
Wo genau muss die DCA-Config datei bei Contao 5.3 hin?
im Rootverzeichnis:

config/dca/dcaconfig.php

funktioniert leider nicht.
Cache ist gelöscht.

Hier finde ich auch keine Lösung:
https://docs.contao.org/manual/de/anleitungen/dca/

Grüße

[tschero]

Also mit Contao 5.3.24 und EX 5.0.26 klappt das zur Zeit nicht.

1) Datei "dcaconfig.php" erstellt und in Verzeichnis "config/dca" kopiert.

config/dca/dcaconfig.php

2) Template heruntergeladen, umbenannt in "mod_pct_megamenu.html5" und in das Verzeichnis "templates" kopiert

Ich kann weder in einer Seite vom Typ "MegaMenu", noch in einem Modul vom Typ "MegaMenu" eine "Weiterleitungsseite" eintragen.

Das FE erzeugt einen Fehler mit folgendem Log:

[2025-02-06T12:47:56.607352+01:00] request.INFO: Matched route "tl_page.107". {"route":"tl_page.107","route_parameters":{"_contr oller":"Contao\\FrontendIndex::renderPage","_scope ":"frontend","_locale":"de","_format":"html","_can onical_route":"tl_page.107","parameters":"","pageM odel":{"Contao\\PageModel":[]},"_route":"tl_page.107","_route_object":{"Contao\ \CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","method":"GET"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924355+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_vertical_spacer.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_vertical_spacer.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924398+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_privacy_manager/assets/css/styles.min.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_privacy_manager/assets/css/styles.min.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924433+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_quickmenu.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_quickmenu.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924465+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/modules/mod_html_offcanvas_top.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/modules/mod_html_offcanvas_top.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924501+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_text_extented.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_text_extented.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924569+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_divider.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_divider.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.924598+01:00] php.WARNING: Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_iconbox.css|static {"exception":"[object] (ErrorException(code: 0): Warning: filemtime(): stat failed for /www/htdocs/w01d017a/c5_theme_eclipsex/files/cto_layout/css/customelements/ce_iconbox.css|static at /www/htdocs/w01d017a/c5_theme_eclipsex/system/modules/pct_seo_helper/PCT/SEO/ContaoCallbacks.php:276)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.936267+01:00] request.CRITICAL: Uncaught PHP Exception InvalidArgumentException: "replaceInsertTags is not set or not a callable" at Template.php line 187 {"exception":"[object] (InvalidArgumentException(code: 0): replaceInsertTags is not set or not a callable at /www/htdocs/w01d017a/c5_theme_eclipsex/vendor/contao/core-bundle/contao/library/Contao/Template.php:187)"} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}
[2025-02-06T12:47:56.980445+01:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://c5-theme-eclipsex.contao24.de/preview.php/home-107.html","request_method":"GET"}

Grüße

[Nils]

Hi Leute,
anbei eine kleine Modifikation für den MegaMenu-Builder, die die Auswahl einer Weiterleitungsseite für MegaMenü-Seitentypen ergänzt und einer Hover-Funktion. Bei Klick auf den Menü-Punkt wird zu der Weiterleitungsseite geleitet.

#1 Template im Anhang (mod_pct_megamenu_hover.html5) nach /templates kopieren

#2 Weiterleitungsseite im MegaMenü-Seitentyp ergänzen

dcaconfig.php (oder ähnlich)

$GLOBALS['TL_DCA']['tl_page']['palettes']['pct_megamenu'] = '{title_legend},title,alias,type;{redirect_legend},jumpTo;{protected_legend:hide},protected;{expert_legend:hide},cssClass,guests;{tabnav_legend:hide},tabindex,accesskey;{publish_legend},published,start,stop'; 

#3 MegaMenu Modul öffnen (oder neues erstellen) und Template auswählen

Viele Grüße,
Tim

Hallo Tim, kann es sein das unter Eclipse X5 und Contao 5.3 diese Anleitung so nicht mehr funktioniert?

Grüße
Nils

[Tim]

dcaconfig und Co existiert nicht mehr. Man nutze, spätestens jetzt, die Ordner-Struktur ab /contao/dca/...
https://contao-academy.de/blog/conta...einen-anpassen

[Nils]

Das habe ich gemacht und die DCA-Einträge unter /contao/dca/tl_page.php angelegt. Cache und Autoloader Cache geleert. Sobald ich das von Dir gepostete Template unter /templates mit dem Namen "mod_pct_megamenu.html5" abspeichere, kommt es aber zu einem Fehler "Class 'PageModel' not found". Daher war meine Vermutung, das dass von Dir verlinkte Template "mod_pct_megamenu_hover.html5" nicht mit Contao 5.X kompatibel ist.

[Tim]

Das habe ich gemacht und die DCA-Einträge unter /contao/dca/tl_page.php angelegt. Cache und Autoloader Cache geleert. Sobald ich das von Dir gepostete Template unter /templates mit dem Namen "mod_pct_megamenu.html5" abspeichere, kommt es aber zu einem Fehler "Class 'PageModel' not found". Daher war meine Vermutung, das dass von Dir verlinkte Template "mod_pct_megamenu_hover.html5" nicht mit Contao 5.X kompatibel ist.

Ich hab das Template angepasst und frisch hochgeladen. VG

[Nils]

Danke Tim! Musste nur noch die Leerzeile am Anfang deines neues Templates löschen und anschließend funktionierte es.

[Nils]

Nun habe ich ein ähnliches Problem wie einige hier bereits berichtet haben. Ich hab scheinbar einen kleinen Spalt zwischen dem Menüpunkt und dem Megamenü, so dass man mit der Maus nicht vom Menüpunkt zum Megamenü navigieren kann, ohne dass es sich schließt. Ich nutze das Digitization-Theme von PCT. Hat jemand einen Tipp wie ich diesen Spalt weg bekomme?

[tschero]

Bei mir ist das auch so.
Es funktioniert alles, bis auf das Erreichen des Inhalts im MegaMenü.
Tim
Vielen Dank dafür.

Der Code aus dem folgenden Post hilft beim bestehenden Problem nur bedingt:
https://forum.premium-contao-themes....9929#post29929

Die Menüs schließen damit nicht mehr.

Grüße