Currently selected page: "Products"

Bootstrap 3: Navbar with additional notes

If you focus the menu items in the dropdown menu, additional informations are shown as a fly-out box. In mobile view the notes are shown indented below the menu items.

The respective content is selected from the page property subtitle, if the field is not empty.

TypoScript of navigation:

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

Additional CSS:

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