[thelist] mootools - dynamic menu expand/contract
Robert O'Rourke
rob at sanchothefat.com
Fri Jun 1 11:55:07 CDT 2007
Bob Meetin wrote:
> I'm trying to set up a vertical menu using mootools/javascript that will
> expand/contract and remain expanded if a menu sub-item is selected. I'm
> not familiar enough with javascript to know how to reconfigure this to
> make it happen. See a 90% example at:
>
> http://www.dottedi.biz/codesamples/mootools/home.html
>
> The goal: when I select an item under Heading 3, that page will open as
> it does but the Heading 3 list should stay expanded. If someone has
> seen a working example using mootools/accordion effect, please don't be
> shy...
>
> -Bob
>
>
There's a bit of code that the above example doesn't have that was on a
tutorial I used some time ago so I don't know if it works the same way
now. You have to add a title attribute to each header bit that you click
on and then all the links you have under that heading need
#whatever-the-headers-title-attribute-is stuck on the end of the url. If
that makes sense.
Anyway try replacing it with this:
var toggles = $$('h3.atStart');
var stretchers = $$('div.atStart');
var accordion = new Accordion(toggles, stretchers, {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Home');
var newEl = new Element('div', {'class': 'element'}).setHTML('<p><a href="home.html">Home</a></p>');
accordion.addSection(newTog, newEl, 0);
| var i = toggles.length; while(i) {
if(window.location.href.indexOf(toggles[--i].title) != -1) break; }
accordion.showThisHideOpen(stretchers[i]);
Really can't promise it'll work because theres some other stuff in there
that I don't have a clue what it does... :-\
Rob
|
More information about the thelist
mailing list