Главная » Файлы » Прочие скрипты » jQuery
Красивое горизонтальное слайд меню с подменю с запоминанием положения на cookies через плагин pictureMenu на jQuery
23.06.14, 13:45:24

Скачать файл



Очень интересное горизонтальное меню на jQuery. В четвёртом и пятом примерах меню запоминает последний открытый пункт на куках

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link href="/css/jquery.pictureMenu.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery.pictureMenu.js" type="text/javascript"></script>
<script src="/js/jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {  
$(".MainMenu1").pictureMenu();  
$(".MainMenu2").pictureMenu({  
animateTime: 600,  
menuInactiveHide: 0.2,  
menuActiveWidth: 600,  
useMenuActiveWidth: true  
});  
$(".MainMenu3").pictureMenu({  
menuHeight: 200,  
menuInactiveHide: 0.5,  
menuBorder: 0,  
useMenuWidth: false  
});  
$(".MainMenu4").pictureMenu({  
animateTime: 600,  
menuInactiveHide: 0.2,  
menuWidthHover: 75,  
menuActiveWidth: 400,  
useMenuActiveWidth: true,  
leaveActiveOpen: true,  
leaveActiveOpenCookie: true  
});  
$(".MainMenu5").pictureMenu({  
menuHeight: 200,  
animateTime: 600,  
menuInactiveHide: 0.2,  
menuWidthHover: 75,  
menuAutoOpen: 3,  
leaveActiveOpen: true,  
leaveActiveOpenCookie: true  
});  
});  
</script>


Следующий код вставляйте в то место, где будет само меню:
Код
<div class="MainMenu2">
<div>
<img src="Картинка первого пункта" />
<img src="Картинка далее первого пункта" />
<ul class="submenu light">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
<li><a href="#">Подменю 4</a></li>
<li><a href="#">Подменю 5</a></li>
<li><a href="#">Подменю 6</a></li>
</ul>
</div>
<div>
<img src="Картинка второго пункта" />
<img src="Картинка "делаее" второго пункта" />
<ul class="submenu dark">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
<li><a href="#">Подменю 4</a></li>
<li><a href="#">Подменю 5</a></li>
<li><a href="#">Подменю 6</a></li>
</ul>
</div>  
</div>


Обратите внимание на class="MainMenu2"

Здесь у нас 2 - номер, который указывается для применения эффекта в том же порядке, который используется в демо. Меняйте номер от 1 до 5 в прямой зависимости от понравившегося эффекта

Осталось лишь залить два скрипта из прикреплённого архива в папку js и стиль в папку css

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: красивое, cookies, положения, подменю, горизонтальное, Через, на, слайд, запоминанием, Меню
Просмотров: 534 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: