Вопрос о лучших практиках:Современное меню с подразделами и альтернативными состояниями страницы

StackOverflow https://stackoverflow.com/questions/1465892

  •  13-09-2019
  •  | 
  •  

Вопрос

Приветствую!Мне интересны ваши отзывы относительно лучших практик работы с системой меню веб-сайта с использованием современных методов (jQuery?).

Старый способ (действующий в настоящее время):

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

Как вы можете видеть, каждая навигационная ссылка показывает и скрывает различные разделы (подменю) на основе mouseover.Каждая страница на сайте должна иметь разное начальное состояние подменю / DIV, поэтому у меня есть дополнительные триггеры onmouseover, подключенные к различным разделам, поэтому, если посетитель перемещает мышь на другие части страницы, исходное меню "привязывается" обратно:

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

Я знаю, что моя методология неудачна, и есть другие лучшие методы для решения этой проблемы.

Подводя итог, я ищу:

1) Централизованное управление системным кодом меню (я использую INCLUDE now, который, я надеюсь, является правильным) 2) Лучший метод для обработки наведения курсора мыши и отображения подменю.3) Лучший способ обработки эффекта "привязки" назад при удалении мыши от области меню.

Заранее спасибо за ваш отзыв!Хорошего вам дня!

Это было полезно?

Решение

Вам следует попробовать использовать jQuery и присвоить каждому пункту меню класс вместо того, чтобы загрязнять разметку множеством onclicks.

Используя jQuery, вы можете просто использовать класс или идентификатор каждого пункта меню и написать функциональность для наведения курсора мыши, щелчков и т.д..в функции jQuery, красота которой позволит отделить поведение от семантической разметки, где оно в данный момент неуместно.

учебные пособия по адресу http://docs.jquery.com/Tutorials за ними легко следить, а язык очень прост в изучении.Начните читать до конца и попробуйте.

Удачи вам!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top