Bootstrap 3: Navbar mit Erläuterungen

TypoScript des Menüs:

lib.bootstrap3-notes = COA
lib.bootstrap3-notes {
    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 = HMENU
    20 {
        wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>

        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>
            }

            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" role="menu">|</ul>

            // use additional notes in a field, e.g. subtitle:
            NO.stdWrap.cObject = COA
            NO.stdWrap.cObject {
                10 = TEXT
                10.field = nav_title // title
                20 = TEXT
                20.field = subtitle
                20.wrap = <div class="menu-info">|</div>
                20.if.isTrue.field = subtitle
            }

            CUR < .NO

            // 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>
            }
        }
    }
}

CSS-Ergänzungen:

/* additional declarations for info-flyout */
.dropdown-menu > li {
    position: relative;
}


.dropdown-menu > li > a .menu-info {
    white-space: normal;
    font-size: 12px;
    padding-left: 5%;
}


@media (min-width: 768px) {
    .dropdown-menu li {
        border-bottom: none;
    }


    .dropdown-menu > li > a .menu-info {
        background-color: #f5f5f5;
        background-image: linear-gradient(to bottom, #f5f5f5 0px, #e8e8e8 100%);
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
        font-size: 14px;
        position: absolute;
        left: 100%;
        top: 0;
        display: none;
        width: 250px;
        height: auto;
        padding: 5px;
        color: #444;
        white-space: normal;
    }


    .dropdown-menu > li > a:focus .menu-info,
    .dropdown-menu > li > a:hover .menu-info {
        display: block;
    }
}