Главная » Меню » Красивое горизонтальное слайд меню с подменю с запоминанием положения на cookies через плагин pictureMenu на jQuery
19:21
Очень интересное горизонтальное меню на jQuery. В четвёртом и пятом примерах меню запоминает последний открытый пункт на куках
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<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>
Следующий код вставляйте в то место, где будет само меню:
Code
<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
