Эффект выделения меню — это метод дизайна, который часто используется на каждой веб-странице. Он может эффективно сообщать пользователям, в каком столбце они сейчас находятся. Этот метод я также часто использую. Обычно веб-страницы имеют как минимум два уровня меню: первый — это общее меню панели навигации вверху, а второй — меню навигации по категориям слева. Обычно требуется, чтобы текущий статус мог быть записан и в меню второго уровня, когда выделено меню первого уровня.
Если область заголовка, содержащая верхнее меню, фиксирована, то есть ее не нужно каждый раз перезагружать, в этом случае ее легко реализовать с помощью чистого CSS или JS, но сегодня я не буду об этом говорить. Сегодня мы говорим о том, что меню первого уровня и меню второго уровня динамически загружаются на каждой странице , то есть загружаются как пользовательские элементы управления. В этом случае сложно записать выделенный статус меню.
Конечно, вы можете сказать, что вы можете использовать файлы cookie для записи последнего выделенного состояния, записанного при загрузке каждой страницы. Да, это действительно может быть записано, но этот метод вызовет проблемы в некоторых сложных приложениях, содержащих множество подстраниц. много путаницы и неприятностей для пользователей. Например, во время жизненного цикла файла cookie при повторном открытии проекта жизненный цикл файла cookie не завершился полностью. Он также записывает последнее сохраненное состояние, и адрес страницы в это время изменился, поэтому в настоящее время выделенное меню указывает на страницу. to — это не то, что хочет видеть пользователь. Практика доказала, что независимо от того, как долго вы устанавливаете жизненный цикл этого файла cookie, он не может полностью решить проблему злонамеренного обновления страницы пользователями. Это действительно плохо!
Так есть ли лучший способ решить эту ситуацию?
Ответ: да. Мы знаем , что самый идеальный способ решить эту проблему — явно установить стиль подсветки текущего меню в соответствии с URL-адресом страницы при загрузке каждой страницы . Это прекрасно решает проблемы такого типа, и таким образом, независимо от того, насколько злонамеренно пользователь нажимает кнопку обновления, выделенное состояние остается неизменным. Если вы знаете принцип, реализовать его будет гораздо проще.
структурный слой
Слой структуры меню первого уровня:
<ul id="меню">
<li><a href="default.html">Главная</a></li>
<li><a href="clothing.html">Принадлежности для одежды</a></li>
<li><a href="house.html">Мебель для дома</a></li>
<li><a href="cosmetic.html">Косметика</a></li>
</ul>
Видно, что в этом меню первого уровня адрес ссылки обычно не имеет значения параметра. Структурный слой вторичного меню:
<ul id="другоеменю">
<li><a href="house.html?pId=2&sId=1">Предметы первой необходимости</a></li>
<li><a href="house.html?pId=2&sId=2">Маленькая мебель</a></li>
<li><a href="house.html?pId=2&sId=3">Электрические аксессуары</a></li>
<li><a href="house.html?pId=2&sId=4">Комплект постельного белья</a></li>
<li><a href="house.html?pId=2&sId=5">Свадебное постельное белье</a></li>
<li><a href="house.html?pId=2&sId=6">Детское постельное белье</a></li>
<li><a href="house.html?pId=2&sId=7">Ремесленные украшения</a></li>
<li><a href="house.html?pId=2&sId=8">Инструменты для очистки</a></li>
<li><a href="house.html?pId=2&sId=9">Уборка дома</a></li>
</ul>
В отличие от меню первого уровня, мы добавляем два значения параметра к адресу ссылки в меню второго уровня. Параметр pid указывает на порядковый номер верхнего меню первого уровня, а sId — порядковый номер. само меню. Мы устанавливаем два разных идентификатора для общего контейнера ul этих двух меню. Их нужно вызывать в JS, поэтому они не должны отсутствовать.
слой стиля
Что касается стиля, то на самом деле в нем нет ничего особенного. Вы можете установить тот стиль, который вам нужен. Единственное, что нужно отметить, это то, что нам нужно установить три стиля статуса выделения меню отдельно для динамического вызова с помощью JS. .
/*Три настройки стиля для меню первого уровня*/
#menu li a.normal{background:#fff;}//Обычный стиль
#menu li a.over{background:#00ff00;} //Стиль прокрутки
#menu li a.cur{background:#ff0000;color:#fff;} //Выделить стиль
/*Три настройки стиля для вторичного меню*/
#othermenu li a.normal{background:#fff;} //Обычный стиль
#othermenu li a.over{background:#AA7F00;color:#fff;} //Стиль прокрутки
#othermenu li a.cur{background:#7F0000;color:#fff;} //Выделить стиль