Делаем «LavaLamp» меню
Даже не знаю чего общего между этим ужасающе оригинальным и динамичным меню и этой лампой, но называют его именно так — «LavaLamp menu».
Этот эффект мне всегда очень нравился, даже немного интересно первое время поиграться с подобными менюшками. Просто посмотрите пример и сами все поймете. ;-)
Пример этого меню
(Лучше даже не спрашивайте каких услий мне стоило вставить в тело поста этот живой пример, для Вас старался)
Реализация
Реализация этого меню невероятно проста, а код меню будет что не наесть семантичным, конечно нам понадобисться немного JavaScript(36кб) в виде jQuery.
Приступаем! :-)
Создаем само меню:
<ul class="lavaLamp">
<li><a href="#">Кнопка номер 1</a></li>
<li><a href="#">Кнопка номер 2</a></li>
<li><a href="#">Кнопка номер 3</a></li>
<li><a href="#">Кнопка номер 4</a></li>
</ul>Теперь подключаем наши скрипты, вставив этот код между тегами <head></head>:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<script type="text/javascript" src="path/to/jquery.easing.js"></script>
<script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); </script>Можно считать что меню уже готово, осталось только оформить:
/* Оформление блока меню */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Делаем список горизонтальным */
.lavaLamp li {
float: left;
list-style: none;
}
/* Правая часть кнопки в меню. */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
/* Левая часть кнопки в меню. */
.lavaLamp li.back .left {
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Оформление кпопки. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
Раньше я бы наверника не понял как это сделать, даже с инструкцией — так что я выложу пример с тремя готовыми менюшками.
Так что качаем и делаем красоту ;-) Всем удачи!
По мотивам: http://gmarwaha.com/blog/?p=7
Прием достаточно старый, но не мог удержаться написать об этом.
Да, эффект известный. В демке замечены артефакты:
1) В IE6 иногда при наведении, сведении с плашки меню становится виден прямоугольный блок с оранжевым фоном под надписи кнопок;
2) Также В IE6 снующая плашка не ограничена по горизонтали плашкой меню, из-за чего иногда выбивается за нее;
3) В FF2 демка не решилась работать вовсе. Возможно, правда, виноваты мои расширения, я порядком с ними поэкспериментировал сегодня.
Поправка: таки да, локальное чудо расширений, в FF2 отлично работает. Правда разница между видом в IE6 и в FF2 – разительна :).
Я во всех браузерах проверял, кроме IE6 — да и не долго ему осталось ;-)
Осталось недолго. Но все же пользуется им еще достаточно большой процент. Кстати, будет время, посмотри как твой блог выглядит в IE6 :)
А ссылку на оригинал нужно акр=тивной делать, а то как-то не чесно :)
Спасибо! Видал как-то такое в одном из сайтов галереи CSSbeauty.com, вот и сам теперь могу поиграться. :)
супер
а без jquery кто-нибудь видел примеры? везде в инете только этот пример… ;(
А чем Вам, собственно, jquery не нравиться?
целую библиотеку ради одного эффекта не хочется тянуть
А она не целая, посмотрите пример — она урезанная всего 36кб.
Красота требует жертв.
Она целая, просто minify-цированная (кстати, это ещё не предел, она у вас без gzip отдаётся (изучайте
Я не силён в js настолько, чтобы писать такое с нуля, но смею предположить что без дополнительных библиотек и без громоздких ооп-конструкций, такой эффект можно уложить в 1-2кб… Понимая это, у меня не рука не повернётся поставить ваш пример на рабочий сайт :).
Да какой там gzip, меню только на одной странице показывается :-)
Ну обрежьте в коде не нужные функции, может килобайт в 10 уложитесь.
оч симпотична!)
спасиб за наглядный пример :))
Теперь объясните пожалуйста ламеру, как в такое меню засунуть больше 4ех элементов? У меня в таком случае эфект не отображается.
*В Опере мало того что неработает, так еще как ссылка выделяется при наведении курсора только снизу.
Ну поправить, наверно, в css размер, нарисовать другой фон.
А интересно, сам автор читает комментарии к этой статье. Или мы тут сами для себя пишем? :)
В каком смысле?
Что-то не разберусь как сделать чтоб ссылки в этом меню стали кликабельны.. :(
Они и так кликабельны, возможно я не понял вопрос.
Тоже есть подобная проблема. Вставляешь ссылку в кнопку
При наведении браузер распознают что там есть ссылка, однако, при клике перехода на страницу не происходит, а позиция по умолчанию у ездящей плашки становиться на кликнутой позиции…
Методом экспериментов кажеться выяснил что проблема с jquery.lavalamp.js но не могу сказать точно.. Так же не знаю как поправить…
Так что очень буду рад помощи)))))))
доброго времени суток!
так все же как сделать так, что бы при нажатии на ссылку браузер переходил, по адресу который присвоен ссылке????
Итак по поводу кликабельности ссылок.
Как всегда все гениальное просто))))
Находим в коде (который в самой странице между участок:
$(function() {$(»#1, #2, #3″).lavaLamp({fx: «backout», speed: 700, click: function(event, menuItem) {return false;}});});
и МЕНЯЕМ …return false.. на return true
У меня все заработало))))
ЗЫ вычитал это в комментариях к посту в оригинальной английской статье
Всё равно не фурычит…на ссылки то стал заходить но эта рюшечка по прежнему на месте!
Классно смотрится. Попробую на свой сайт новый что-то такое сделать в менюшке ))
Хм.. вещь классная -но в исходнике как уже писали выише есть баг -ссылки не рабочие ( выход есть, смотрим предыдущие комменты)
Вот сейчас столкнулся с такой проблемой, что при переходе на другую страницу через данное меню, первая кнопка как «подсвечивалсь » так и остается, тоесть, вот этот ползунок не меняет своего положения, подскажите пожалуста,как можно реализовать что на каждой новой странице изначальное положение подсетки какой либо кнопки можно ыбло поменять , м??
Всё делаю вроде бы правильно. Все появляется, но кроме самой плавающей штучки. Где может быть ошибка?
уважаемый, не работает пример менюшки, просто перебрасывет к верху страницы.