0

ご挨拶！最新の方法 (jQuery?) を使用して Web サイトのメニュー システムを処理するためのベスト プラクティスに関するフィードバックをお待ちしています。

古い方法 (現在の場所):

<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 (サブ メニュー) を表示および非表示にします。サイトの各ページには異なる初期サブメニュー/DIV 状態が必要なので、さまざまな DIV に接続された onmouseover トリガーを追加して、訪問者がマウスをページの他の部分に移動すると、元のメニューに「スナップ」状態が戻ります。

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

私は自分の方法論がうまくいかないことを知っており、これを処理するための他のより良い方法/テクニックがあります。

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

1) メニュー システム コードの集中管理 (私は現在 INCLUDE を使用していますが、これが適切であることを願っています) 2) マウスオーバーとサブメニューの表示を処理するためのより良い方法。3) マウスがメニュー領域から離れたときの「スナップ」効果を処理するより良い方法。

フィードバックをお寄せいただきありがとうございます。すてきな一日を！

4

1 に答える 1

0

大量のオンクリックでマークアップを汚染するのではなく、jQuery を使用して各メニュー項目にクラスを与えるようにしてください。

jQuery を使用すると、各メニュー項目のクラスまたは ID を使用するだけで、マウスオーバー、クリックなどの機能を jQuery 関数に記述できます。jQuery 関数の美しさにより、現在見当違いのセマンティック マークアップから動作が分離されます。

http://docs.jquery.com/Tutorialsのチュートリアルは簡単に理解でき、言語は非常に簡単に習得できます。読み始めて、試してみてください。

幸運を！

于 2009-09-23T13:11:54.070 に答える