Меню аккордеон для сайта на jQuery

Стильное меню аккордеон для сайта на jQuery с плавным раскрытием

Стильное, с современным "мобайл" дизайном, меню аккордеон на jQuery. Меню стилистически полностью готово к использовании на сайте. Я бы даже сказал по другому: от дизайна этого меню аккордеона можно отталкиваться в создании дизайна сайта. Меню похоже на навигацию мобильного приложения. Со вкусом подобраны и иконки к разделам меню, а точнее их вставка в дизайн, как бы выгравирование.

Установка этого меню на сайт:

1. Качаем архив

2. Заливаем в корень сайта папки js, images, css, fonts

3. Подключаем стили и js: вставляем в <head> следующий код:

<link rel="stylesheet" href="css/styles.css" type="text/css" />	
<link rel="stylesheet" href="css/jquery-tool.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>	
<script type="text/javascript" src="js/jquery.tools.min.js"></script>	
<script type="text/javascript" src="js/main.js"></script>

4. Вставляем html код в то место, где хотите видеть это меню аккордеон:

				<!-- Start Freebie -->				
<ul class="expmenu">					
<li>						
<div class="header">							
<span class="label" style="background-image: url(images/messages.png);">Messages</span>							
<span class="arrow up"></span>						
</div>						
<ul class="menu">							
<li>Notification Settings</li>							
<li class="selected">Email Alerts</li>							
<li>Privacy Settings</li>						
</ul>					
</li>					
<li>						
<div class="header">							
<span class="label" style="background-image: url(images/user.png);">User Controls</span>							
<span class="arrow up"></span>						
</div>						
<ul class="menu">							
<li><input type="range" name="range" min="0" max="100" value="35" style="width: 100%;" /></li>						
</ul>					
</li>					
<li>						
<div class="header">							
<span class="label" style="background-image: url(images/pc.png);">Screen Settings</span>							
<span class="arrow down"></span>						
</div>						
<ul class="menu" style="display:none">							
<li>Your settings</li>						
</ul>					
</li>					
<li>						
<div class="header">							
<span class="label" style="background-image: url(images/search.png);">Search</span>						
</div>					
</li>				
</ul>

Меню готово! Кстати в сборке есть бонус: стили и изображения к вертикальному ползунку range! Ползунок получился в стиле apple. Да и вообще весь дизайн меню напоминает интерфейс iOS.

Незабываем подписываться на группу в контакте - там очень удобно следить за обновлениями на этом сайте. Так сказать в счет благодарности :))) Всего доброго!!!

Похожие статьи