Russian TYPO3 community - Двухуровневое меню в 1 div'e

Russian TYPO3 community (http://forum.typo3.ru/index.php)

- Общие вопросы (http://forum.typo3.ru/forumdisplay.php?f=12)

- - Двухуровневое меню в 1 div'e (http://forum.typo3.ru/showthread.php?t=9166)

Двухуровневое меню в 1 div'e

Подскажите пожалуйста как можно реализовать подобную структуру меню, а именно, чтобы 2 уровень меню был вложен в div первого...

Код:

<div id="b1">

 <div class="b">

  <ul>

   <li class="l1"><a href="link" class="level1">LINK TEXT 1</a>

    <ul>

     <li class="level2"><a href="link">text</a></li>

     <li class="level2"><a href="link">text</a></li>

     <li class="level2"><a href="link">text</a></li>

    </ul>

   </li>

  </ul>

 </div>

</div>

<div id="b2">

 <div class="b">

  <ul>

   <li class="l1"><a href="link" class="level1">LINK TEXT 1</a>

    <ul>

     <li class="level2"><a href="link">text</a></li>

     <li class="level2"><a href="link">text</a></li>

     <li class="level2"><a href="link">text</a></li>

    </ul>

   </li>

  </ul>

 </div>

</div>

Мой код, но вложенность неправильная. А именно второй уровень идёт после закрытия первого.

Код:

# Menu 1 cObject

lib.menu_1 = HMENU

# First level menu-object, textual

lib.menu_1.1 = TMENU

lib.menu_1.1 {

  expAll=1

  noBlur = 1

  wrap= |

  # Normal state properties

  NO {

    stdWrap.cObject = COA

    stdWrap.cObject {

            10 = LOAD_REGISTER

            10{

                Counter1.cObject = TEXT

                Counter1.cObject.data = register:Counter1

                Counter1.cObject.wrap = |+1

                Counter1.prioriCalc = intval

            }

            20 = TEXT

      20.field = title // subtitle

        }

        linkWrap = |

               

    ATagTitle.field = title // subtitle

  ATagParams = class="level1"

  stdWrap.htmlSpecialChars = 1

  allStdWrap.dataWrap = <div id="b{register:Counter1}"><div class="b"><ul><li class="l1"> | </li></ul></div></div>



  }

}

# Second level menu-object, textual

lib.menu_1.2 = TMENU

lib.menu_1.2 {

  noBlur = 1

# Normal state properties

wrap = <ul> | </ul>

NO.allWrap = <li class="level2"> | </li>

NO.stdWrap.htmlSpecialChars = 1

}

Такая же проблема была. Получилось вот таким способом. Может и коряво, зато работает.

lib.leftsidemenu = HMENU
lib.leftsidemenu {
special = list
special.value = 7,8,9,19,20
wrap = <div id="servicemenu"> | </div>
1 = TMENU
1 {
noBlur = 1
expAll = 1
ACT = 1
CUR = 1
NO {
linkWrap = |<ul style="display:none;">
wrapItemAndSub = <div class="block">|</div>
ATagTitle.field = title
stdWrap.htmlSpecialChars = 1
}
ACT {
linkWrap = |<ul style="display:block;">
wrapItemAndSub = <div class="act">|</div>
ATagTitle.field = title
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 1
}
CUR {
linkWrap = |<ul style="display:block;">
wrapItemAndSub = <div class="act">|</div>
ATagTitle.field = title
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 1
}
}
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = | </ul>
NO {
linkWrap = <li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
}
}

ХТМЛ такой...

<div id="servicemenu">
<div class="block">
<a href="index.php?id=8" title="Видеонаблюдение">Видеонаблюдение</a>
<ul style="display:none;">
<li><a href="index.php?id=13" title="Уличное">Уличное (периметр)</a></li>
<li><a href="index.php?id=14" title="Внутреннее">Внутреннее (комнаты)</a></li>
</ul>
</div>
<div class="act">Освещение
<ul style="display:block;">
<li><a href="index.php?id=16" title="Уличное">Уличное</a></li>
<li><a href="index.php?id=17" title="Внутреннее">Внутреннее</a></li>
</ul>
</div>
<div class="block">
<a href="index.php?id=19" title="Сетевая связь">Сетевая связь</a>
<ul style="display:none;">
<li><a href="index.php?id=21" title="Беспроводная">Беспроводная</a></li>
<li><a href="index.php?id=22" title="Проводная">Проводная</a></li>
</ul>
</div>
</div>

А зачем вам display:none ?

В менюшках есть параметр, который позволяет показывать подменю только для текущего выбранного пункта верхнего уровня.

Т.е. если пользователь находится на p2 или p2.x то меню выглядит так:
p1
p2
p2.1
p2.2
p3

Если на p3 или p3.x
p1
p2
p3
p3.1
p3.2

Полностью согласен с предыдущим постом, убрать ExpAll и не надо будет добавлять display:none.

Ыыыыыы! Забыл написать, jquery + у меня вооот такой код ещё присутствует:

$(function(){
$('#servicemenu .block').hover(function() {
if(this.className != 'block active') {
$('#servicemenu .block').removeClass('active');
$(this).addClass('active');
$('#servicemenu .block UL').hide(500);
$(this).find('UL').show(500);
}
else {
return false;
}
});
});

Симпатишная менюшка получилась... :)

Тогда понятно почему и как :)