3

我正在尝试使用打字稿实现我的导航，但我在理解如何正确包装时遇到了问题。

我已经有一个工作正常的 1 级基本导航。现在我的页面有子页面和其他没有的页面。对于那些没有子页面的人，我想要我现在的行为。对于带有子页面的页面，我想将其添加为下拉菜单。

HTML 代码应如下所示。

<ul class="nav">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Test0
            <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
             <li class=""><a href="#">DropwDownItem1</a></li>
        </ul>
     </li>
     <li class="active"><a href="#">Test1</a></li>
     <li><a href="#about">Test2</a></li>
     <li><a href="#contact">Test3</a></li>
</ul>

排版：

  lib.menu = HMENU
  lib.menu {
  special = list
  special.value = 3,2

  1 = TMENU
  1 {
    wrap = <ul class="nav">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li class="">|</li>
    RO < .NO
    RO = 1
    CUR < .NO
    CUR = 1
    CUR.wrapItemAndSub = <li class="active">|</li>
    ACT < .CUR

    IFSUB = 1
    IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    IFSUB.stdWrap.innerWrap= |<b class="caret"></b>
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    ACTIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    ACTIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
    CURIFSUB = 1
    CURIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    CURIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    CURIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
  }

  2 = TMENU
  2 {
    wrap = <ul class="dropdown-menu">|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
  }
}

//编辑：我已经更改了代码，但是现在当我单击下拉菜单中的一个项目时，ul class="dropdown-menu" 被包装了两次，并且下拉菜单没有正确显示。

4

3 回答 3

4

自 TYPO3 v6.0 以来删除了 noBlur 选项，我在某处读到，RO 状态使用 javascript 来显示/隐藏子菜单 - 所以我尽量不使用它。我宁愿通过 css 显示/隐藏。

我会这样做：

lib.menu = HMENU
lib.menu {
    special = list
    special.value = 3,2

    1 = TMENU
    1 {
        expAll = 1
        wrap = <ul class="nav">|</ul>

        NO.wrapItemAndSub = <li>|</li>

        CUR = 1
        CUR.wrapItemAndSub = <li class="active">|</li>

        ACT < .CUR
    }

    2 = TMENU
    2 {
        wrap = <ul>|</ul>

        NO = 1
        NO.wrapItemAndSub = <li>|</li>
    }
}

通过 CSS 添加悬停效果：

.nav ul {
    display: none;
}
.nav li:hover ul {
    display: block;
}
于 2013-06-13T08:01:36.230 回答
1

您的 subnavi的<ul>环绕应该围绕TMENU. 我认为你不需要它，ATagBeforeWrap因为它只linkWrap在<a>标签内制作。所以它应该看起来像这样（未经测试）：

lib.menu = HMENU
lib.menu {
  special = list
  special.value = 3,2

  1 = TMENU
  1 {
    wrap = <ul class="nav">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li class="">|</li>
    RO < .NO
    RO = 1
    CUR < .NO
    CUR = 1
    CUR.wrapItemAndSub = <li class="active">|</li>
    ACT < .CUR

    noBlur = 1
    IFSUB = 1
    IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
  }

  2 = TMENU
  2 {
    wrap = <ul class="dropdown-menu">|</ul>
    expAll = 1
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
  }
}

在这里你可以找到关于包裹的好信息，不幸的是它是德语：http: //jweiland.net/typo3/typoscript/wrap-moeglichkeiten-und-hierarchie-in-menues.html

顺便说一句：如果您使用的是 TYPO3 6+，则 noBlur 设置已被删除。

---> 编辑：

我稍微缩短了你的代码，但我真的无法重现这个问题。对我来说它工作正常。下拉列表周围的 li 获取下拉列表。但我没有看到重复的<ul class="dropdown-menu">

  special = list
  special.value = 3,2

  1 = TMENU
  1 {
    wrap = <ul class="nav">|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li class="">|</li>
    RO < .NO
    CUR < .NO
    CUR.wrapItemAndSub = <li class="active">|</li>
    ACT < .CUR

    IFSUB = 1
    IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    IFSUB.stdWrap.innerWrap= |<b class="caret"></b>

    ACTIFSUB < .IFSUB
    CURIFSUB < .IFSUB
  }

  2 = TMENU
  2 {
    wrap = <ul class="dropdown-menu">|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
  }
于 2013-06-13T07:47:51.480 回答
0

这个片段我用于内部页面链接：

我已使用字幕字段进行内部导航。

例如：

<a href="#about>about</a>
<a href="#ourservice">Ourservice</a>

menu.main_menu = HMENU
menu.main_menu {

#special = directory
#special.value = 2

    1 = TMENU
    1 {
         wrap = <ul class="nav navbar-nav navbar-right">|</ul>
         expAll = 1
         noBlur = 1

         NO = 1
         NO {
            doNotLinkIt = 1
            allWrap.insertData = 1
           allWrap = <li class="first menu-{field:uid}"><a href="#{field:subtitle}">|</a></li>                      
          }

          ACT < .NO
          ACT {
               ATagParams = class="active dropdown"
               allWrap = <li class="active first menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
         }

         CUR < .NO
         CUR {
             ATagParams = class="parent_menu active"
             allWrap = <li class="first active menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
        }
    }   
}
于 2015-02-11T13:32:08.300 回答