Best Practices Question: Modern Menu with Sub DIVs and Alternate Page States

Question

Greetings! I am interested to your feedback regarding best practices for handling a website menu system using modern methods (jQuery?).

The old way (in place currently):

<div id="menu">
  <ul>
    <li class="navHotel"><a href="#" onmouseover="MM_showHideLayers('hotel','','show','tour','','hide','location','','hide','attractions','','hide','dining','','hide')">hotel</a></li>
    <li class="navTour"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','show','location','','hide','attractions','','hide','dining','','hide')">take a tour</a></li>        
    <li class="navLocation"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','hide','location','','show','attractions','','hide','dining','','hide')">location</a></li>
    <li class="navAttractions"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','hide','location','','hide','attractions','','show','dining','','hide')">attractions</a></li>
    <li class="navDining"><a href="#" onmouseover="MM_showHideLayers('hotel','','hide','tour','','hide','location','','hide','attractions','','hide','dining','','show')">dining</a></li>
  </ul>

As you can see each nav link shows and hides various DIVs (sub menus) based onmouseover. Each page in the site must have a different initial sub-menu/DIV state so I have additional onmouseover triggers connected to various DIVs so if the visitor move the mouse to other parts of the page, the original menu states 'snap' back:

<div id="leftColumn1" onmouseover="MM_showHideLayers('hotel','','hide','location','','hide','attractions','','hide','dining','','hide')">

I know my methodology blows and there are other better methods/techniques for handling this.

To summarize, I'm looking for:

1) A centralized management of the menu system code (I'm using INCLUDE now which I hope is proper) 2) A better method for handling the mouseovers and the display of the submenus. 3) A better method of handling the 'snap' back effect when the mouse is moved away from the menu area.

Thanks in advance for your feedback! Have a great day!

Answer 1

You should try using jQuery and giving each menu item a class instead of polluting the markup with loads of onclicks.

Using jQuery, you can simply use the class or id of each menu item and write the functionality for the mouseovers, clicks etc.. in a jQuery function, the beauty of which will separate behaviours out of the semantic markup where it is currently misplaced.

the tutorials at http://docs.jquery.com/Tutorials are easy to follow and the language is very easy to learn. Start reading through and have a go.

Good luck!