LooseSuits

yes its possible.

I suggest using scriptaculous.
It runs off the same prototype.js file that mootools uses. But it has better support, and is used by bigger sites. Like digg, gucci, and so fourth.

It also has better docs for beginners :)

I don't know Mootools and I don't know if it can do what you want but is there a reason for not using another alternative? I would recommend the suckerfish drop down menus. They're wonderful, and tiny - no frameworks required (and only a dozen lines of code).

You can check it all out at htmldog - http://www.htmldog.com/articles/suckerfish/

Mooltools is a javascript library, that runs off of the prototype engine.
It is great for DOM manipulation and nice visual effects.

Suckerfish is great. But you can achieve the same effects through mootools, or scriptaculous.

Binary - look at this site i did

Click the "upcoming features" tab at the top. This sliding effect was created using scriptaculous.

joey, how would one implement that "accordion" effect as they seem to like to call it, to navigation that doesn't reside at the absolute top of the page?

Mootorial - http://clientside.cnet.com/wiki/mootorial

Has everything you need, with examples.

BTW Im pretty sure mootools doesnt use prototype anymore. It is its own library now.

As far as I see, it doesn't.

i stand corrected.

Mootools does not run off of prototype

I know what mootools is and have had a play with it, but have never used it for anything outside of playing. I tend to steer clear of libraries and write everything from scratch... although recently I've been tempted by jQuery.

The fact that mootools is it's own package is interesting too - I will have to try it again.

RightOn -

Doing a google search (which I hope you have done) I found this.

http://www.chrisesler.com/mootools/mootools-accordion.html

It is an actual accordion, joey's example is just a transition effect on a div.

Also, if you wanted to do an effect like his, it does not have to be at the top. If you know CSS positioning you will have no problem putting it anywhere.

I recommend using mootools.. it has alot less overhead..
I'm going back to my scriptaculous sites and redoing them in mootools.

all the accordion examples I've seen are great for vertical sidebars like most of my designs... but my dads uses a horizontal bar and I can't think of a way to apply the accordion from that example to a single

what exactly are you trying to accomplish? can you send me a link?

Well the downside is I'm working on it offline on my laptop @ home but I'm wanting to do something like this...

http://www.jamesmeister.com/temp/index2.html

I'm using the suckerfish example here.

Basically it's your basic ul/li list menu that runs horizontally. Problem is it falls around 200 px below the top of the page.

if you are noticing spacing issues that could be a result of padding and margins on unorderd lists in different browsers. Try eliminating them in your css.

You can easily achieve this kind of effect using sliding or fading divs in mootools :)

Yeah that's what I'm trying to do, yet I'm fairly new to the whole mootools scene and everything I've read to date assumes I'm sort of JS genius.

How would you go about doing just a basic slide & fade menu drop down?

i will post you an example as soon as i get home :)

Thank you!

Right, 50% of this is attaching things to the right page elements. I assume you want to have things show up when you hover over a link.

Right say we've got a link called "Whatsits" defined like this:
< div id="header">
...
< a href="wherever" id="whatsits">Whatsits
...
</div>

We'll also say that you've made the menu item that should pop up and it's positioned where you want it and had its visibility set hidden. It can have an ID of "bernard".

To hook an event to the link you need some code a little bit like this:

var linkEl = $E('#whatsits');
linkEl.addEvent('mouseover', function() {
new Fx.Style("bernard", 'opacity', {duration: 3000, wait: false}).start(100);
});

You then need to consider how to get rid of the bastard. I hate drop down menu's so I've never run into this but I would use a timer.

So taking the above code, I would add increment a value that gets checked ten times a second and also trigger a timer to run around and tell the floating div to bugger off if the mouse hasn't been anywhere near it for a while.

countDown = 0;

linkEl.addEvent('mouseover', function() {
new Fx.Style("bernard", 'opacity', {duration: 3000, wait: false}).start(100);

countDown = 5; // 500ms pause before it fades

CheckWhatsit();
});

function CheckWhatsit() {
countdown--;
if (countdown > 0) // need to check again
window.setTimeout('CheckWhatsit', 100); // check back in 100ms
else
new Fx.Style("bernard", 'opacity', {duration: 3000, wait: false}).start(0);
}

Now, I think my logic is sound but if you're considering doing this with more than a few things, you'll have to be a little more clever in getting things to bugger off when you change menu or you'll have things lurking on the page.

urgh that looked so much nicer with indentation and syntax highlighting

I've written a horiz accordion using Moo.fx and Prototype, but I can't seem to find it on my computer.

is this the sort of thing you're looking for?

jackosh... yes I'm trying to turn an existing HTML menu into a dropdown menu via mootools or moo.fx

If you can find that and email it to james.meister@gmail.com I would love to take a look at it.

Anyone come up with anything while I was gone?

Hey Right on...

I can't seem to find it... but I definitely know how it worked.

If you take a look at the accordion code, it just transforms the height of an element from 100% to 0 when a trigger element is clicked (and vice versa when the height is already 0).

You're looking to do the same thing, but with the width of the element instead of the height. I don't think the rewrite is too long. In fact, if I remember correctly, I just edited the actual accordion code to change the width and not the height!

hmmm ok I'll take a glance and see what I come up with.

I'll keep ya posted.

In about a week if you still don't have anything to work with, I'd be happy to get it going for you...

For now, though, it's finals week :(

I'm going to run with Suckerfish for now while I try to figure out mootools.

I'm a doof when it comes to JS.

did my code not help at all?

it actually confused me more than I was already.

My issue I have with stuff like this is that I'm not a programmer and a lot of JS and weird code freaks me out.

I LOVE the abilities of frameworks like mootools but the developers tick me off because they're not noob friendly. They basically respond with "http://www.google.com" for any questions that are too "nooblike".