В последнее время я был очень занят и уже несколько месяцев не занимался своим блогом. Сейчас разберу недавно сделанный в проекте пример меню и поделюсь им.
Наиболее часто используемым макетом в серверной части или системе открытого доступа часто является полноэкранный макет, который обычно представляет собой макет с тремя строками и двумя столбцами вверху, посередине и внизу, с заголовком, нижним колонтитулом, левым меню и рамкой ifame. страница справа. Поэтому часто используется складное вторичное меню. Этот пример предназначен для реализации такого более общего, полностью совместимого и подсвечиваемого складного меню вторичного буфера.
Функции :
недостаток :
Давайте вкратце поговорим о некоторых простых идеях и проблемах, возникающих при составлении такого меню.
Обычно при создании эффекта мой производственный процесс заключается в том, чтобы сначала отрисовать содержимое слоя структуры HTML, затем написать стиль, а затем добавить некоторые эффекты, такие как специальные эффекты JS и так далее. Я не знаю, какая модель процесса у экспертов.
Структурный слой :
Идея структурного слоя обычно основана на перцептивном понимании, обычно с рендерингом, и на основе этого рендеринга строится наиболее краткая структура HTML. Как показано на рисунке выше, первое впечатление, которое приходит на ум, — это использование неупорядоченного списка UL, но… это двухуровневый вложенный список. Это первый вопрос, который нам нужно рассмотреть.
Таким образом, структура должна выглядеть так:
Если есть меню второго уровня, это вложенная структура UL. Если меню второго уровня нет, оно выглядит следующим образом:
<ul class="меню">
<li><a href="#none">Пункты меню первого уровня</a></li>
</ul>
Конечно, вы также можете использовать метод упорядоченного списка dl-dt-dd для создания этой вложенной структуры, в зависимости от вашей реальной ситуации.
При самом оригинальном структурном слое нужно добавить несколько необходимых хуков для CSS и JS для управления стилями и эффектами. Я всегда был против метода добавления большого количества названий классов, которые будут увеличивать размер страницы, так что максимально. оптимизированный. Подход заключается в том, чтобы применить одно или два необходимых имени класса к родительскому контейнеру, а затем использовать дочерний селектор (группу) для установки различных персонализированных параметров в таблице стилей. Сколько имен классов в приведенной выше структуре вы могли бы использовать для определения всех стилей?
Мой подход заключается в использовании только трех имен классов для управления всеми отображениями стилей. Один — это UL верхнего уровня, определенный как class="menu", другой — контейнер меню второго уровня, то есть вложенный UL определяет class="level2", и, наконец, элемент меню первого уровня. li определяет class="level1" , с помощью этих трех хуков вы можете управлять стилем всей структуры.
Уровень представления :
Настройка таблицы стилей очень проста. Единственное, что следует отметить, это то, что для того, чтобы облегчить JS управление отображением и скрытием вторичного меню и запись статуса выделения текущего выбранного элемента, я не использую псевдо-наведение. -class для достижения эффекта выдвижения и выдвижения мыши. И используйте JS для его имитации. Ключевые коды для управления стилями с помощью JS следующие:
Стиль меню первого уровня
/*Стиль трех состояний меню первого уровня для вызовов JS*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) без повтора слева вверху;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
Дополнительный стиль меню
/*Стиль с тремя состояниями вторичного меню для вызовов JS*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) без повтора слева вверху;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
Поведенческий уровень :
Как упоминалось ранее, мы не определили эффект трех состояний меню в таблице стилей, поэтому нам нужно привязать события onmouseover, onmouseout и onclick к каждому элементу меню, чтобы имитировать этот эффект. На уровне структуры мы не определяли идентификатор этого общего контейнера, а только определяли имя класса, поэтому мы добавили расширенный метод getElementsByClassName() в JS (спасибо моему другу Ситу Чжэнмей), чтобы получить этот объект на основе класса имя. Используйте замыкания циклов, чтобы связать эти три события.
Я не буду подробно объяснять код по отдельности. Комментарии в демо-версии очень понятны. Загрузите его на свой локальный компьютер для просмотра.
Если у вас есть какие-либо вопросы, пишите и обсуждайте их в этом блоге. Желаю вам удачного использования!
<li><a href="#none">Пункты меню первого уровня</a>
<ул>
<li><a href="#none">Пункты меню второго уровня</a></li>
</ul>
</li>