Практично жоден сучасний сайт не обходиться без навігації, якщо тільки це не сайт-одностранічнік. У статті ми підготуємо семантичного, грамотний html код нашого меню, далі стилізуємо його за допомогою нових фішок на CSS3 (box-shadow. Gradient. @ Font-face і т.д. присутні), і в кінці трохи ускладнити нашу навігацію. додавши, що випадають підпункти простенької jQuery-анімацією. Отримане меню можна буде використовувати в якості шаблону для ваших власних розробок.
Підготуємо семантичного HTML код нашого меню. Що ж представляє із себе меню в плані коду? Як правило, це невпорядкований список посилань, обгорнутий тегом
Однак це занадто просте меню, давайте додамо кілька додаткових підпунктів, які пізніше будуть з'являтися при наведенні курсору миші і проставимо класи:
Для старих IE не забуваємо підключити всі необхідні милиці: html5shiv, PIE для подальшої роботою з CSS3 властивостями і т.д. Не забуваємо про підключення jQuery. Як бачите, з розміткою все досить просто, поїхали далі.
стилізуємо меню
Візьмемо за основу мій готовий код горизонтального меню з випадають підпунктами:
По-перше, центруємо по горизонталі навігацію на сторінці:
Теги
Займемося оформленням пунктів навігації, для початку зробимо градієнти. Раніше (та й досі це актуально) для цього вирізали однопіксельні смужку і заповнювали їй весь елемент, в CSS3 з'явилися властивості linear-gradient і radial-gradient. які створюють лінійний і радіальний градієнт відповідно. Можна скористатися яким-небудь онлайн-генератором градієнтів, щоб не забивати все вручну і відразу отримати готові стилі. Я користуюся сервісом ColorZilla. такий код там виходить миттєво:
Задамо меню невелике округлення кутів, яке раніше робилося позиціонуванням картинок по кутах і безліччю зайвих несемантіческіх блоків, тепер же використовують властивість border-radius + милицю PIE для старих IE або graceful degradation:
Далі я вирішив використовувати нестандартний шрифт для тексту посилань, для прикладу взяв шрифт DINMediumRegular. Підключаємо його властивістю @ font-face. Є відмінний онлайн-генератор правил для @ font-face. Font Squirrel. завантажуємо потрібний шрифт і отримуємо на виході архів з готовими стилями, залишається тільки підключити їх до вашого проекту:
Для старих Internet Explorer використовуємо вбудовані фільтри для тіні або не беремо до уваги її відсутність і невелике невідповідність з дизайном.
Інша частина стилів не потребує ретельного розгляду, тому як там все дуже просто і особливих труднощів викликати не повинна.
Випадають підпункти на jQuery
Нарешті займемося випадають підпунктами меню. Дуже зручно скористатися бібліотекою jQuery, яка має вбудований метод animate () для анімації елементів в документі. animate () дозволяє створювати анімаційні ефекти для числових властивостей CSS, в нашому випадку будемо анімувати прозорість opacity. Скрипт дуже простий, всього кілька рядків коду:
Далі навішуємо обробник на подію hover пунктів навігації. При наведенні курсора миші в поточному пункті знаходимо елемент з класом .dropdown-menu. застосовуємо animate () до opacity і показуємо список посилань за допомогою методу show (). Потім навішуємо ще один обробник, коли курсор залишає елемент. Робимо все в точності до навпаки - знаходимо елемент, анімуємо прозорість до 0 і приховуємо список в документі. Метод stop () в скрипті потрібен для того щоб заборонити множинне спрацьовування анімації при переміщенні курсору миші туди-сюди.
Ось таким чином на HTML, CSS і jQuery було зроблено просте меню, яке може послужити каркасом для ваших розробок.