twitter-bootstrap-3 - TYPO3 版本。6.2.2 Bootstrap 3 - 可访问的多级导航

Question

我尝试了新的 bootstrap 3 包——真的很棒！

现在我希望在设置中至少有一个 3 级导航和调整 lib.navigation.main：

lib.navigation.main = COA
lib.navigation.main {
    10 = HMENU
    10 {
        1 = TMENU
        1 {
            wrap = <ul class="nav navbar-nav navbar-main">|</ul>
            expAll = 1
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = abstract // description // title
                ATagBeforeWrap = 1
                linkWrap = |<mark class="bar"></mark>
                wrapItemAndSub = <li>|</li>
                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>
                }
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active">|</li>
            }
            CUR < .ACT
            IFSUB < .NO
            IFSUB {
                doNotLinkIt = 1
                allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret"></b></a>
                wrapItemAndSub = <li class="dropdown">|</li>
            }
            ACTIFSUB < .IFSUB
            ACTIFSUB {
                wrapItemAndSub = <li class="active dropdown">|</li>
            }
            CURIFSUB < .ACTIFSUB
        }
        2 < .1
        2 {
            wrap =  <ul class="dropdown-menu">|</ul>
            SPC = 1
            SPC {
                wrapItemAndSub = <li class="divider"></li><li class="dropdown-header">|</li>
            }
         ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active">|</li>
            }
            CUR < .ACT
            IFSUB < .NO
            IFSUB {
                doNotLinkIt = 1
                allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret"></b></a>
                wrapItemAndSub = <li class="dropdown">|</li>
            }
            ACTIFSUB < .IFSUB
            ACTIFSUB {
                wrapItemAndSub = <li class="active dropdown">|</li>
            }
            CURIFSUB < .ACTIFSUB
       }

    3 < .1
    3 {
    wrap =  <ul class="dropdown-submenu">|</ul>

            IFSUB >
            ACTIFSUB >
            CURIFSUB >
        }
    }
}

不幸的是，菜单无法正常工作（第 3 级条目可见，没有弹出窗口）。我还包括了贝宝可访问性插件...

Answer 1

将此添加到您的（自定义）CSS：

/* optional */
.dropdown-menu {
   margin:0;
   width:220px;
}
.open > .dropdown-menu .dropdown-menu {

    top:-1px;
    left:100%;
}

/* must */
.open > .dropdown-menu li:hover .dropdown-menu {
    display: block;
}