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

时间:2014-05-13 18:53:43

标签: twitter-bootstrap-3 typoscript typo3-6.2.x

我尝试了新的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级条目可见,没有弹出按钮)。我还包括了paypal-accessibility-plugin ...

1 个答案:

答案 0 :(得分:0)

将此添加到您的(自定义)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;
}