Легке анімоване меню засобами CSS і jQuery

17

Анімація і візуальну зворотний зв’язок – прекрасні способи допомогти користувачеві навігації та взаємодії з веб-сайтом. Поряд з тим, що традиційно Adobe Flash був «безумовним переходом» для всієї анімації, у наші дні при використанні чарівних можливостей javascript можна взагалі обійтися без flash’а. Сьогодні ми створимо дійсно класне анімоване меню, використовуючи тільки CSS і jQuery.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Огляд

Анімоване меню для сайту, який ми сьогодні зробимо з допомогою CSS і jQuery, можна побачити внизу на скріншоті.

Легке анімоване меню засобами CSS і jQuery

Я збираюся розбити цей підручник на п’ять наступних секцій:

Приблизний нарис

Створення ресурсів

Написання HTML

Написання CSS

Створення анімації при використанні jQuery

Крок 1: Приблизний план

По-перше, давайте подивимося, що нам потрібно зробити.

Легке анімоване меню засобами CSS і jQuery

Отже, ось приблизна ідея того, що нам необхідно виконати:

Ми розіб’ємо сторінку на 4 частини, заголовок, навігацію і заголовок вмісту та інший вміст

Область верхнього колонтитула буде простим контейнером

Область переходів буде розбита на декілька контейнерів

, відповідних пунктів меню.

В даний час найчастіше ми використовуємо контейнер

  • але так як кожен пункт меню унікальний, я не бачу переваг використання
    • тому я збираюся використовувати замість нього контейнер
      .

      Вміст буде простим контейнером

      Отже, підводимо підсумок:

      Допомогти нам може перегляд структури каталогів. Вона наступна:

      Легке анімоване меню засобами CSS і jQuery

      Крок 2: Ресурси

      Думаю, ви вже вмієте працювати в програмі Photoshop, тому не буду давати занадто детальних інструкцій по створенню ресурсів. Нам потрібно створити кілька таких речей.

      Фон заголовка

      Вміст заголовка

      Навігацію

      Фонову смугу

      Добре, давайте створимо фон заголовка. Відкрийте Photoshop і створіть полотно розміром 1×181 пікселів або зробіть його побільше, а потім обріжте зображення. Створіть шар і встановіть йому лінійний градієнт від высокоприоритетного до низкоприоритетного в 171px, це буде основний градієнт. Створіть інший шар і встановіть йому лінійний градієнт від высокоприоритетного до прозорого в 10px на нижній межі першого шару для створення ефекту тіні.

      Ось як це має виглядати, при розмірі 100×181 пікселів, які я потім пообрізаю до 1×181 пікселів.

      Легке анімоване меню засобами CSS і jQuery

      Збережіть його як ‘hdr-bkg.png’ в нашу папку ‘img’.

      Далі ми створимо заголовок вмісту. Знову відкриваємо Photoshop і створюємо полотно розміром 934×284 px. Створіть прямокутник із закругленими кутами за допомогою відповідного інструменту, виділіть отриману фігуру, створіть новий шар, додайте градієнт і надайте йому тінь. У нас вийде щось на зразок цього:

      Легке анімоване меню засобами CSS і jQuery

      Збережіть як ‘content-title.png’ в папці ‘img’.

      Тепер давайте створимо ресурси, необхідні для навігації. Нам потрібні два набору навігації та біле поле.

      Біле поле – це просто. Лише створіть заокруглений прямокутник розміром приблизно в 98px x 58px і пофарбуйте в білий колір. Переконайтеся, що задній фон прозорий.

      Легке анімоване меню засобами CSS і jQuery

      Збережіть ‘white.jpg’ в папці ‘img’.

      Для елемента навігації відкрийте свій Photoshop і створіть документ розміром 490px x 58px. Створіть заокруглений прямокутник приблизно 98px x 58px і внесіть в нього текст. Нам знадобиться дві копії кожного тексту. Я застосував до текстів трохи тіней, але це за бажанням. Можете вибрати свої власні кольори.

      Легке анімоване меню засобами CSS і jQuery

      Тепер просто продублюйте цей шар уздовж горизонтальної лінії. Застосуйте різні кольори і напишіть текст.

      Легке анімоване меню засобами CSS і jQuery

      Збережіть ‘nav.jpg’ в папці ‘img’.

      Нарешті, для фонової смуги я просто використовував онлайн-інструмент, який називається генератор смуги. Результат виглядає наступним чином:

      Легке анімоване меню засобами CSS і jQuery

      Тут можна побачити мої налаштування. Звичайно, ви можете самі створити смугу в photoshop’е, але чому б не використовувати замість нього маленький веб-інструмент Легке анімоване меню засобами CSS і jQuery .

      Крок 3: HTML-код

      Тепер давайте коротко запишемо наш HTML.

      slick animated menu

      Це дуже близько відповідає нашим планом, викладеним у пункті 1.

      Я додав посилання на файл ‘main.css’, який ще необхідно створити, а ще я додав посилання на деякі файли javascript. Так як кожен елемент навігації унікальний, я надав кожному з них свій ID. Нам ще знадобиться трошки простого стилю для кожного пункту меню, що пізніше дозволить нам легко керувати цим стилем.

      Нам також потрібно, щоб зверху кожного пункту навігації з’являлося біле поле, коли ми проводимо мишею над меню, вибираємо пункт меню, а для цього нам знадобиться ще один контейнер

      . Остаточний HTML-код буде виглядати так:

      slick animated menu

      Збережіть його як ‘index.html’. На даний момент це наша HTML-сторінка:

      Легке анімоване меню засобами CSS і jQuery

      Крок 4: CSS

      Давайте застосуємо трохи основних стилів веб-сторінці. Почнемо з визначення фону та додавання області заголовка.

      body {
      background: url(../img/body-bkg.jpg) repeat scroll;
      margin: 0;
      padding: 0;
      }
      .containe r{
      margin: 0pt auto;
      width:950px;
      }
      #header {
      background: url(../img/hdr-bkg.jpg) repeat-x scroll;
      height:181px;
      }

      Збережіть це як ‘main.css’ в папці ‘css’. У нас вийшло щось, що виглядає наступним чином:

      Легке анімоване меню засобами CSS і jQuery

      Тепер давайте додамо стилю для кожного з пунктів меню. Пам’ятайте про те, що нам потрібно біле поле зверху кожного з них, тому його положення повинно бути встановлено за допомогою абсолютних

      #navigation{
      height:60px;
      }
      #home #home div,
      #about, #about div,
      #services #services div,
      #solutions #solutions div,
      #contact, #contact div {
      height:80px;
      position:absolute;
      width:97px;
      float:left;
      }
      #home #about, #services #solutions #contact{
      background-image: url(../img/nav.jpg);
      background-attachment: scroll;
      background-repeat: no-repeat;
      top:171px;
      }
      #home{
      background-position: 0px -25px;
      margin-left:6px;
      }
      #about{
      background-position: -98px -25px;
      margin-left:105px;
      }
      #services{
      background-position: -196px -25px;
      margin-left:204px;
      }
      #solutions{
      background-position: -294px -25px;
      margin-left:303px;
      }
      #contact{
      background-position: -392px -25px;
      margin-left:402px;
      }
      #home div, #about div, #services div, #solutions div, #contact div {
      background-image: url(../img/white.jpg);
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-position: 0px -60px;
      }

      Ось що ми зараз маємо:

      Легке анімоване меню засобами CSS і jQuery

      Проблема в тому, що посилання з’являється зверху кожного з пунктів меню, і її потрібно видалити з допомогою величезного відступу тексту, який ефективно прибере її з екрану. Додайте у своїй таблиці стилів:

      .pri-nav a{
      display:block;
      text-decoration:none;
      text-indent:-30000px;
      }

      Тепер все виглядає ось так:

      Легке анімоване меню засобами CSS і jQuery

      У нас все ще є проблема – ми б хотіли, щоб меню навігації відображалося під тінню заголовка. Досягти цієї мети можна шляхом зміни стилю заголовка.

      #header{
      background: url(../img/hdr-bkg.jpg) repeat-x scroll;
      height:181px;
      position:absolute;
      z-index :100; /* ensure the header is on top of navigation area */
      top: 0px;
      left:0px;
      width:100%;
      }

      Тепер тому, що ми використовували файл .png з прозорістю, меню повинно виглядати так:

      Легке анімоване меню засобами CSS і jQuery

      Ідеально! Давайте додамо вміст, щоб можна було перейти до скрипта анімації.

      .content{
      margin-top:160px;
      }
      #content-title{
      background: url(../img/content.jpg) no-repeat scroll;
      height:323px;
      position:absolute;
      width:100%;
      }

      Крок 5: Скрипт анімації

      По-перше, давайте завантажити останній скрипт jQuery і помістимо його в папку ‘js’.

      Анімація – це в основному маніпуляції стилем положення фону. На жаль, у jQuery є помилки в анімуванні стилю позиції фону. Але не турбуйтеся! Alexander Farkas створив плагін, який вирішує цю проблему. Скачайте файл, перейменуйте його в jquery-bp.js і збережіть у папці ‘js’.

      Перед тим, як продовжити, потрібно зрозуміти-що. Цитую з документації плагіна:

      Унаслідок помилок в браузері (тобто Firefox) вам необхідно встановити свою (первісну) вбудовану позицію фону:

      — Звичайно, цього також можна досягти і з JavaScript (jQuery): $(‘#background’).css({backgroundPosition: ’10px 20px’});

      Тепер, коли ми всі розуміємо, давайте почнемо. Ми встановимо стиль позиції фону для кожного пункту на початку нашого скрипта.

      // id для кожного з пунктів меню
      var nav = [ ‘#home’, ‘#about’, ‘#services’, ‘#solutions’, ‘#contact’ ];
      $(document).ready(function(){
      setBkgPos();
      });
      function setBkgPos()
      {
      for ( i = 0; i < nav.length; i++ ){
      $(nav).css({backgroundPosition: i*(-98) + ‘px -25px’});
      $(nav + ‘div’).css({ backgroundPosition: ‘0px -60px’});
      }
      }

      Збережіть це як ‘navigation.js’ в папці ‘js’.

      Тепер прив’яжемо за три події до кожного з пунктів меню. Можна зробити це шляхом виклику функції зв’язування.

      $(document).ready(function(){
      setBkgPos();
      // тут прив’яжіть подія функції
      for ( i = 0; i < nav.length; i++ ) {
      $(nav).bind( ‘mouseover’, mMouseOver );
      $(nav).bind( ‘mouseout’, mMouseOut );
      $(nav).bind( ‘click’, mClick );
      }
      });

      Кожен раз, коли користувач проводить мишею поверх пункту навігації, наш скрипт викликає функцію ‘mMouseOver’. Коли користувач прибирає курсор з пункту навігації, скрипт викликає функцію ‘mMouseOut’. А при натисканні на пункт навігації скрипт викликає функцію ‘mClick’.
      Крок 5.1: «MouseOver»

      Крок 5.1: «MouseOver»

      Давайте створимо «розкадрування» анімації «MouseOver».

      При ‘Mouse Over’:

      Зміниться зображення меню навігації (світіння) і зміниться курсор на покажчик.

      Пункт навігації трохи підніметься.

      Біле поле опуститься вниз.

      І біле поле, та меню навігації змістяться вниз.

      Меню навігації і біле поле займуть свою кінцеву позицію.

      Зображення меню навігації повернеться в початковий стан.

      Легке анімоване меню засобами CSS і jQuery

      Чудово, тепер давайте додамо ці функції під попередній скрипт:

      function _getHPos( id )
      {
      for ( i = 0; i < nav.length; i++ ){
      if ( ‘#’ + id == nav ){
      return i*(-98);
      }
      }
      return 0;
      }
      function mMouseOver(e)
      {
      $(this)
      // зупинити будь-яку попередню анімацію
      .stop()
      // крок 1. Змінити файл зображення і курсор
      .css({backgroundImage: ‘url(‘+site_url+’img/nav-over.jpg)’,cursor: ‘pointer’})
      // крок.2 трохи зрушити пункт навігації
      .animate({ backgroundPosition:'(‘ + _getHPos( this.id ) +’px -30px}’},»fast»,
      // ця секція буде виконана після того, як зроблений крок.2
      function(){
      $(this)
      .children()
      // крок. 3 зрушити біле поле вниз
      .animate({backgroundPosition:'(0px -40px)’},20)
      // крок 4. Зрушити біле поле вниз
      .animate({backgroundPosition:'(0px -20px)’},»fast»);
      $(this)
      // крок 4. Зрушити пункт навігації вниз
      .animate({backgroundPosition:'(‘ + _getHPos( this.id ) +’px 50px)’},»fast»)
      // крок 5. Зрушити пункт навігації у вихідне положення
      .animate({backgroundPosition:'(‘ + _getHPos( this.id ) +’px 25px)’},»fast»);
      // зберегти батьківський елемент id для подальшого використання
      var parent = this;
      $(this)
      .children()
      // крок 5. Зрушити біле поле в кінцеву позицію
      .animate( {backgroundPosition:'(0px -45px)’},»fast»,
      // ця секція буде виконуватися після закінчення кроку.2
      function(){
      // крок.6 повернути в початкове зображення
      $(parent).css({backgroundImage: ‘url(img/nav.jpg)’});
      });
      });
      }

      Я повинен тут пояснити деякі речі:

      _getHPos використовується для коригування позиції горизонтального фону навігації для кожного пункту. Наприклад, фон пункту ‘Home’ розпочнеться з 0, позиція горизонтального фону ‘About’ розпочнеться з -98px і так далі.

      Також зауважте, що на початку функції ми викликаємо функцію ‘stop’. Ми робимо це для того, щоб упевнитися, що будь-анімація, запущена до події ‘mouse over’, припинилася. Навіщо? Трохи пізніше ми додамо іншу анімацію для події ‘mouse out’. А зараз давайте припустимо, що користувач провів мишею по пункту, потім швидко перевів курсор ще куди-небудь і знову швидко провів над тим же пунктом. Якщо ми не зупинимо анімацію перед кожним подією, вийде затримка, так як частина анімації буде стояти на черзі, або навіть ще гірше – анімація стане несумісною і буде дратувати користувача.

      Крок 5.2: «MouseOut»

      Так, це зроблено. Тепер давайте створимо «розкадрування» для події ‘mouse out’

      При ‘Mouse Out’:

      Пункт навігації зрушиться вниз.

      Біле поле зрушиться вниз.

      Навігація підніметься вгору.

      Пункт навігації підніметься у вихідне положення.

      Біле поле підніметься у вихідне положення (невидиме).

      Курсор повернеться в нормальний вигляд.

      Легке анімоване меню засобами CSS і jQuery

      Код:

      function mMouseOut(e)
      {
      $(this)
      // зупинити будь-яку попередню анімацію
      .stop()
      // крок.1 зрушити вниз пункт навігації
      .animate({backgroundPosition:'(‘ + _getHPos( this.id ) +’px 40px )’}, «fast»,
      // ця секція буде виконуватися після закінчення кроку.1
      function(){
      // крок.2 біле поле рухається дійсно швидко
      $(this).children().animate({backgroundPosition:'(0px 70px)’}, «fast»);
      // крок 3. Зрушити пункт навігації вгору
      $(this).animate( {backgroundPosition:'(‘ + _getHPos( this.id ) +’px -40px)’}, «fast»,
      // ця секція буде виконуватися після закінчення кроку.3
      function(){
      // крок 4. Зрушити пункт навігації у вихідну позицію
      $(this).animate( {backgroundPosition:'(‘ + _getHPos( this.id ) +’px -25px)’}, «fast»,
      // ця секція буде виконуватися після закінчення кроку .4
      function(){
      // зрушити біле поле у вихідну позицію, привести в готовність до наступної анімації
      $(this).children().css({ backgroundPosition:’0px -60px’});
      })
      })
      })
      .css({backgroundImage: ‘url(img/nav.jpg)’, cursor: «});
      }

      Крок 5.3: Клік

      Майже закінчили! Тепер нам потрібно проробити той момент, коли користувач клацає на кнопку навігації.

      function mClick(e)
      {
      location.href = this.id;
      }

      Звичайно, тут ви можете вказати яке завгодно розміщення, яке вам сподобається. Конкретно ця функція перенаправляє ваш браузер на [current_url]/[navigation_id], так що для пункту ‘home’ це буде ‘[current_url]/home’, ‘about’- ‘[current_url]/about’, і так далі.

      Крок 5.4: Покажчик поточної сторінки

      Звичайно, нам потрібен індикатор того, що ми вже знаходимося на сторінці. Для цього необхідний ще один клас CSS. Назвемо цей клас ‘active’. Наприклад, якщо ми зараз на пункті ‘home’, HTML-файл буде:

      home

      Або якщо ми на ‘about’, він стане:

      about

      І так далі.
      Тепер ідея полягає в тому, що після завантаження сторінки наш скрипт перевірить, який з пунктів навігації має клас ‘active’. Потім ми докладаємо анімаційний ефект. І ще нам потрібно переконатися, що ніяка інша подія ( ‘mouseover’, ‘mouseout’, ‘click’) не викличе анімаційного ефекту на ‘активний’ пункті.

      Для цього потрібно трохи змінити наш код. Ось повний код після внесених змін:

      var site_url = «;
      var nav = [ ‘#home’, ‘#about’, ‘#services’, ‘#solutions’, ‘#contact’ ];
      $(document).ready(function(){
      setBkgPos();
      for ( i = 0; i < nav.length; i++ ) {
      $(nav).bind( ‘mouseover’, mMouseOver );
      $(nav).bind( ‘mouseout’, mMouseOut );
      $(nav).bind( ‘click’, mClick );
      }
      for ( i = 0; i < nav.length; i++ ) {
      // елемент класу ‘active’починає анімацію
      if ( $(nav).get(0).className.indexOf(‘active’) >= 0 ){
      $(nav)
      .animate({ backgroundPosition:'(‘ + _getHPos( nav ) +’px -30px}’},»fast»,
      function(){
      $(this)
      .children()
      .animate({backgroundPosition:'(0px -40px)’},20)
      .animate({backgroundPosition:'(0px -20px)’},»fast»);
      $(this)
      .animate({backgroundPosition:'(‘ + _getHPos( nav ) +’px 50px)’},»fast»)
      .animate({backgroundPosition:'(‘ + _getHPos( nav ) +’px 25px)’},»fast»);
      var parent = this;
      $(this)
      .children()
      .animate( {backgroundPosition:'(0px -45px)’},»fast»,
      function(){
      $(parent).animate({backgroundPosition:'(‘ + _getHPos( parent.id ) +’px 25px)’},»fast»);
      $(parent).css({backgroundImage: ‘url(img/nav.jpg)’});
      });
      });
      break;
      }
      }
      });

      Закінчили!

      І ось нарешті у нас є наше чудове маленьке анімоване меню для сайту.

      Завантажити вихідні коди zip-архівом

      Перегляд Demo

      Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

      E-mail: [email protected]

      Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

      P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.