Меню LavaLamp

Рассмотрим пример создания эффекта оригинального и динамичного меню LavaLamp которое несомненно пригодится, ведь иногда симпатичные мелочи в дизайне просто необходимы.

LavaLamp это эффект оригинального и динамичного меню.

Просто посмотрите примеры и сами все поймете.

Этот эффект мне всегда очень нравился, даже немного интересно первое время поиграться с подобными менюшками.

Реализация

Реализация этого меню невероятно проста, а код меню будет что не наесть семантичным, конечно нам понадобисться 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;
}

Посмотреть пример с тремя готовыми менюшками в отдельном окне »

Так что качаем и делаем красоту. Всем удачи!

Выбранный пункт

Вы наверняка заметили, что если отвести курсор мыши от меню, то слой подсветки возвращается к первому пункту. Дело в том, что лаваламп умеет возвращаться к нужному пункту меню, и это можно сделать присвоив нужному пункту класс current, это делается так: <li class="current">

Источник: chernev.ru а кто-то уже применяет напильник »

Реализация

Реализация этого меню невероятно проста, а код меню будет что не наесть семантичным, конечно нам понадобисться немного 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;
}

Раньше я бы наверника не понял как это сделать, даже с инструкцией — так что я выложу пример с тремя готовыми менюшками.

Так что качаем и делаем красоту ;-) Всем удачи!

Оцени публикацию:
  • 21,87
Оценили человек: 21

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » JavaScript »