Раскрывающееся меню часто встречается в моей разработке, но не нужно переписать проект. Хотя его модифицировать это просто, но очень трудно, я все еще относительно ленив. Сегодня у меня есть время, чтобы организовать меню в моей предыдущей разработке проекта и написать общую версию. Мне не нужно быть таким неприятным в будущем.
Функции
Меню, составленное сегодня, разработано JQUERY+CSS со следующими характеристиками:
1. Сильная универсальность
Была проблема с раскрывающимся меню, которое я использовал раньше, и основную навигацию и подменю должны быть установлены отдельно. Например, меню второго уровня-это класс = "First_menu", меню третьего уровня-class = "second_menu" ... и так далее. Существует проблема с этим методом письма, которая заключается в том, что он не способствует программистам, выполняющим выходной сигнал. Это меню нужно только ввести стиль CSS, без необходимости определить многоуровневое меню.
2. Красивые автоматические инструкции по вызову.
В прошлом мы добавляли раскрывающийся класс в раскрывающееся меню вручную. Теперь нам нужно только определить стиль раскрывающегося эффекта в CSS, и код автоматически будет искать раскрывающееся меню и добавить стрелки индикаторов;
3. Простой звонок
Список вывода программиста прост и не требует большого суждения, просто вызовите данные меню рекурсивно.
выполнить
1. HTML -код
Во -первых, мы выводим данные меню на странице, которая состоит из UL и LI, чтобы сформировать список меню. Конкретный код структуры выглядит следующим образом:
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Menu One </a> <ul> <li> <a href = "#"> Rock Coaster </a> </li> <li> <a href = "#"> volcanic eruption </a> </li> <li> <ali> Bird </a> </li> </li> </li> <li> <a href = "#"> Меню два </a> <ul> <li> <a href = "#"> о нас </a> <ul> <li> <a href = "#"> Географический гео </a> <ul> <li> <a href = "#"> Flyation </li> <//</href = "#"> летающий. href = "#"> рождение и вечность </a> </li> <li> <a href = "#"> href = "#"> Успешное </a> </li> </li> </li> <li> <a href = "#"> База данных </a> <li> <li> <a href = "#"> таблица Database </a> <li> <li> <li> <a href = "#" href = "#"> шифрование данных </a> </li> <li> <a href = "#"> моделирование данных </a> </li> </li> </li> <li> <a href = "#"> c камера </a> </li> </li> </li> </li> <li> <a href = "#"> test Products </li> </li> <li> <a href = "#"> test Products </li> </li> <li> <a href = " </li> </ul>
Некоторые основные HTML -коды просты и не должны объяснять значение кода. Они подчеркивают структуру кода: являются ли второй уровень, третий уровень или несколько меню уровня в основном вложенные UL; Название листа стиля также очень одинокое, а подменю - это стиль «sub_menu», который очень способствует вызовам цикла программы.
2. Стиль CSS
Код стиля CSS также очень прост, конкретный код заключается в следующем:
{Text-Decoration: нет; } ul, li {list-style: none; поля: 0; Заполнение: 0; }/*Меню определения*/. Menue li {founale:#111; Цвет: #fff; Высота: 30px; высота линии: 30px; позиция: относительно; Плавание: осталось; Право маржи: 5px; Ширина: 100px; Текст-альбом: Центр; Семейство шрифта: Arial, Helvetica, Sans-Serif; } .Muenge li a {color: #fff; размер шрифта: 14px; дисплей: блок; }/* Стиль раскрывающегося меню*/ul.sub_menu {position: Absolute; ширина: 100px; дисплей: нет; Z-Index: 999; } .Muence li ul.sub_menu li {founale: none; Цвет:#555; размер шрифта: 12px; Пограничный подъем: 1px #333 твердое вещество; позиция: относительно; Ширина: 100px; Высота: 30px; } .Muess li ul.sub_menu li.last {border-bottom: none; } /*JS добавит этот класс к последнему LI, удалите эффект пограничного пута* /. Menue li ul.Sub_menu li a {founale:#222; Цвет:#888; дисплей: блок; высота: 30px; } .MUENGE LI UL.SUB_MENU LI A: HOVER, .MUENGE LI UL.SUB_MENU LI A.NOW {ФОН:#F90; Цвет: #fff;}. Menue li.now, .muenge li.current {фон:#f60; color: #fff;}/*Если есть класс, добавленный класс. Предпосылки: URL (Arrow.png) без повторного правления; Право накладки: 15px;}/*Стрелка основной навигации внизу*/. Menue li a.hasmenu {founal: url (row.png) без повторного правого; Право накладки: 15px; фоновая позиция: справа -30px;}/*Стрелка раскрывающегося меню-это правильно*/. no-repeat right top;}. menue li ul.sub_menu li a.hasmenu: Hover {ancome:#f90 url (row.png) без повторного правого вершины; Цвет: #ffff;}Здесь я буду подчеркнуть только две меры предосторожности:
1. Разница между абсолютным и относительным в положении
Абсолютно: абсолютное позиционирование, CSS написана как «Положение: абсолютное;», и его позиционирование разделено на две ситуации, следующим образом:
A. Если вверху, справа, внизу и слева не установлены, по умолчанию находится исходная точка на основе «исходной точки области контента» родителя.
B. Есть случаи, когда установлены сверху, справа, внизу и слева. Есть две ситуации следующим образом:
(1). Родитель не имеет атрибута позиции, а верхний левый угол браузера (то есть тело) позиционируется как «исходная точка координат». Положение определяется верхней, правой, нижней и левой атрибутами.
(2). Родитель имеет атрибут позиции, а «Координатная исходная точка» родителя - исходная точка.
Относительно: относительное позиционирование, CSS написана как «позиция: относительно;», ссылаясь на «оригинальную точку области контента» родителя как исходную точку, а без родителя - «исходная точка области контента» тела в качестве исходной точки. Положение определяется верхней, правой, нижней и левой атрибутами, и имеет функцию «растяжения или оккупации высоты».
Вышеупомянутые два различия очень важны и являются очень распространенной техникой. Вы должны различить их. Я потратил впустую много времени в разработке и обнаружил проблемы. На самом деле, это вызвано этими двумя атрибутами.
2. Используйте фоновую позицию
Иногда, чтобы улучшить скорость веб -сайта и облегчить управление веб -сайтами, мы часто размещаем некоторые широко используемые маленькие картинки на большую картину. Когда CSS нуждается в соответствующих небольших изображениях, это может быть достигнуто с помощью этого метода. Пока мы понимаем, что это значит, это очень удобно звонить. Этот метод объясняет, что белая точка является функцией перехвата изображения, а детали использования следующие:
Грамматика:
Справочная позиция: длина || длина
Справочная позиция: позиция || позиция
Ценить:
Длина: процент | Значение длины, состоящее из номеров с плавающей запятой и идентификаторов единиц.
позиция: вверху | Центр | дно | слева | Центр | верно
иллюстрировать:
Устанавливает или получает местоположение фонового изображения объекта. Свойство фонового изображения должно быть указано в первую очередь. На этот атрибут не влияет настройки атрибута Attruit (Padding). Значение по умолчанию: 0% 0%. В настоящее время фоновое изображение будет расположено в верхнем левом углу области содержания, где объект не включает в себя патчи (прокладки). Если указано только одно значение, значение будет использоваться для горизонтальных координат. Ордината по умолчанию не будет 50%. Если указаны два значения, второе значение используется для ординаты. Если значение установлено в правый центр, поскольку правое, как значение горизонтальной оси, будет переоценить центр центра, фоновое изображение будет расположено вправо. Вот некоторые уравнения
Вершина слева, левая вершина эквивалентна 0% 0%.
Верх, верхний центр, центральная вершина эквивалентна 50% 0%.
Правый верх, верхний правый эквивалентен 100% 0%.
Слева, левый центр, левый центр эквивалентен 0% 50%.
Центр, центральный центр эквивалентен 50% 50%.
Правый, правый центр, центр справа эквивалентен 100% 50%.
Внизу слева дно эквивалентно 0% 100%.
Внизу, нижний центр, центральное дно эквивалентно 50% 100%.
Внизу справа, правое дно эквивалентно 100% 100%
3. JS -код
Это меню основано на jQuery, поэтому сначала вы должны представить базу кода jQuery, а затем написать следующий код JS для реализации раскрывающегося меню.
<script src = "js/jquery.min.js"> </script> <script> $ (document) .ready (function () {// set по умолчанию для навигации не имеет ничего общего с этим меню $ ("ul.m li.muenge_li: EQ (0)"). AddClas Для удаления последнего подчеркивания $ (". sub_menu"). Найдите ("li: последний ребенок"). addclass («Последний») // Трансф все LI, чтобы определить, включен ли подменю, если включена. if ($ (this) .find ("ul"). Length! = 0) {$ (this) .find ("a: первое"). addclass ("hasmenu")}}) // $ (".. Menue li"). Hover (function () {$ (this) .AdDClass ("теперь"); var menu = $ (this); menu.find ("ul.sub_menu: First"). Show (); sumenu.css ({left: "100px", top: "0px"}) $ (". sub_menu li"). Hover (function () {$ (this) .find ("a: First"). addClass ("Теперь") $. $ (this) .find ("a: First"). removeClass ("сейчас") $ (this) .find ("ul: First"). Hide ()});/*jquery menu end*/}) </script>Через вышеуказанные этапы реализуются общее многоуровневое меню. Приведенный выше код является накоплением моего ежедневного развития. Из -за моего ограниченного уровня может быть много ошибок. Я надеюсь, что мои коллеги будут критиковать и исправить или предлагать более оптимизированные коды для моей ссылки. Спасибо.
Приведенный выше код реализации универсального раскрывающегося меню Infinitus-это все контент, который я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.