Вопрос о лучших практиках:Современное меню с подразделами и альтернативными состояниями страницы
-
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 за ними легко следить, а язык очень прост в изучении.Начните читать до конца и попробуйте.
Удачи вам!