Плавающее меню на JQuery

Сегодня сделаем плавающее меню на JQuery с эффектом лавовой лампы / lavalamp.

JQuery - плавающее меню для сайта

Весь трюк заключается в том, чтобы сделать пустой элемент  #lava с заданным цветом фона, который будет следовать за положением курсора мышки при перемещении последнего через пункты меню. У него менять будем значения свойств left и width.

Примечание. Чтобы лишний раз не прописывать пару десятков строчек CSS, я использую стили ненумерованного списка от фреймворка Twitter Bootstrap.


Скачать пример
1. Итак, во-первых HTML разметка участка под плавающее меню будет выглядеть вот так, здесь ничего особенного кроме #navigation:

<div id="navigation">
  <ul class="nav nav-pills">
    <li><a href="#">PHP</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">PostgreSQL</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">HTML</a></li>
  </ul>
</div>

2. Во-вторых пустой div-элемент, который собственно и будет перемещаться за курсором я добавлю динамически. Программный код на JavaScript с подключением JQuery с серверов Yandex будет выглядеть следующим образом:

<script src="http://yandex.st/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {

  // Добавляем пустой элемент:
  $('<div id="lava_item"/>').appendTo('#navigation');

  // Делаем эффект плавающего лава-меню:
  $('li', '#navigation').each(function() {
    var $li = $(this);
    var $item = $('a', $li);
    var left = $item.position().left;
    var width = $item.outerWidth();

    $item.mouseover(function() { 
      $('#lava').css('width', width).
      stop(true, true).
      animate({
        left: left
      }, 'fast');
    });
  });

});
</script>

3. В-третьих стили мне с вами поправить все же придется. Весь текст приводить не имеет смысла, — ниже я выделил ключевые моменты, а рабочий пример вы сможете скачать в начале данной статьи. Листинг CSS:

#navigation {
  position: relative;
}
#navigation #lava_item {
  background:#EEE;
  ...
  height: 30px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

В завершение отмечу, что данное плавающее лава-меню полностью кроссбраузерное, и я не использую JQuery плагин Easing, программный код на JavaScript более компактный. Собственно этим приведенный материал отличается от иных инструкций.

Опубликовано 16-04-2013 в 15:17


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты