Меню 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

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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