Горизонтальное выпадающее меню на jquery

Опубликовано: 01.09.2018

видео Горизонтальное выпадающее меню на jquery

Выпадающее меню на jQuery

Горизонтальное выпадающее меню

Предлагаю вашему вниманию красивое высокотехнологичное горизонтальное  выпадающие меню с использованием jQuery фреймворка , созданное специалистами apycom.com. 

Изначально меню доступно в двух вариантах:



Бесплатный – меню можно использовать абсолютно бесплатно для некоммерческих целей, но есть одно ограничение: файл с 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 меню представлено для скачивания с расшифрованным скриптом, без необходимости обязательного проставления копирайта.

 

IRC (Internet Relay Chat)
rss