Is it possible to create a menu that expand the sublevels as i click them? I only want level1 shown at first, then when i click a menuitem that has sub-folder/documents i want them to expand.
Check example here: http://www.vasterbottensmuseum.se/arkeologi/
I don´t see the necessity for Javascript or any modification of the dropmenu snippet. Just simple CSS.
Here is a copy of a menu I used on a site, but then the multilevel-solution wasn´t necessary anymore, so I don´t know if it works at once (and there´s a lot of design stuff in it, but I think you´ll find out). The thing is to hide the sublevels until they get active. The call for the dropmenu has in that case was:
[[DropMenu? &menuName=`leftMenu` &startDoc=`2` &levelLimit=`0` &topnavClass=`leftMenubar` &hereClass=`activeLink`]]
the CSS for that:
ul.leftMenubar {
font-size: 0.75em;
}
ul.leftMenubar li{
border-bottom: 1px solid #CCCCCC;
line-height: 2.5em;
font-weight: bold;
font-size: 1em;
color: #6497D7;
text-indent: 10px;
}
ul.leftMenubar li ul {
display: none;
}
ul.leftMenubar li.activeLink ul{
display: block;
}
ul.leftMenubar li.activeLink ul li ul{
display: none;
}
ul.leftMenubar li ul li.activeLink ul{
display: block;
}
ul.leftMenubar li a{
text-decoration: none;
font-weight: bold;
color: #6497D7;
line-height: 20px;
}
ul.leftMenubar li li{
border-top: 1px solid #CCCCCC;
background: #FFFDF4;
border-bottom: 0px;
font-size: 1em;
}
ul.leftMenubar li li a{
font-weight: normal;
}
ul.leftMenubar li.activeLink{
background: #FFFBE8;
}
ul.leftMenubar li li.activeLink{
background: #FFF;
}
ul.leftMenubar li li a{
padding-left: 20px;
}
ul.leftMenubar li li.activeLink a{
background: url(images/back_list.gif) 2px -2px no-repeat;
}
ul.topMenubar li.activeLink, ul.topMenubar li.activeLink a{
font-weight: bold;
}
Greetz Marc
MODX Staff
