PDA

Просмотр полной версии : Двухуровневое меню в 1 div'e


korwru
21.01.2011, 14:09
Подскажите пожалуйста как можно реализовать подобную структуру меню, а именно, чтобы 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
}

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

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>

dmartynenko
21.04.2011, 19:25
А зачем вам display:none ?

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

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

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

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

Peter
22.04.2011, 14:37
Ыыыыыы! Забыл написать, 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;
}
});
});

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

-=UncleByte=-
22.04.2011, 22:18
Тогда понятно почему и как :)