[thelist] mootools - dynamic menu expand/contract
Bob Meetin
ontheroad at frii.com
Sun Jun 3 11:29:29 CDT 2007
Robert et al,
I looked through the code, messed a bit, but could not get it to work.
So- research... I did 'google' and found a number of examples beyond
what is documented on the mootools site. Many of the examples are/were
only half-baked. They show how it would look, but are anchored (#) to
the same file and if you point to alternate files it would collapse and
return to the starting link/element. However, I found a couple that
work, including the example on http://moofx.mad4milk.net/. It uses
anchors and I was able to use that to turn the accordion into an
accordion menu. To make a long story short, I wrote up a really basic
tutorial on how I got it to work:
Visit: www.dottedi.biz/codesamples/mootools/page1.html
If someone with better JavaScript skills than me can explain how to get
it to work the 'other' way, send to me and I'll add the notes.
-Bob
Robert O'Rourke wrote:
> 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