Aktuell gewählte Seite: "Elstar"

Bootstrap 3: Multi-level Navigation mit SmartMenus jQuery

Die Navbar wird um weitere Ebenen erweitert. Basiert auf SmartMenus jQuery, daher gibt es ein paar Änderungen im Markup (z.B. kein data-toggle="dropdown").

Zusätzlich zum Standard-Bootstrap werden folgende Dateien benötigt:

  • jquery.smartmenus.bootstrap.css
  • jquery.smartmenus.min.js
  • jquery.smartmenus.bootstrap.min.js

Weitere Demo: SmartMenus jQuery Website Menu - Bootstrap Addon

Funktionsweise: In der Mobilansicht offenbart der erste Klick auf einen Menüpunkt mit Unterseiten die Unterebene. Klickt man ein zweites Mal auf den gleichen Menüpunkt, wird die dort verlinkte Seite geladen (funktioniert nur bis einschließlich Version 1.0.1). Die Unterebene kann mit dem sub-arrow-Button wieder geschlossen werden.

TypoScript des Menüs:

lib.bootstrap3-smartmenus = COA
lib.bootstrap3-smartmenus {
    wrap = <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> | </div> </nav>

    10 = COA
    10 {
        wrap = <div class="navbar-header"> | </div>
        10 = COA
        10 {
            // hamburger icon:
            wrap = <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | </button>
            10 = TEXT
            10.value = <span class="sr-only">Toggle navigation</span>
            20 = TEXT
            20.value = <span class="icon-bar"></span>
            21 < .20
            22 < .20
        }

        // company name/logo:
        20 = TEXT
        20.value = Project name
        20.typolink {
            parameter = https://www.example.org/
            ATagParams = class="navbar-brand"
        }
    }

    20 = COA
    20 {
        wrap = <div class="navbar-collapse collapse"> | </div>

        10 = HMENU
        10 {
            wrap = <ul class="nav navbar-nav"> | </ul>

            1 = TMENU
            1 {
                expAll = 1

                NO = 1
                NO {
                    ATagTitle.field = title
                    wrapItemAndSub = <li>|</li>

                    // Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
                    wrapItemAndSub.override.cObject = COA
                    wrapItemAndSub.override.cObject {
                        if {
                            value = 4
                            equals.field = doktype
                            isTrue = 1
                            isTrue.if {
                                value.data = TSFE:page|uid
                                equals.field = shortcut
                            }
                        }

                        10 = TEXT
                        10.value = <li class="active">|</li>
                    }
                }

                CUR < .NO
                CUR {
                    wrapItemAndSub = <li class="active">|</li>
                }

                IFSUB = 1
                IFSUB {
                    ATagTitle.field = title
                    ATagParams = class="sub-arrow"
                    linkWrap = |<span class="caret"></span>
                    ATagBeforeWrap = 1
                    wrapItemAndSub = <li>|</li>
                }

                CURIFSUB < .IFSUB
                CURIFSUB {
                    wrapItemAndSub = <li class="active">|</li>
                }

                ACT < .CUR
                ACTIFSUB < .CURIFSUB

                SPC = 1
                SPC {
                    // no divider, if first menu item on this level (using optionSplit):
                    wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li>
                }
            }

            2 < .1
            2 {
                wrap = <ul class="dropdown-menu">|</ul>
            }

            3 < .2
            4 < .3
        }
    }
}