Типографская навигация с подстраницами

Я пытаюсь реализовать свою навигацию с помощью опечаток, и мне сложно понять, как правильно обернуть.

У меня уже есть базовая навигация с 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>

TypoScript:

  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" оборачивается два раза, и раскрывающийся список не отображается должным образом.


person user1058712    schedule 13.06.2013    source источник


Ответы (3)


Опция noBlur удалена с TYPO3 v6.0, и я где-то читал, что состояние 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;
}
person SimonSimCity    schedule 13.06.2013
comment
Думаю, нужно добавить expAll = 1 даже к первому TMENU. - person tmt; 13.06.2013

Обертка <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>
  }
person Wipster    schedule 13.06.2013
comment
Это был я против. Извините, мне следовало добавить комментарий. Вы не используете wrapItemAndSub в элементах первого TMENU, что означает, что весь второй уровень <ul></ul> никогда не будет внутри первого уровня <li></li>, как требует вопрос. - person tmt; 13.06.2013
comment
Кроме того, как и в случае с ответом @ SimonSimCity, у вас нет expAll = 1 для первого TMENU, поэтому подменю второго уровня не будут в выводимом коде, доступном для использования в качестве динамически появляющихся раскрывающихся меню, о которых, похоже, идет речь. - person tmt; 13.06.2013
comment
Спасибо. Это нормально работает. Но теперь у меня возникла новая проблема. Если я нажимаю элемент в раскрывающемся списке, основной элемент раскрывающегося списка получает только класс ‹li class = active›, а не ‹li class = dropdown›, а раскрывающийся список ‹ul› находится за пределами тега ‹li›. Может быть, можно обернуть с помощью ‹li class = dropdown active›, если у него есть подстраницы и он активен. Я использую v6.1 - person user1058712; 13.06.2013
comment
Решена первая проблема с ACTIFSUB и CURIFSUB, но затем ‹ul class = dropdown-menu› оборачивается два раза, если текущая страница является подстраницей раскрывающегося списка. - person user1058712; 13.06.2013
comment
Не могли бы вы отредактировать свой первоначальный пост или задать новый вопрос, чтобы я мог видеть опечатку? Не могу представить ваш код прямо сейчас. - person Wipster; 14.06.2013
comment
Я пробовал ваш новый код. Но все же проблема с дублирующимся тегом ‹ul class = dropdown-menu›. И дублируется только этот тег. Это выглядит так ‹ul class = dropdown-menu› ‹ul class = dropdown-menu› ‹li› ‹a› ... ‹/a› ‹/li› ‹/ul› ‹/ul›. Это происходит только после щелчка по подпункту. - person user1058712; 14.06.2013
comment
Есть еще какие-нибудь опечатки? Как я уже сказал, я не могу воспроизвести проблему. Приведенный выше код работает должным образом. - person Wipster; 14.06.2013
comment
Большое тебе спасибо. Я забыл, что у меня на этом сайте есть шаблон расширения, поэтому навигация создавалась два раза. Сейчас все работает нормально. - person user1058712; 15.06.2013

Этот фрагмент я использовал для внутренних ссылок на страницы:

Я использовал поле субтитров для внутренней навигации.

Например:

<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>
        }
    }   
}
person Jimit Shah    schedule 11.02.2015