Aktuell gewählte Seite: "Küche"

Bootstrap 3: Navbar mit Erläuterungen

Im Dropdown-Menü werden zusätzliche Informationen zu den Menüpunkten angezeigt, wenn man diese fokussiert. In der Mobilansicht stehen die Infos eingerückt unter dem Menüpunkt.

Der jeweilige Inhalt wird in diesem Beispiel aus der Seiteneigenschaft subtitle ausgelesen, falls es für die gewählte Seite Inhalt gibt.

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