Best Practices Domanda: Menu moderno con DIV Sub e si alternano Pagina Uniti

Question

Un saluto! Sono interessato al vostro feedback per quanto riguarda le migliori pratiche per la gestione di un sistema di menu sito Web utilizzando metodi moderni (jQuery?).

Il vecchio modo (sul posto al momento):

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

Come si può vedere ogni link di nav mostra e nasconde varie DIV (menu secondari) onmouseover base. Ogni pagina del sito deve avere un diverso sotto-menu iniziale / stato DIV quindi devo onmouseover ulteriore trigger collegato a vari div quindi se il visitatore si muove il mouse per altre parti della pagina, il menu stati originali 'a scatto' indietro:

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

So che i miei colpi metodologia e ci sono altre migliori metodi / tecniche per la gestione di questo.

In sintesi, sto cercando:

1) Una gestione centralizzata del codice del sistema di menu (sto usando CONTENERE ora che spero è propria) 2) Un metodo migliore per gestire i mouseovers e la visualizzazione del sottomenù. 3) un metodo migliore di gestire la 'scatto' effetto indietro quando il mouse viene spostato lontano dalla zona menu.

Grazie in anticipo per il vostro feedback! Hanno un grande giorno!

Answer 1

Si dovrebbe provare a utilizzare jQuery e dando ad ogni voce di menu una classe invece di inquinare l'markup con un sacco di onclicks.

Utilizzando jQuery, si può semplicemente utilizzare la classe o l'ID di ogni voce di menu e scrivere la funzionalità per le mouseovers, clic, ecc .. in una funzione di jQuery, la bellezza di che separerà i comportamenti fuori dal markup semantico in cui è attualmente fuori luogo.

http://docs.jquery.com/Tutorials sono facili da seguire e la lingua è molto facile da imparare. Potrai iniziare a leggere attraverso e avere un andare.

In bocca al lupo!