Приветствую, дорогой читатель. Хочу в этот топике поделиться классным простым вертикальным выпадающим с левого бока многоуровневым меню для сайта. Приведу небольшую инструкцию как подключить это замечательное меню на сайте:
1. Скачиваем файлы сайта
2. Подключаем стили, скрипты и шрифты
Это подключение всех необходимых библиотек и шрифта. Если вам не нужен такой шрифт — просто не подключайте его
3. Подключаем style.css
Можно подключить непосредственно файл css, вставив внутрь тега
а можно просто вставить необходимый css код в уже существующий файл
Если вы всё сделали правильно, то у вас должна появиться иконка, нажав на которую с левого боку плавно выйдет вертикальное двухуровнвое меню. Успехов в разработке. Пока
Использование JS в меню дает гарантию работы больше, чем CSS, поэтому это вертикальное выпадающее меню работает даже в браузере мобильного телефона. Удобное и работающее во всех браузерах. Уверен, такое выпадающее меню Вы и искали.
Цветовая схема вертикального меню легко редактируется в CSS, данное оформление продумано для сайтов с темным оформлением.
JavaScript
указывайте ровно столько подпунктов, сколько хотите использовать. Если, например, Вы хотите использовать 6 подпунктов, указывайте их все:
CSS
#m_body li ul < display: none; > #m_body li:hover ul, #m_body li.over ul < display: block; > #m_body < text-align:left; background:#222222; width: 200px; > #m_body a < display: block; width: 185px; padding-left: 15px; >
#m_body ul li a < color: #6F6F6F; text-decoration: none; font-size: 12px; font-family: Verdana; >
#m_body ul li a:hover < color:#FFFFFF; text-decoration: none; background:#2C2C2C; >
#m_body ul li ul li < border: 0; list-style-type: none; list-style-position: inside; background:#2681DC; border-bottom:1px solid #3C8FDF; >
#m_body ul li ul li a < color:#9ECAF4; >
#m_body ul li ul li a:hover < color:#FFFFFF; background:#2681DC; >
HTML
Раскрытие пунктов вертикального выпадающего меню (выпадение по-другому) осуществляется при клике на пункт, т.е. используется событие onclick. В случае же если хотите осуществить раскрытие при наведении, используйте mouseover.
Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.
У нас будет четыре основных раздела, в котором будут содержаться подпункты, при этом вся навигация будет по умолчанию свернутая, вы можете самостоятельно выбрать какой блок вам открыть или закрыть.
Для примера мы берем первый основной блок, который мы заключаем в общий класс, который будет содержать все разделы навигации, затем мы добавляем стилизацию иконкой, а также стили для текста и галочки-индикатора:
Затем мы добавляем подпункты, нам не нужно будет для каждого подпункта присваивать свои стили, нам было достаточно заключить все ссылки в единый класс. Не стоит забывать, что мы привели только один вариант разметки пункта из четырех.
Шаг 2. CSS
Стили будут простые, нам необходимо задать общие параметры окантовки, цветовой заливки основных пунктов и подпунктов, кроме этого мы добавляем стилизацию при наведении:
Также мы добавили элементы трансформации цвета при наведении курсора мыши. Что позволит нам более оживить навигацию и сделать ее более отзывчивой.
Шаг 3. JS
Теперь нам необходимо активировать наше меню, добавив ему функции управления мышью:
$(function() < var Accordion = function(el, multiple) < this.el = el || <>; this.multiple = multiple || false; var links = this.el.find('.link'); links.on('click', , this.dropdown) > Accordion.prototype.dropdown = function(e) < var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) < $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); >; > var accordion = new Accordion($('#accordion'), false); >);
Такая навигация станет отличным дополнением как для черного так и для светлого сайта, при этом можно легко манипулировать стилями и варировать функциями блоков.
Также не забываем про наши скрипты. В папке folder создаем папку js и помещаем в нее скрипт jquery-1.4.2.js, jquery.easing.1.3.js и script.js.
Чтобы наша страничка была не такой унылой, я создал для нее красочный фон. Для этого в папке folder необходимо создать папку img и поместить в нее файл font.jpg. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.
После того как Вы выполнили вышеуказанные действия, в окне Вашего браузера появится вот такая вот страничка:
Таким образом, мы создали вертикальное меню с помощью CSS, JQuery с выпадающими подпунктами. Для того чтобы увидеть подпункты меню, необходимо кликнуть на соответствующий пункт меню. Повторный клик по соответствующему пункту меню вернет его в исходное состояние.
Шаг 2.
Для того чтобы понять, как устроена работа данного меню, рассмотрим исходные коды файлов index.html, style.css и script.js.
Итак, рассмотрим файл index.html. А именно вот эту часть кода:
Она представляет собой в браузере пункт меню «ГЛАВНАЯ» с раскрывающимися подпунктами меню «Пункт1», «Пункт2», «Пункт3», «Пункт4».
Подпункты меню «Пункт1», «Пункт2», «Пункт3», «Пункт4» скрыты за счет свойства display: none;. Для того чтобы увидеть второй уровень меню Вам необходимо сделать один клик по пункту меню «ГЛАВНАЯ». После этого наше меню плавно раздвигается.
Данный эффект реализован при помощи ява-скрипта script.js.
Пункты меню «ФОТО», «ВИДЕО», «БЛОГИ», «ИГРЫ», «КОНТАКТЫ» реализованы аналогичным образом. Отличие друг от друга заключается в количестве подпунктов меню, поэтому их рассматривать мы не будем.
Также стоит обратить внимание на корректное подключение стилей и скриптов. Т.к. если неправильно подключить хотя бы один из скриптов, то наше меню работать будет не так, как нам нужно.
Файл style.css.
В этом файле я хочу обратить Ваше внимание на стили классов button и dropdown (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их: