Les meilleures pratiques Question: Menu moderne avec sous DIVs et Alternate page États

Question

Bonjour! Je suis intéressé à vos commentaires sur les meilleures pratiques pour la manipulation d'un système de menu du site en utilisant des méthodes modernes (jQuery?).

L'ancienne (en place actuellement):

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

Comme vous pouvez le voir chaque lien nav affiche et masque divers (VRD sous-menus) de base onmouseover. Chaque page du site doit avoir un état sous-menu / DIV initial différent donc j'ai onmouseover supplémentaires déclencheurs connecté à différents DIVs si le visiteur déplace la souris à d'autres parties de la page, « pression » les états de menu d'origine de retour:

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

Je sais que mes coups de méthodologie et il y a d'autres meilleures méthodes / techniques pour la manipulation de ce.

Pour résumer, je suis à la recherche:

1) Une gestion centralisée du code du système de menu (j'utilise maintenant COMPRENDRE que j'espère bon) 2) Une meilleure méthode pour traiter les mouseovers et l'affichage des sous-menus. 3) Une meilleure méthode de manipulation de l'effet de retour « casser » lorsque la souris est déplacée loin de la zone de menu.

Merci d'avance pour vos commentaires! Bonne journée!

Answer 1

Vous devriez essayer d'utiliser jQuery et donner à chaque élément de menu une classe au lieu de polluer le balisage avec des charges de onclicks.

En utilisant jQuery, vous pouvez simplement utiliser la classe ou l'identifiant de chaque élément de menu et d'écrire la fonctionnalité pour les mouseovers, les clics etc .. dans une fonction jQuery, la beauté qui séparera les comportements hors du balisage sémantique où il est actuellement mal placé.

les tutoriels à http://docs.jquery.com/Tutorials sont faciles à suivre et la langue est très facile à apprendre. Commencez à lire et à travers un go.

Bonne chance!