JAVASCRIPT CHALLENGE!

[superninjagoat]

My challenge:

Here's the page: www.sc.edu/beaufort/testArea/menu.shtml (http://www.sc.edu/beaufort/testArea/menu.shtml).

Here's the .js: Script (http://www.sc.edu/beaufort/testArea/common/js/JudsonTry.js).

Here's the corresponding css: CSS (http://www.sc.edu/beaufort/testArea/common/css/menuDropdown.css).

I will eventually include it on www.sc.edu/beaufort/testArea/index.shtml (http://www.sc.edu/beaufort/testArea/index.shtml).

This is my first attempt at DHTML, and my first javaScript of more than two or three lines. I work at a small university, and I'm trying to emulate menus already on our Web site (http://www.sc.edu/beaufort/). The current menuing system is CoolMenus from DHTML Central. While its a great script, it's given me some problems. For example, if you put a correct doctype on our Web pages, the menuing system breaks. I've also had to disable it for Macs (which I hate because I LOVE MACS!)

I'm now looking to create something lighter that has better cross-browser support and that will work when I move the site to XHTML Transitional.

My first goal is to get it working for DOM-compliant browsers. Then I'll add document.all support. Screw NN4 :). The good thing is that the menus should downgrade gracefully (by not showing) on incompatible browsers. At least that's the dream. *looks stoically at distant object*

Here's the problems. I'd appreciate any help the community can give.

1. I want javaScript event handlers instead of inline event handlers, but I seem don't understand them enough to make them work.
2. If you mouse over a second menu while the first menu is still sliding, they both come down. I want the first menu to reset. The problem is in the for loop in the slideIt function. Anyone have a better suggestion?
3. So far, I've only tested it on Win NN7 and IE6. Both work as expected. How's it work on Mac DOM-compliant browsers?
4. Event handling's driving me crazy. I've seen lots of code that supposedly handles event target code for this situation: (the following is not php code, but it helps the formating ...)

--------------
| Layer |.onmouseout = doSomething;
| -------- |
| | Link | ----> We want to know about this mouseout
| | | |
| -------- |
| -------- |
| | Link | |
| | ----> | but not about this one
| -------- |
--------------
---->: mouse movement
The best-sounding solution I've found was from this page (where I lifted the above diagram from). But I can't make it work for me. And oh, how I've tried. Any suggestions? (btw, quirksmode has been my primary source for what I've learned of javaScript. That and random Google searches.)
So, That's my story. Can anybody give me a hand?

[DCKiwi]

It looks reasonably good in Safari. The only problem is that the 'friends' menu item wraps onto a second line and appears underneath 'future students'.

Have you seen this drop down menu?

http://www.alistapart.com/articles/dropdowns/

It's similar in concept to what you already have (using javascript and css to modify the style and behaviour of a list) but is designed so that the javascript is kept out of the body code, which keeps things a little neater and tidier.

It doesn;t do that nifty slow drop down thing you;ve done though. That is really very clever.

[superninjagoat]

It looks reasonably good in Safari. The only problem is that the 'friends' menu item wraps onto a second line and appears underneath 'future students'.

I think the "friends" problem has to do with font-size issues between platforms. In order to avoind box-model problems, and nested display:block items, I've had to use left and right padding on the link text. That's a long way of saying that font sixe changes the size of the buttons. :). I wonder if white-space:nowrap will fix that? I'll play with that tomorrow ...


Have you seen this drop down menu?

http://www.alistapart.com/articles/dropdowns/

Yes, I have, and I studied it in creating my menus. However, I couldn't figure our how to make the slide work. But looking over the code again, I think it may help me with my event handling. Another game for tomorrow ...


It's similar in concept to what you already have (using javascript and css to modify the style and behaviour of a list) but is designed so that the javascript is kept out of the body code, which keeps things a little neater and tidier.

It doesn;t do that nifty slow drop down thing you;ve done though. That is really very clever.

It is very elegant. My js skills are so basic; seeing elegant code like that makes me drool. But I'm glad you liked the slide. btw, how long does the dropdown take on your machine. It's snappy on IE (I'd say the first menu drops is a little less than a second.), but slow on NS (about three times as long). NS is notoriously slow with setTimeouts. So, how is it in Safari?

[DCKiwi]

In safari its not exactly snappy but it isn;t achingly slow either it. It sort of gently pushes down.