Горизонтальное выпадающее меню на jquery
Опубликовано: 01.09.2018
Горизонтальное выпадающее меню
Изначально меню доступно в двух вариантах:
Бесплатный – меню можно использовать абсолютно бесплатно для некоммерческих целей, но есть одно ограничение: файл с jQuery скриптами частично зашифрован. Сделано это не просто так. При загрузке страницы скрипт проверяет наличие оригинального копирайта – ссылки на сайт apycom.com. В случае, если веб-мастер удалит копирайт – в горизонтальном меню появляется область с активной ссылкой на сайт разработчиков, что явно портит внешний вид меню и добавляет сквозную исходящую ссылку Платный – за 40$ вы получите меню в шести цветовых стилях с полным, незашифрованным исходным кодом
Особенности меню:
Создание выпадающего меню (CSS, JQuery)
Полная совместимость с различными браузерами Меню функционирует, даже если в настройках браузера отключен javascript (работает на CSS) Оптимизировано под поисковые системы Понятная структура меню в виде неупорядоченного списка (UL LI) и стандартных HTML тегов Простоя установка и обновление Фантастические эффекты анимации и переходов Несколько цветовых схем Полностью настраиваемый дизайн при помощи CSS Работает на JQuery Небольшой размер – 22 Kb в несжатом виде
Цветовая гамма представлена шестью вариантами:
Простое выпадающее меню
Для установки меню необходимо скопировать графические файлы, jQuery библиотеки и CSS файлы в соответствующие места на вашем сайте.
Подключаются библиотеки стандартно:
<link type="text/css" href="menu.css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="menu.js"></script>
HTML структура меню выглядит следующим образом:
<div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Главная</span></a> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.3</span></a> <ul> <li><a href="#"><span>Sub Item 1.3.1</span></a></li> <li><a href="#"><span>Sub Item 1.3.2</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul> </li> <li><a href="#" class="parent"><span>Информация</span></a> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <ul> <li><a href="#"><span>Sub Item 1.1</span></a></li> <li><a href="#"><span>Sub Item 1.2</span></a></li> </ul> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <ul> <li><a href="#"><span>Sub Item 2.1</span></a></li> <li><a href="#"><span>Sub Item 2.2</span></a></li> </ul> </li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul> </li> <li><a href="#"><span>Помощь</span></a></li> <li class="last"><a href="#"><span>Контакты</span></a></li> </ul> </div> Данное jQuery меню представлено для скачивания с расшифрованным скриптом, без необходимости обязательного проставления копирайта.