Megamenu

Mega-Menu

  • Keine Contao-Extension erforderlich!
  • Kein Javascript!
  • Megamenu-Seiten bekommen die CSS-Klasse 'megamenu'.
  • Submenu-Seiten haben ein normales Dropdown.
  • Seiten ohne Mega- und Submenu sind normale Links.
  • Der Inhalt des Megamenus kommt aus dem Artikel, der den gleichen Namen, wie die Megamenu-Seite hat.
  • Navigation-Twig-Template: /templates/nav_megamenu.html.twig
  • Der Rest ist einfach nur CSS.

Template

Ausgehend vom nav_default.html5 habe ich ein Twig-Template für die Mega-Navigation erstellt und als templates/nav_megamenu.html.twig gespeichert. Nur an dieser Position war es im Navigations-Modul verfügbar.

<!--templates/nav_megamenu.html.twig-->
{% block content %}
	<ul class="{{ level }}">
		{% for item in items %}
			{% if item['isActive'] or item.subitems %}
				<li class="{{ item.class }}"><strong class="{{ item.class }}"{% if item.subitems %} aria-haspopup="true"{% endif %}>{{ item.link }}</strong>{{ item.subitems|raw }}</li>
				{% if 'megamenu' in item.class %}
					<div class="mega-article">
						{{ '{{fragment::{{insert_article::%s}}}}'|format(item.title|lower) }}
					</div>
				{% endif %}
			{% else %}
				<li{% if item.class %} class="{{ item.class }}"{% endif %}><a href="{{ item.href }}" title="{% if item.pageTitle %} {{ item.pageTitle }} {% else %} {{ item.title }} {% endif %}"{% if not '' == item.accesskey %} accesskey="{{ item.accesskey }} {% endif %} {{ item.target }} {{ item.rel }} {% if item.subitems is not empty %} aria-haspopup="true" {% endif %}>{{ item.link }}</a>{{ item.subitems }}</li>
			{% endif %}
		{% endfor %}
	</ul>
{% endblock %}

Der Inhalt des Megamenus kommt aus einem Artikel, der im Template mit dem Insert-Tag: {{insert_article::*}} abgerufen wird.
Diesem Insert-Tag wird dynamisch der Alias des Mega-Artikels übergeben, der von der Twig Variablen {{ item.title|lower }} geliefert wird.
Da aber die Syntax bei den Insert-Tags und auch bei Twig Variablen jeweils doppelte geschweifte Klammern erfordert, ist der Aufbau des Insert-Tags im Template etwas tricky.

Auf den richtigen Weg hat mich der Forumbeitrag von BugBuster gebracht, der dort ein ähnliches Problem gelöst hatte. Vielen Dank deshalb an BugBuster.

Navigationsmodule

Ein Frontend-Modul für die Navigation einrichten und das erstellte Template nav_megamenu als Navigationstemplate auswählen.
Im Modul die CSS-Klasse navmega eintragen. Weitere Einstellungen im Modul für die Hauptnavigation waren nicht nötig.

Für die Submenus, die im Mega-Artikel platziert werden sollen, muss man weitere Navigationsmodule anlegen. Evtl. mit Angabe einer Referenzseite, sowie der Angabe der Sublevels, die angezeigt werden sollen.

Seite und Artikel

Der Inhalt des Megamenus kommt aus dem Artikel, der den gleichen Namen und somit auch den gleichen Alias, wie die aufrufende Seite hat.
Ich habe den Artikel an der Contao-üblichen Position - innerhalb der betreffenden Seite - belassen.
Man könnte aber auch alle Mega-Artikel gemeinsam z.B. in einer versteckten Sammler-Seite oder Folder-Page parken.

Einstellungen in diesem Beispiel:
  1. die Seite, die das Megamenu zeigen soll:
    • Seitenname: Content
    • Seitenalias: content
    • CSS-Klasse: megamenu
  2. Name des Artikels für den Inhalt des Megamenus:
    • Artikelname: Content
    • Artikelalias: content
    • CSS-Klasse: mega-article (wird automatisch im Template gesetzt)

CSS

Der Rest ist CSS.