Best Practices Frage: Modernes Menü mit Sub DIVs und Alternate Seite Staaten

Question

Viele Grüße! Ich bin auf Ihr Feedback in Bezug auf Best Practices interessiert eine Website Menüsystem mit Hilfe moderner Methoden für den Umgang mit (jQuery?).

Die alte Art und Weise (statt derzeit):

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

Wie Sie jeder NIW-Link zeigt sehen und versteckt verschiedene DIVs (Untermenüs) basiert Onmouseover. Jede Seite in der Website muss eine andere Anfang Untermenü / DIV Zustand, so habe ich zusätzliche Onmouseover verschiedene DIVs verbunden Trigger so, wenn der Besucher die Maus auf andere Teile der Seite, die ursprünglichen Menüs Staaten Snap 'bewegen zurück:

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

Ich kenne meinen Methodik Schläge und es gibt andere, bessere Methoden / Techniken, um dies für den Umgang mit.

Um es zusammenzufassen, ich suche:

1) Eine zentrale Verwaltung des Menüsystems Code (ich bin BEINHALTEN jetzt mit dem ich hoffe, die richtige ist) 2) Eine bessere Methode zur Handhabung der Mouseover und die Anzeige des Untermenüs. 3) Ein besseres Verfahren zur Handhabung des ‚Snap‘ zurück Effekts, wenn die Maus weg von dem Menübereich bewegt wird.

Vielen Dank im Voraus für Ihr Feedback! Machen Sie einen schönen Tag!

Answer 1

Sie sollten versuchen, mit jQuery und jedem Menüpunkt mit Lasten von onclicks eine Klasse statt verschmutzt die Markup geben.

Mit jQuery, können Sie einfach die Klasse oder die ID von jedem Menüpunkt verwenden und die Funktionalität für den per Mouse over schreiben, klickt etc .. in einer jQuery-Funktion, die Schönheit, dessen Verhalten aus dem semantischen Markup zu trennen, wo es ist zur Zeit fehl am Platz.

die Tutorials unter http://docs.jquery.com/Tutorials sind einfach zu folgen und die Sprache ist sehr einfach zu erlernen. Vorlesen starten durch und haben ein zu gehen.

Viel Glück!