Май
4
2011

Очень красивое горизонтальное меню на jQuery — LavaLamp

Недавно нашел клевый плагин jQuery — LavaLamp. Суть в том что при наведении на пункт меню background картинка или цвет в зависимости от того что вы поставите не просто появляется как в обычном CSS меню, а едет за мышкой и еще с ефектом easing который дает ефект "желе".
Вот пример меню:

Ну вот настал вопрос «как это сделать???» Для начала в html пишем пункты меню:

<ul class="menu" id="menu">
    <li class="current"><a href="#">Главная</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">Уроки</a></li>
</ul>

Потом css стили:

.menu {
  position: relative;
  height: 29px;
  width: 421px;
  background-color: white;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid gray;
}
.menu li {
  float: left;
  list-style: none;
}
.menu li.back {
  border: 1px solid #000;
  background-color: #e6e8ea;
  width: 9px;
  height: 30px;
  z-index: 8;
  position: absolute;
}
.menu 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;
}
.menu li a:hover, .menu li a:active, .menu li a:visited {
  border: none;
}

Ну а теперь в начало страници до подключаем файлы jquery.min.js, jquery.easing.min.js, jquery.lavalamp.min.js и после них пишем маленький скрипт:

<script type="text/javascript" >
$(document).ready(function() {
            $("#menu").lavaLamp({
                fx: "backout",  // ефект easing
                speed: 700 // скорость
                }
            });
        });
</script>

Ну вот и все скачать демо версию можно здесь.

a

Вам будет интересно прочитать и это:

Об авторе: Петро Бородатий

Создаю веб-сайты, пишу скрипты для популярных CMS, веду блог. Программист портала AdvertsMarket.net.

Оставить комментарий

Услуги

Веб-студия "MKSITE"

Реклама от Google

Социальные сети

Партнеры

Система Orphus