Доброго времени суток. Давно видел данный эффект на различных сайтах, и уж очень он меня зацепил. Слишком он красив. Однако на всех сайтах, где я его видел, я не мог его выдрать. Точнее мог, но он был написан так, что работал именно на этом сайте, ну или просто руки у меня из javascript я не знаю). Однако недавно увидел что данный эффект реализуется с помощью плагина, и решил тут же сделать заметочку на своём блоге.

И так, в данном скрипте используется jQuery, плагин Easing, ну и, собственно, сам скрипт LavaLamp. В чём же суть данного скрипта…

В маркированном списке, создаётся плавающий блок <li>, который при наведении на пункт меню <li> плавно изменяет свои размеры и положение.
DEMO/Скачать
Поглядим на синтаксис HTML.

Дальше подключаем необходимые скрипты внутри тега <head>

Где fx: «backout» определяет эффект плагина easing ну и speed: 1000 соответственно, скорость в миллисекундах.

Ну и оформляем наше меню

.lavalampmenu {
position: relative;
height: 29px;
width: 500px;
background-color: white;
padding: 35px;
margin: 10px 0;
overflow: hidden;
}
.lavalampmenu li {
float: left;
list-style: none;
}
.lavalampmenu li.back {
border: 1px solid #000;
border-radius:10px;
background-color: #e6e8ea;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavalampmenu li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavalampmenu li a:hover, .lavalampmenu li a:active, .lavalampmenu li a:visited {
border: none;
}

Где li.back и есть наш плавающий блок.

Вот впринципе и всё, ах да, забыл… Для того чтобы указать стартовое положение блока, достаточно тегу <li> присвоить класс current. Если же вам нужен другое название класса текущей вкладки, то открываем файл с плагином, и находим эту строчку

$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current ")[0];

Ну и заменяем слово current на нужный нам класс. Т.е. если вы делаете для WordPress, то следует заменить на current_page_item (если вы делаете для навигации по страницам).
Так же, чтобы подключить скрипт к WordPress, то Вам необходимо в функции вывода страниц

дописать параметр title_li=, и обернуть функцию тег <ul> с соответствующим классом. Т.е. выглядеть будет так:


Качаем, устанавливаем, любуемся.

Вебмастера создавайте свои сдл сайты, сейчас очень неплохо можно зарабатывать на тизерной рекламе. Всем советую.