фев 13 2013
JQuery горизонтальное выпадающее меню
Предлагаю вашему вниманию красивое высокотехнологичное горизонтальное выпадающие меню с использованием jQuery фреймворка, созданное специалистами apycom.com.
Изначально меню доступно в двух вариантах:
- Бесплатный – меню можно использовать абсолютно бесплатно для некоммерческих целей, но есть одно ограничение: файл с jQuery скриптами частично зашифрован. Сделано это не просто так. При загрузке страницы скрипт проверяет наличие оригинального копирайта – ссылки на сайт apycom.com. В случае, если веб-мастер удалит копирайт – в горизонтальном меню появляется область с активной ссылкой на сайт разработчиков, что явно портит внешний вид меню и добавляет сквозную исходящую ссылку
- Платный – за 40$ вы получите меню в шести цветовых стилях с полным, незашифрованным исходным кодом
Особенности меню:
- Полная совместимость с различными браузерами
- Меню функционирует, даже если в настройках браузера отключен 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 меню представлено для скачивания с расшифрованным скриптом, без необходимости обязательного проставления копирайта.
