ベストプラクティスの質問：サブdiv要素と代替ページ国と現代のメニュー

Question

ご挨拶！私は、近代的な方法を使用してWebサイトのメニューシステムを処理するためのベストプラクティスに関するあなたのフィードバックに興味を持っています（jQueryの？）ます。

（代わりに現在は）古い方法：

<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>

あなたはそれぞれのナビゲーションリンクのショーを見て、様々なdiv要素（サブメニュー）に基づくonmouseover属性を隠すことができたよう。サイト内の各ページには、異なる初期サブメニュー/ DIVの状態を持っている必要がありますので、私は訪問者が戻ってページの他の部分、元のメニューの状態「スナップ」にマウスを移動するので、もし追加のonmouseoverは、様々なdiv要素に接続されてトリガーがあります

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

私は私の方法論が吹くを知っていて、これを処理するための他のより良い方法/技法があります。

要約すると、私が探しています：

1）メニューシステムコードの集中管理（私は適切であると思いますこれは今INCLUDE使用しています） 2）マウスオーバーを扱うためのより良い方法とサブメニューの表示が。 3）処理のより良い方法マウスがメニュー領域から離れるように移動させるバック効果を「スナップ」。

あなたのフィードバックを事前に感謝！素晴らしい一日を！

Answer 1

あなたは、jQueryのを使用し、各メニュー項目にクラスを与える代わりにonclicksの負荷でマークアップを汚染しようとする必要があります。

のjQueryを使用して、あなたは、単に各メニュー項目のクラスやIDを使用し、マウスオーバーするための機能を書くことができ、それがどこにあるかなどが... jQueryの機能では、美しさは、そのセマンティックマークアップのうち、行動を分離するクリック現在、見当違います。

http://docs.jquery.com/Tutorials のでチュートリアルは続くが容易であり、言語を学ぶことは非常に簡単です。読ん起動し、GOを持っています。

グッドラック！