Кодування витонченого меню навігації хлібної крихти в CSS3
Навігаційні меню та посилання є найважливішими елементами інтерфейсу для веб-макета. Це єдині розетки для користувачів переміщення між сторінками і взаємодіяти з усім створеним вами вмістом. Breadcrumb пропонує подібну функціональність з додатковою перевагою відстеження поточної позиції. Ви зможете відображати всі попередні шляхи посилання як користувач проходить через ієрархію вашого сайту.
У цьому підручнику ми створимо блискуче навігаційне меню з деякими ефектами CSS3. Це було перевірено на роботу у всіх основних веб-переглядачах, сумісних із CSS3, навіть старіші веб-переглядачі, які не підтримують CSS3, все одно будуть правильно відображати його у більшості випадків.
Перед тим, як ми зануримося в код, ми трохи поговоримо про функціональність нашої хлібної крихти, повний підручник під час стрибка!
Пропонуємо шлях
Траса не є складнішою, ніж будь-яке інше меню. Наші стилі використовуватимуть набагато складніші властивості CSS, ніж більшість прикладів, проте наш шаблон з оголеними костями все ще існує, щоб направляти користувачів з однієї сторінки на іншу.
У цьому прикладі ми будемо відтворювати подібний стиль як меню підтримки Google. Ви можете переглянути їхнє меню на сторінці підтримки Gmail, щоб отримати уявлення про те, куди ми прямуємо. Зрештою ми хочемо забезпечити найкращий досвід для всіх користувачів, незалежно від операційної системи або програмного забезпечення браузера, таким чином я побудував 2 різні приклади коду для підтримки витонченої деградації серед старих браузерів.
Перший побудований з використанням користувацькі фонові зображення і відповідні вирівнювання CSS. Всі події, що відбуваються під час наведення курсів, та активні події попередньо побудовані лише за допомогою декількох стилів CSS, але користувачі, у яких вимкнено зображення, не зможуть відчути ці ефекти! Ось чому я також створив подібне меню з CSI градієнтами, закругленими кутами і тіньовими коробками.
Якщо ви нервуєте з приводу підтримки обох стилів, ви можете вибирати між ними для вашого власного сайту. Більшість відвідувачів використовуватимуть зображення за умовчанням, але якщо ви хочете отримати більш точні дані про відвідувачів, скористайтеся інструментом аналізу веб-сайтів.
Досить слів, давайте перейдемо до проекту! Ми почнемо з побудови базової HTML-структури і переходимо до різних ефектів стилізації. Поперше Вам потрібно завантажити зображення для проекту.
Bare-Bones HTML
Я починаю свій документ за допомогою стандартний шаблон сторінки HTML5. Це включає в себе типовий доктіп, пов'язаний CSS і всі основні елементи. Я додав код нижче, якщо ви хочете почати свій власний документ таким чином. Зауважте, що це не повинно впливати на те, як відображається ваша дрібниця, тому можете вільно використовувати власний шаблон сторінки, якщо бажаєте.
Сторінка за замовчуванням
Я розділю код на два різні блоки. Перший блок з зображеннями побудований з дещо іншим способом, за яким слідує наше меню без зображень. Кожному набору дається своя ID щоб ми могли ідентифікувати вміст набагато простіше. Якщо ви також шанувальник jQuery, ви можете скористатися #ID селектор маніпулювати всіма внутрішніми елементами DOM.
Спочатку ми маємо a містить div з ідентифікатором “сухаря“. У демонстраційному файлі я використав це, щоб відокремити наш код і перемістити його через сторінку з деякими додатковими полями. Ви можете видалити цей зовнішній div, але вам доведеться повторно створити все, щоб відповідати новому шаблону. Це дійсно не заважає залишити контейнер, тому що ви зможете контролювати позиціонування набагато простіше.
Внутрішньо я створив сухарі за допомогою невпорядкованого списку. Є так багато унікальних способів налаштувати стилізовані списки HTML, а сухарі є лише одним з них. Ви можете помітити, що я дав початковий елемент списку a клас з “спочатку“. Це необхідно для додаткового заповнення, щоб зберегти пункти меню в рядку. Додатково невеликий пролітний блок додано, тому ми маємо правильну ліву межу, яка не перекриває фонове зображення.
Додатково кожна зв'язка закріплюється зменшуючим числом для z-індекс власності. Використовуючи зображення, які нам потрібно кожне з наших посилань перекривається щоб належним чином відобразити проектор. Найпростіший спосіб це зробити регулювання z-індексу так що кожне посилання перекриває наступне. Я почав з 9 і працював звідти, але якщо у вас більше посилань у вашому меню, просто почніть з більш високого цілого.
Меню без зображень
До витончено деградують нашу сухарику нам потрібен додатковий набір елементів списку HTML. Якщо ви намагаєтеся перейти на одну навігацію, ви можете використовувати jQuery для виявлення агента браузера та відповідного застосування ідентифікатора. На жаль, це не завжди надійно (наприклад, для деяких мобільних користувачів). Іншим рішенням є включають специфічну таблицю стилів IE і приховати чи показати найкраще меню - але, звичайно, ця опція призначена лише для Internet Explorer.
breadcrumb2 наш новий ідентифікатор, який використовується для націлювання на меню без зображень. Дотримуючись цієї моделі, я використовував крихти2 як клас для невпорядкованого списку. Зверніть увагу, що ми використовуємо причину класи є для його простота дублювати ці меню, тому, коли ви хочете отримати декілька різних сухарей на вашій сторінці, з цими класами це ніколи не стане проблемою.
Ми зберегли .спочатку класу, але додатково додається .останнійкласу на кінцевий елемент списку. Без зображень ми не можемо дублювати стрілки для кожного елемента навігаційного меню, тому я використовував деякі закруглені кути пожвавити вторинне меню. .спочатку клас і .останній маніпулювати радіусом кордону в самих краях нашого меню, щоб створити дійсно здоровий веб-стиль.
CSS Зсувні фонові зображення
Для деяких більш простих ефектів я об'єднав обидві хлібні крошки разом при побудові властивостей. Це корисно, оскільки не тільки заощаджує місце, а й повертається до стилів редагування легше налаштувати свій власний вигляд.
Для обох #breadcrumb і # breadcrumb2 Я встановив список-стиль: немає; тому всі внутрішні елементи не будуть мати маркерів. Ви можете залишити їх, якщо вам сподобається ефект, але я знайшов, що HTML стає втомлюючим, щоб працювати, і набагато простіше створювати нові іконки. Так почнемо з нашого .крихти клас.
.крихти дисплей: блок; .crumbs li відображення: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: посилання, .crumbs li a: visited color: # 666; дисплей: блок; поплавок: лівий; розмір шрифту: 12px; margin-left: -13px; заповнення: 7px 17px 11px 25px; позиція: відносна; текст-прикраса: немає; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); фон-повтор: без повтору; фонове положення: 100% 0; позиція: відносна; .crumbs li a: hover color: # 333; фонове положення: 100% -48px; курсор: покажчик; .crumbs li a: active color: # 333; фонове положення: 100% -96px; .crumbs li.first a span висота: 29px; ширина: 3px; межі ліворуч: 1px суцільний # d9d9d9; позиція: абсолютна; зверху: 0px; ліворуч: 0px; Ми встановіть наш невпорядкований список блок так що нічого більше не повзає навколо області. Зверніть увагу на список елементів списку відображається вбудовано в той час, як кожному якоря прив'язується набагато більше можливостей для розповсюдження. Ми хочемо, щоб весь простір в нашому меню був кліканий, тому це вимагає побудова наших якорів як блокових елементів.
Я використав зображення, зване bg-crumbs.png для фону. Це відоме як простий лист спрайт в CSS, або альтернативно a розсувні двері техніки. Це означає, що коли користувач зависає або натискає на посилання, ми зміщуємо фонове положення, щоб відобразити оновлений стиль. Це єдине зображення містить всі три зразки, які нам потрібно створити, щоб створити тло з різними позиціями, щоб ми могли використовувати фонове положення властивість переміщати на основі взаємодії з користувачем.
Спеціальні ефекти з CSS3
Створений оригінальний дизайн конфігурації набагато простіший. Це помітно, оскільки багато властивостей CSS є більш базовими, ніж ви могли б собі уявити, але тепер ми починаємо зосереджуватися на дублюванні цих ефектів лише за допомогою CSS3!
Окремі стилі займають багато місця, тому я розбиваю їх на 2 кодові блоки.
.crumbs2 display: block; margin-left: 27px; заповнення: 0; прокладка: 10px; .crumbs2 li відображення: inline; .crumbs2 li a, .crumbs2 li a: посилання, .crumbs2 li a: visited color: # 666; дисплей: блок; поплавок: лівий; розмір шрифту: 12px; оббивка: 7px 16px 7px 19px; позиція: відносна; текст-прикраса: немає; кордон: 1px твердий # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (лінійний, лівий нижній, лівий верхній, колір-стоп (0,45, rgb (241,241,241)), колір-стоп (0,73, rgb (245,245,245))); background-image: -moz-лінійний градієнт (дно центру, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Для Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Для Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last border-right-width: 1px; кордон-нижній правий радіус: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
The .крихти2 використовується меню Градієнти CSS дублювати фонові ефекти. Якщо ви не знайомі з цими даними, я настійно рекомендую керівництво CSS Tricks на градієнтах CSS3, які повинні допомогти вам ефективно використовувати градієнти CSS3. Вони включали ще кілька властивостей для браузерів Microsoft і Opera, але вони не повністю підтримуються у всіх випадках. Я не включив їх у демо-код тут - але добре розуміти всі варіанти.
-webkit-градієнт і -moz-лінійний градієнт є основними рішеннями, які виконують більшу частину роботи. Для старіших версій Internet Explorer я включив убудований код це не гарантовано щоб відображати правильно весь час (ми використовуємо потужні технології візуалізації зображень, зрештою). Зверніть увагу на те, що між властивостями фону встановлено як кольорові RGB, так і шестигранні коди кольорів. Ви можете дотримуватися одного або іншого методу, якщо вам зручніше.
The радіус кордону Код застосовується лише до нашої вторинної навігації. Це дає акуратний ефект у верхньому лівому та нижньому правому кутку всього меню. На панелі з'являється майже спливаюча сторінка - це дійсно фантастичний ефект для браузерів, які підтримують стилі, але вони лише охоплюють стани за замовчуванням для наших посилань. Тепер давайте створимо ефекти наведення, подібні до зображень, які ми використовували вище.
Кордони та тіні CSS3
Всякий раз, коли користувач зависає над посиланням, ми хочемо оновити кілька речей. Спочатку нам потрібно Затемнити кольори рамки зверху і знизу нашого активного елемента. Це можна побачити і на зображеннях як для наведення, так і для активних станів.
.крихта2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (лінійний, лівий нижній, лівий верхній, колір-стоп (0,45, rgb (241,241,241)), колір-стоп (0,73, rgb (248,248,248))); background-image: -moz-лінійний градієнт (дно центру, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Для Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Для Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; колір: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: активний border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-градієнт (лінійний, лівий нижній, лівий верхній, колір-стоп (0,45, rgb (224,224,224)), колір-стоп (0,73, rgb (235,235,235))); background-image: -moz-лінійний градієнт (нижній центр, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Для Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Для Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; коробка-тінь: -1px 1px 1px 0px #dadada вставка; -webkit-box-shadow: -1px 1px 1px 0px #dadada вставка; -moz-box-shadow: -1px 1px 1px 0px #dadada вставка; колір: # 333;
Я використовую той самий код градієнта, що й раніше, але на цей раз кольори значно відрізняються, якщо ви помітили наші значення RGB. Кожен із станів буде затемнювати колір тексту # 333, інші дескриптори були злегка змінені, щоб відповідати командам користувача.
На наведеному нижче курсі ви побачите блискучі рельєфні ефект які в поєднанні з затемнені межі надає стилям спливаючих сторінок. Якщо натиснути й утримувати, ви потрапите в активний стан, який містить a темний фон градієнт. Цей ефект призводить до того, що кнопки виглядають насправді “натиснута” на сторінці.
Ми також подаємо заявку box-shadow властивості з нових специфікацій CSS3. -webkit, -moz, і типові стилі використовуються з тими ж налаштуваннями. Відображення a світла тінь виходить з нижньої частини вибраного посилання. Коли активна, тінь буде сформована на верхній, правій і нижній межах. Цей ефект створюється за допомогою вставку ключове слово додано до кінця кожного рядка властивості box-shadow. Знову ж таки, CSS Tricks - ваш найкращий друг з чудовою статтею про box-shadow, оскільки він говорить про синтаксис і його правильне використання в CSS3.
Бонус: більше стилів
На додаток до навчального коду я включив додаткові фонові зображення з адаптованими колірними схемами. Я взяв зразок з оригінальних фонів і використовував Adobe Photoshop, щоб створити кілька варіантів, які можна застосувати до власного веб-сайту.
Це файли бонусів включені до вихідного файлу які можна завантажити у форматі .zip архіву, у розділі нижче.
Ви можете перевірити зображення вище, щоб отримати уявлення про те, про що я говорю. Якщо вам потрібна конкретна кольорова схема, відкрийте її Зображення> Коригування> Відтінок / Насиченість щоб змінити схему кольорів відповідно до власного шаблону, не забувайте Відмітьте опцію Colorize на панелі "Тон / Насиченість", якщо колір взагалі не змінився.
Висновок
Цей підручник повинен був ознайомити вас з деякими новими методами CSS3. Ми створили два фантастичних меню, створених подібним чином, і побудували його так, щоб він міг деградувати в старих браузерах. Крім того, я запропонував свій демо-код і деякі бонусні зображення для вас.
Вам особливо подобаються стилі, які ми побудували тут? Або, можливо, у вас є питання або ідеї щодо того, як поліпшити код підручника? Будь ласка, поділіться своїми думками з нами в дискусійній області нижче, і не забудьте завантажити вихідні файли, щоб ви могли грати з демо!
Інші навчальні посібники CSS3
Прагнення до більш CSS3? Нижче наведені наші статті для того, щоб ви зрозуміли CSS3 теоретично і практично!
- CSS3: Створення логотипу RSS-каналу
- CSS3: Створення поля пошуку
- CSS3: Створити контактну форму AJAX
- CSS3: Створення веб-сторінок HTML5 / CSS3
