Анимированное меню на jQuery в стиле "как флэш"

27 ноября 2009 21 Рубрика: AJAX, JavaScript, jQuery, Красивости, интересности, полезности, Учимся на живых примерах

« Предыдущая запись
 		   Следующая запись »
 

Когда-то давно когда я был маленьким и ходил под стол я наткнулся на статью "Анимированный фон средствами jQuery". Мне она показалась довольно таки интересной и полезной (питательной и вкусной - прим.голодного ред.). Тут же рядом я наткнулся на ещё одну статью "Animated navigation items using jQuery".

На тот момент у меня стояла задача создать меню, похожее на то, что предложено во второй статье. Но его некоторая багнутость и абсолютное позиционирование заставили меня от неё отказаться. В итоге я придумал способ, который мне позволил добиться приблизительно того, чего я хочу.

Смысл прост - при наведении я хотел бы, чтобы цвет надписи плавно менялся. И я решил слегка сбоку подойти к примеру из первой статьи. Результат можно видеть на сайте Asunaro.ru, где каждой кнопке сделан свой цвет при наведении, и на сайте On-i-ona.ru, где цвет одинаковый (надписи на розовой ленте). В статье будет рассмотрен первый вариант, где цвет кнопок разный, поскольку из него одинаковый цвет сделать не составит труда=).

menu Анимированное меню на jQuery в стиле "как флэш"


Как работает скрипт

Суть работы скрипта прост: в каком-то блоке при наведении ездит бэкграунд - туда-сюда. В оригинале статьи рассматривались различные виды бэкграундов и какие они эффекты делали в блоке с надписью - то есть кнопке меню. Я использовал блок, в котором лежит картинка (и блок и картинка одинакового размера), часть которой сделана прозрачной, а прозрачна именно сама текстовая надпись.

Сам скрипт представляет собой мини-дополнение к библиотеке jQuery и имеет название Background-Position Animations. Скачать его можно либо у меня в разделе скачки, либо на сайте плагинов jQuery.

Верстаем будущее меню jQuery

<div id="hor_buttons">
  <ul id="gallery">
    <li>
      <a href="#"><img src="images/but_gallery.png" width="117" height="117"></a>
    </li>
  </ul>
  <ul id="process">
    <li>
      <a href="#"><img src="images/but_process.png" width="124" height="117"></a>
    </li>
  </ul>
  <ul id="about">
    <li>
      <a href="#"><img src="images/but_about.png" width="127" height="117"></a>
    </li>
  </ul>
  <ul id="resume">
    <li>
      <a href="#"><img src="images/but_resume.png" width="105" height="117"></a>
    </li>
  </ul>
  <ul id="blog">
    <li>
      <a href="#"><img src="images/but_blog.png" width="80" height="117"></a>
    </li>
  </ul>
</div>

but gallery Анимированное меню на jQuery в стиле "как флэш" В принципе ничего сложного. В общем контейнере hor_buttons заложено меню в стиле списка. Каждому пункту меню соответствует свой идентификатор (gallery, process и пр.), внутри которого лежит ссылка с изображением кнопки (рис. справа; обратите внимание на полупрозрачность надписи).

Теперь займёмся стилями.

* {margin: 0px; padding: 0px;}
IMG {border: 0;}
#hor_buttons {
  float:left;
  height:117px;
}
#hor_buttons ul {list-style:none;float:left;}
#hor_buttons li {margin:0;padding:0;text-align:center;}
#hor_buttons li a {
   display:block;
   padding:0px;
   cursor:pointer;
   color:#FFF;
  text-decoration:none;
   border-right:1px solid #bdc0c6;
}
#hor_buttons #gallery a {background:url('images/bg_gallery.png');}
#hor_buttons #process a {background:url('images/bg_process.png');}
#hor_buttons #about a {background:url('images/bg_about.png');}
#hor_buttons #resume a {background:url('images/bg_resume.png');}
#hor_buttons #blog a {background:url('images/bg_blog.png');}
  1. Строки 1-6. Чисто оформительские. Первая строка сбрасывает настройки отступов на странице, вторая строка сбрасывает окантовку изображений на нулевую, а 3-6 строки указывают для блока меню его положение и высоту.
  2. Строка 7. Настройка пункта меню. Обращаю внимание на флоат. Если его убрать, то меню будет не горизонтальное, а вертикальное.
  3. Строка 8. Как дополнение к 7 строке. В данном случае она неактуальна, поскольку отступы уже сброшены, а текста у нас в блоке нет, то есть выравнивать нам нечего.
  4. Строки 9-16. Настройка непосредственно ссылок. Первые три правила обязательны, особенно курсор, поскольку в некоторых браузерах он остаётся "стрелочкой", а нужен "ручечкой". 13-15 строки чисто оформительские.
  5. Строки 17-21. Добавление каждой определённой ссылке своего бэкграунда.

Встраиваем jQuery и запускаем скрипт меню

Не забудем подключить библиотеки на страницу. Как правило это делается в шапке сайта, а если говорить правильно, то в теге head.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>

А теперь где-нибудь на странице надо добавить, скажем так, код активации меню. Обычно такие коды добавляют где-то рядом с тем местом, где сделана анимация.

<script type="text/javascript">
$(function(){
  $('#hor_buttons a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
    $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  })
});
</script>

Код достаточно простой, использует базовые команды. Изменению подлежат только 3 строке (где указывается имя селектора, с которым будут производиться махинации), 6 и 10 строках, где указана скорость перемещения бэкграунда и длина перемещения.

В завершении

Собственно всё. Остаётся только дальше включать фантазию и придумывать способы использования перемещающегося бэкграунда. И кстати, в данном примере не забывайте использовать плагин, который заставляет работать прозрачность PNG в IE6. Ведь, как вы помните, прозрачность там не работает.=)

А полученный результат вы сможете посмотреть по ссылке.

 

 

, , , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. Alek-say
    18/12/2009 at 12:10 Постоянная ссылка Цитировать

    Отличное решение, и работает вроде как безбагово и везде. Респект!

  2. Александр Шуйский
    19/12/2009 at 0:22 Постоянная ссылка Цитировать

    Большое спасибо, рад слышать=)

  3. Антон
    24/01/2010 at 14:16 Постоянная ссылка Цитировать

    Меню супер, но выглядит не красиво, но это уже дело юзера =)

  4. Александр Шуйский
    24/01/2010 at 14:31 Постоянная ссылка Цитировать

    как это – супер, но некрасиво?=)
    вообще чем нравится мне это решение, так это тем, что позволяет очень простым способом разнообразить внешний вид сайта. тут по принципу – лучше с анимацией, чем просто картинки непонятные. да и смотрится, я считаю=)

  5. Павел
    09/02/2010 at 12:37 Постоянная ссылка Цитировать

    Спасибо супер!

  6. Александр Шуйский
    09/02/2010 at 12:40 Постоянная ссылка Цитировать

    пожалуйста =)

  7. duckill
    22/05/2010 at 15:07 Постоянная ссылка Цитировать

    Статья очень понравилась, спасибо! Думаю применю скрипт в ближайшем проекте.

  8. Александр Шуйский
    04/06/2010 at 19:02 Постоянная ссылка Цитировать

    You’re welcome! Не забудьте подписаться на RSS за обновлениями =)

  9. Mike Silence
    14/07/2010 at 12:44 Постоянная ссылка Цитировать

    А можно как нить соединить плавную смену фона как тут ( 3ий пример http://snook.ca/technical/jquery-bg/ ) и плавную смена цвета шрифта как у вас. Я хочу получить в итоге, что бы при нажатие на меню плавно менялся цвет фона и цвет шрифта.

  10. Александр Шуйский
    14/07/2010 at 18:15 Постоянная ссылка Цитировать

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

  11. Mike Silence
    14/07/2010 at 18:19 Постоянная ссылка Цитировать

    Ох! Это было бы просто великолепно )

  12. Александр Шуйский
    14/07/2010 at 18:23 Постоянная ссылка Цитировать

    Скоро пару статей по цсс3 и хтмл5 сделаю, там про это будет

  13. Mike Silence
    14/07/2010 at 23:47 Постоянная ссылка Цитировать

    Спасибо, буду ждать )

  14. Евгений
    09/02/2011 at 2:16 Постоянная ссылка Цитировать

    Здравствуйте, а можете мне плиз помочь кое в чем, сделал все как описано, но почему -то не работает, просто у кнопки сразу определенный фон и все. :(

    в хедере head.tpl.html подключил так:

    <script type="text/javascript" src="data/{$smarty.const.TPL}/jquery.js"></script>
    <script type="text/javascript" src="data/{$smarty.const.TPL}/jquery.bgpos.js"></script>

  15. Александр Шуйский
    09/02/2011 at 10:37 Постоянная ссылка Цитировать

    если хтмл и цсс прописаны, то как вариант скрипты неправильно подключены и нужно проверить путь к ним.
    а ещё – если вы используете smarty, то он не любит когда скрипты не подключены отдельными файлами и когда код жабаскрипта расположен непосредственно на странице шаблона. выход один – вывести код в отдельный файл и подключить его.

  16. Евгений
    09/02/2011 at 13:33 Постоянная ссылка Цитировать

    если хтмл и цсс прописаны, то как вариант скрипты неправильно подключены и нужно проверить путь к ним.
    а ещё – если вы используете smarty, то он не любит когда скрипты не подключены отдельными файлами и когда код жабаскрипта расположен непосредственно на странице шаблона. выход один – вывести код в отдельный файл и подключить его.

    Огромное спасибо, наконец-то нашел адекватный блог. Пойду зарегестрируюсь теперь, Вы меня спасли. :) проблема была в след, в Smarty, ява-скрипт ставиться в {literal}{/literal} ну я его вставил через:
    {php}
    include_once("./core/php/nav.php");
    {/php}

    Огромное Вам спасибо. :)

  17. Александр Шуйский
    09/02/2011 at 13:41 Постоянная ссылка Цитировать

    Всегда пожалуйста. Буду рад видеть в постоянных подписчиках =)

    Да, я помню, что в литерал засовывал жабакод, но он всё равно не работал, поэтому в отдельный файл засовывал и всё было хорошо. Так что вот, стоит иметь в виду и такое =)

  18. Юрий
    06/03/2011 at 23:18 Постоянная ссылка Цитировать

    Мне нужен плагин как на этом сайте:
    http://atlon.jfdesign.tmweb.ru/static/index.htm
    или как здесь
    http://www.croc.ru

    из имеющихся у вас..не нашел именно такого.((

  19. Юрий
    06/03/2011 at 23:01 Постоянная ссылка Цитировать

    Приветствую!
    Весь интернет обыскал один плагин и вот последняя надежда была на этом ресурсе..но и здесь нет вот этой карусельки: jQuery Plugin Carousel
    v.0.2 – подскажите где найти такой плагин..?

  20. Александр Шуйский
    06/03/2011 at 23:14 Постоянная ссылка Цитировать

    Вечер добрый!
    Вообще-то есть – http://shublog.ru/ajax/jquery/20-ajax-galerejj-na-jquery/
    И там несколько каруселек можно найти. Конечно с момента написания статьи прошло время и что-то вышло ещё, но и из того что есть можно выбрать.

  21. Александр Шуйский
    07/03/2011 at 14:12 Постоянная ссылка Цитировать

    Тогда вот, что могу посоветовать.
    http://fredhq.com/projects/roundabout-shapes/

    и тут под 3 номером
    http://shublog.ru/ajax/jquery/7-ajax-galerejj-dlya-jquery/