Mejores Prácticas Pregunta: Menú moderna con DIVs y Sub alternativo página Unidos

Question

Saludos! Me interesa conocer su opinión sobre las mejores prácticas para el manejo de un sistema de menús sitio web utilizando métodos modernos (jQuery?).

La forma más antigua (en su lugar en la actualidad):

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

Como se puede ver cada enlace de navegación muestra y oculta diferentes menús DIVs (sub) onmouseover basada. Cada página del sitio debe tener un estado sub-menú inicial / DIV diferente, así que tengo onmouseover adicional desencadena conectado a varios DIVs por lo que si el visitante se mueve el ratón para otras partes de la página, el menú estados originales 'broche de presión atrás:

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

Sé que mis golpes metodología y hay otros mejores métodos / técnicas para el manejo de este.

Para resumir, Busco:

1) Una gestión centralizada del código del sistema de menú (estoy usando incluyen ahora que espero que sea adecuada) 2) Un mejor método para el manejo de los mouseovers y la visualización de los submenús. 3) Un mejor método de manejo de la 'Snap' efecto hacia atrás cuando el ratón se mueve fuera de la zona del menú.

Gracias de antemano por su respuesta! Tiene un gran día!

Answer 1

debería intentar usar jQuery y dando a cada elemento de menú una clase en lugar de contaminar el marcado con un montón de onclicks.

El uso de jQuery, sólo tiene que utilizar la clase o la identificación de cada elemento del menú y escribir la funcionalidad de los mouseovers, clics, etc .. en una función jQuery, la belleza de la cual se separará comportamientos fuera de la semántica de marcado donde está Actualmente fuera de lugar.

http://docs.jquery.com/Tutorials son fáciles de seguir y el lenguaje es muy fácil de aprender. Empieza a leer a través y tener un ir.

Buena suerte!