backslash-dropdown-controlles

JS-Modul, welches das Zusammenspiel verschiedener Dropdowns, der Suche und der Mobile-Navigation steuert. Was es macht:

• Es setzt die Skiplinks von Navigation und Suche in der Mobile-Ansicht korrekt
• Es können Buttons definiert werden, welche ein Dropdown öffnen/schliessen. (Suche, Hamburger, Dropdowns)

Initialisierung

Das BsDropdownController.js kann im Footer geladen werden. Die Toolbar kann im custom.js folgendermassen initialisiert werden:

const bsToolbar = new BsDropdownController(( dropdownItems = [
    {
        type: 'mobilenav',
        btn: '.js-hamburger',
        content: '.mobilenav__container',
        visible: false
    },
    {
        type: 'search',
        btn: '.js-searchform__toggle-btn',
        content: '.js-searchform__input-submit-container',
        visible: false
    },
    {
        type: 'dropdown-with-background',
        btn: '.js-languageswitch__btn',
        content: '.js-languageswitch__dropdown',
        visible: false
    },
    {
        type: 'dropdown',
        btn: '.js-dropdown-btn',
        content: '.js-dropdown__dropdown',
        visible: false
    }
]), (config = { mobileBreakpoint: 620, toolbarBackground: '.js-BsDropdownController-bg', slideTime: 200, }));

Alle Elemente einer Instanz des 'BsDropdownController' spielen so zusammen, dass andere Dropdowns geschlossen werden, wenn ein anderes geöffnet wird.

Als Typen können die mobilenav (Skiplink wird angepasst), search (Skiplink wird angepasst und Suchbutton reagiert auf mobilebreakpoint) und normale Dropdowns mit oder ohne Background gesetzt werden. Hat ein Dropdown ein Background, wird es nur über den Klick auf eben diesen geschlossen. Hat ein Dropdown keinen Background wird es geschlossen, sobald der Fokus ausserhalb ist.

Weiter werden ein Button und ein Content erwartet und, ob das Menu/Dropdown beim Öffnen der Seite bereits offen ist oder nicht.

Über die Config können kann der Mobile-Breakpoint, Background-Klasse und die SliderTime überschrieben werden.

• mobileBreakpoint definiert, ab wann ein extra Suchbutton für Mobile sichtbar ist.
• toolbarBackground definiert die Klasse, welcher der Background für offene Dropdowns hat.
• slideTime definiert die Zeit, welche ein Dropdown zum Öffnen benötigt.

Eingesetzt unter anderem bei:

• Brugg
• Wolfhalden
• Reiden
• Regio Brugg
• Niederweningen
• Klinik Seeschau

Versionen

Es sind bereits verschiedene Versionen im Einsatz, zum Teil customized.

• 1.0: 27.08.2025