Menü
Über das Pattern
Menüs gibt es in zwei Ausprägungen: Der Menübaum ausschließlich für wien.gv.at und das Menü für Microsites in unterschiedlichen Farbvariationen.
JavaScript
Dependencies
main.js
Parameter und Anwendung in Nunjucks
# Parameter nav(settings)
settings: "object"
title: "string" # Titel der Navigation
button_label: "string" # Label des Buttons
nojslink: "string" # Pfad zur no-JS Variante des Menüs
type: "string" # Zulässige Werte: 'microsite' (default: false)
color: "string" # 'abendstimmung', 'morgenrot', 'flieder', 'goldgelb', 'nebelgrau', 'frischgruen', 'wasserblau' (default: nebelgrau)
desktop: "string" # Auf Desktop als horizontale Navigation darstellen (default: false)
burger: "string" # Burger Icon ausgeben (default: false)
dense: "boolean" # Wenig Abstand zwischen Menüpunkten ausgeben (default: false)
hide_linktext: "string" # Buttontext visuell verstecken
lists: "array" # Welche Daten sollen angezeigt werden und woher kommen sie.
- "array" # Kann eine collection sein oder ein include
- "string" # Name der Collection oder Pfad zum include
- "string" # Typ: 'include' oder 'collection'
- "string" # (optional) Welche Liste in nav_data.json soll ausgegeben werden
actions: "array" # Liste von Pfaden zu includes für die Navigation
# Anwendung
{% from "components/nav/main/nav-main.njk" import nav, nav_wrapper with context %}
{% call nav_wrapper(c) -%}
{{ nav(settings) }}
{%- endcall %}Variationen
Menübaum wien.gv.at
- Beim geöffneten Menü ist die restliche Seite hinter einem schwarz-transparenten Layer und nicht mehr scrollbar. Gescrollt wird stattdessen innerhalb des Menüs.
- Am Desktop öffnet sich das Menü als Balken rechts, mobil öffnet es sich vollflächig.
- Bei Klick auf einen Menüpunkt öffnet und schließt sich das Untermenü.
Menü Microsite Standard
Das Menü der Microsites ist in einer der CD-Farben leicht (30 Prozent) eingefärbt, die Schrift ist schwarz. Das aufgeklappte Menü ist in 1 der 6 CD-Farben zu 100 Prozent eingefärbt: Morgenrot, Flieder, Abendstimmung, Frischgrün, Goldgelb oder Nebelgrau. Die Schriftfarbe ist schwarz oder bei der Farbe Abendstimmung ausnahmsweise weiß.