Главная » Файлы » Прочие скрипты » jQuery
Lavalamp меню через библиотеку эффектов jQuery Easing и Lavalamp
23.06.14, 08:57:36

Скачать файл



Очень даже неплохой плагин с интересным эффектом Lavalamp

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

Установка:

На всех страницах, где будет использовано данное меню, после /head вставляйте:
Код
<link rel="stylesheet" href="/css/lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {  
$("#1, #2, #3").lavaLamp({  
fx: "backout",  
speed: 700,  
click: function(event, menuItem) {  
return false;  
}  
});  
});  
</script>


Следующий код вставляйте в то место, где будет само меню:

1) Оранжевое меню с использованием изображений:
Код
<ul class="lavaLampWithImage" id="1">
<li class="current"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
  </ul>


2) Меню с оформлением через css без использования изображений:
Код
<ul class="lavaLampNoImage" id="2">
<li class="current"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
  </ul>


3) Меню с нижним подчёркиванием:
Код
<ul class="lavaLampBottomStyle" id="3">
<li class="current"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
  </ul>


Далее залейте файлы из прикреплённого архива следующим образом:
lavalamp_test.css - в папку css
jquery.lavalamp.min.js и jquery.easing.min.js - в папку js
lava.gif и bg.gif - в папку images (Только для оранжевого меню)

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