Bootstrap 3: Navbar mit Sprachmenü

Dieses Snippet baut eine linksbündige Seitennavigation sowie ein rechtsbündiges Sprachmenü auf. In der Mobilansicht sind beide Menüs über denselben Menübutton (Hamburger-Icon) aufrufbar.

Das Icon des Sprachmenüs entstammt den Google Material Icons.

Die ID der aktuellen Seite wird beim Wechsel der Sprache beibehalten.

Andere Navigationen:

TypoScript des Menüs:

lib.bootstrap3-language = COA
lib.bootstrap3-language {
    wrap = <nav class="navbar navbar-default"> <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 collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</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 id="navbar" class="navbar-collapse collapse"> | </div>

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

            1 = TMENU
            1 {
                expAll = 1

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

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

                ACT < .CUR

                IFSUB = 1
                IFSUB {
                    ATagTitle.field = title
                    ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
                    linkWrap = |<b class="caret"></b>
                    ATagBeforeWrap = 1
                    wrapItemAndSub = <li class="dropdown">|</li>
                }

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

                CURIFSUB < .ACTIFSUB
            }

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

                // because default Bootstrap 3 doesn't support more submenu levels:
                IFSUB >
                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>
                }
            }
        }

        // language menu:
        20 = HMENU
        20 {
            special = language
            special.value = 0,1

            addQueryString = 1
            addQueryString.exclude = id
            addQueryString.method = GET

            wrap = <ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="ic-language"></span> <span class="caret"></span></a>|</li></ul>

            1 = TMENU
            1 {
                wrap = <ul class="dropdown-menu" role="menu">|</ul>
                NO = 1
                NO {
                    wrapItemAndSub = <li>|</li>
                    stdWrap.cObject = TEXT
                    stdWrap.cObject {
                        value = Deutsch || English
                    }
                }
                ACT < .NO
                ACT {
                    wrapItemAndSub = <li class="active">|</li>
                }
            }
        }
    }
}
Impressum / Datenschutz