[DHTML] Menu using prototype.js

[sujoykroy]

1) CODE TITLE:
How to build a DHTML Menu using prototype.js framework
2) AUTHOR NAME/NOTES:
Sujoy Kumar Roy
3) DESCRIPTION:
Using the robust framework like Prototype.js one can build DHTML menu with very ease.
4) URL TO CODE:
http://www.brightsoftsolutions.com/a...dhtml-menu.php


Happy coding.

[BYK]

Nice work but there are some issues which has to be improved as you say on the page.

For example you should consider adding an auto-hide feature with a timeout

[sujoykroy]

Sorry, i didn't visit the thread for quite some time. You are right, i realized that. But instead of a timeout, i added another event handler. Like below,

Event.observe(document,"mouseover",function(event){
  var elt = $(Event.element(event));
     if (!elt.descendantOf($('my_menu')) && $$('.selected_item').length>0) {
    $('my_menu').select('ul').invoke('hide');
    $$('.selected_item').invoke('removeClassName','selected_item');
     }        
}); 

This will track the mouseover events that occurs outside the drop menu and hide it.

[BYK]

I don't know if you have updated the example page but it does not seem to work. By the way the method you used is good but hiding the menus immediately is not very user-firendly in my opinion.

[sujoykroy]

The example page is not updated yet. But you can see an working example here
http://070suj.basil.hostingrails.com/

I will update the example page and post a update here.

[BYK]

Alright, and one more comment

I think you should make the sub menus appear a bit shifted. I mean they shouldn't appear on top of other main menu items, at least I should be able to see the beginnings of the main menu items.

It might be done with some margin I think, right?