Кодирование изящного меню навигации Breadcrumb в CSS3
Навигационные меню и ссылки, возможно, являются наиболее важными элементами интерфейса для веб-макета. Это единственные выходы для пользователей путешествие между страницами и взаимодействовать со всем контентом, который вы создали. Breadcrumb предлагает аналогичную функциональность с дополнительным преимуществом отслеживание вашей текущей позиции. Вы сможете отобразить все предыдущие пути ссылки как пользователь пересекает иерархию вашего сайта.
В этом уроке мы создадим блестящее навигационное меню с несколькими эффектами CSS3. Это было протестировано для работы во всех основных CSS3-совместимых браузерах, даже старые браузеры, которые не поддерживают CSS3, по-прежнему будут правильно отображать его в большинстве случаев..
Прежде чем мы углубимся в код, мы немного поговорим о функциональности нашей крошки, полный урок в прыжке!
Предлагая след
След крошки не сложнее, чем любое другое меню. Наши стили будут использовать гораздо более сложные CSS-свойства, чем большинство примеров, но наш шаблон-шаблон все еще на месте, чтобы направлять пользователей с одной страницы на другую..
В этом примере мы воссоздадим стиль, аналогичный меню поддержки Google. Вы можете просмотреть их меню на странице поддержки Gmail, чтобы понять, куда мы движемся. В конечном итоге мы хотим обеспечить лучший пользовательский опыт для всех пользователей, независимо от их операционной системы или программного обеспечения браузера, таким образом, я построил 2 разных примера кода для поддержки постепенной деградации в старых браузерах.
Первый построен с использованием пользовательские фоновые изображения а также правильное выравнивание CSS. Все события при наведении и активные события предварительно созданы с помощью всего лишь нескольких стилей CSS, но пользователи, у которых отключены изображения, не смогут испытать эти эффекты! Вот почему я также создал похожее меню с CSS-градиентами, закругленными углами и тенями..
Если вы беспокоитесь о поддержке обоих стилей, вы можете выбрать между ними для своего сайта. Большинство посетителей будут использовать изображения по умолчанию, но если вам нужны более точные данные о посетителях, используйте инструмент анализа веб-сайта..
Хватит слов, давайте прыгнем в проект! Мы начнем с создания базовой HTML-инфраструктуры и перейдем к различным эффектам стиля. Прежде всего вам нужно скачать изображение требуется для проекта.
Голые кости HTML
Я начинаю свой документ с стандартный шаблон страницы HTML5. Это включает в себя тип документа по умолчанию, связанный CSS и все основные элементы. Я добавил код ниже, если вы хотите начать свой собственный документ таким образом. Обратите внимание, что это не должно влиять на отображение вашей хлебной крошки, поэтому не стесняйтесь использовать свой собственный шаблон страницы, если хотите.
Страница по умолчанию
Я разделю код на два разных блока. Первый блок с изображениями построен немного по-другому, за ним следует наше меню без изображений. Каждому набору дается свой Я БЫ таким образом, мы можем определить содержание намного проще. Если вы также являетесь поклонником jQuery, вы можете использовать #ID селектор манипулировать всеми внутренними элементами DOM.
Сначала у нас есть содержащий div с идентификатором “хлебный мякиш“. В демонстрационном файле я использовал это, чтобы отделить наш код и переместить его по странице с некоторыми дополнительными полями. Вы можете удалить этот внешний div, но вам придется все переделать под новый шаблон. Это действительно не мешает покидать контейнер, так как вы сможете намного легче контролировать положение.
Внутренне я построил панировочные сухари, используя неупорядоченный список. Существует так много уникальных способов настроить стилизованные списки HTML, и хлебные крошки - только один из них. Вы можете заметить, что я дал начальный элемент списка учебный класс из “первый“. Это необходимо для дополнительного заполнения, чтобы держать пункты меню в строке. Дополнительно маленький блок пролета добавлено, поэтому у нас есть правильная левая граница, которая не перекрывает фоновое изображение.
Кроме того, каждая ссылка привязывается с уменьшением числа для Z-индекс имущество. Используя изображения нам нужно каждая из наших ссылок перекрывается правильно отображать стрелку крошки. Самый простой способ сделать это регулировка z-индекса поэтому каждая ссылка перекрывает следующую. Я начал с 9 и работал оттуда, но если у вас есть больше ссылок в вашем меню, просто начните с более высокого целого числа.
Меню без картинок
к грациозно деградировать наши хлебные крошки нам нужен вторичный набор элементов списка HTML. Если вы пытаетесь использовать одну навигацию, вы можете использовать jQuery, чтобы обнаружить агент браузера и соответственно применить идентификатор. К сожалению, это не всегда надежно (например, для некоторых мобильных пользователей). Другое решение состоит в том, чтобы включить специфичную для IE таблицу стилей а также скрыть или показать то меню, которое лучше всего работает - но, конечно, эта опция только для Internet Explorer.
breadcrumb2 наш новый идентификатор, используемый для целевого меню без изображений. В соответствии с этим шаблоном я использовал crumbs2 как класс для неупорядоченного списка. Обратите внимание, что причина, по которой мы используем классы для его простота дублирования этих меню, поэтому, когда вы хотите добавить несколько разных хлебных крошек на страницу, с этими классами это никогда не станет проблемой.
Мы сохранили .первый класс, но дополнительно добавляется .прошлойкласс на последний элемент списка. Без изображений мы не можем дублировать стрелки для каждого пункта меню навигации, поэтому я использовал некоторые закругленные углы чтобы оживить вторичное меню. .первый класс и .прошлой манипулировать радиусом границы по краям нашего меню, чтобы создать действительно крутой стиль в стиле веб 2.0.
CSS скользящие фоновые изображения
Для некоторых простых эффектов я соединил обе крошки вместе при построении свойств. Это полезно, так как это не только экономит место, но при возвращении к редактированию стилей это проще настроить твой собственный взгляд.
Для обоих #breadcrumb а также # breadcrumb2 Я поставил стиль списка: нет; поэтому все внутренние предметы не будут иметь маркеров. Вы можете оставить их, если вам нравится эффект, но я обнаружил, что HTML становится утомительным, и создавать новые значки намного проще. Итак, начнем с нашего .крошки учебный класс.
.крошки дисплей: блок; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: ссылка, .crumbs li a: посещения цвет: # 666; дисплей: блок; плыть налево; размер шрифта: 12 пикселей; поле слева: -13px; отступы: 7px 17px 11px 25px; положение: относительное; текстовое оформление: нет; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); повторение фона: без повтора; background-position: 100% 0; положение: относительное; .crumbs li a: hover color: # 333; background-position: 100% -48px; курсор: указатель; .crumbs li a: active color: # 333; background-position: 100% -96px; .crumbs li.first a span высота: 29px; ширина: 3 пикселя; рамка слева: 1px solid # d9d9d9; положение: абсолютное; верх: 0px; слева: 0px; Мы установить наш неупорядоченный список блок так что больше ничего не ползет вокруг области. Обратите внимание, что элементы списка отображается в строке в то время как каждой якорной ссылке предоставляется гораздо больше места для распространения. Мы хотим, чтобы все пространство в нашем меню было кликабельным, поэтому это требует строим наши якоря как блочные элементы.
Я использовал изображение под названием BG-crumbs.png для фона. Это известно как простой спрайт-лист в CSS или, альтернативно, раздвижные двери техника. Это означает, что когда пользователь наводит указатель мыши или щелкает ссылку, мы смещаем фоновую позицию для отображения обновленного стиля. Это единственное изображение содержит все 3 рисунка, которые нам нужны для создания фонов «хлебная крошка» в разных положениях, поэтому мы можем использовать фон положение свойство для перемещения на основе взаимодействия с пользователем.
Пользовательские эффекты с CSS3
Оригинальный дизайн крошки гораздо проще создать. Это заметно, поскольку многие свойства CSS являются более простыми, чем вы могли бы себе представить, но теперь мы начинаем концентрироваться на дублировании этих эффектов только с помощью CSS3.!
Отдельные стили занимают много места, поэтому я разделю их на 2 блока кода.
.crumbs2 дисплей: блок; поле слева: 27 пикселей; отступы: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: ссылка, .crumbs2 li a: посещения цвет: # 666; дисплей: блок; плыть налево; размер шрифта: 12 пикселей; отступы: 7px 16px 7px 19px; положение: относительное; текстовое оформление: нет; граница: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-градиент (линейный, левый нижний, левый верхний, остановка цвета (0,45, rgb (241,241,241))), остановка цвета (0,73, rgb (245,245,245))); background-image: -moz-linear-Gradient (центр внизу, 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-фильтр: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5 пикселей; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; граница-нижний-правый-радиус: 5 пикселей; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.crumbs2 меню использует CSS градиенты продублировать фоновые эффекты. Если вы не знакомы с ними, я настоятельно рекомендую руководство по трюкам CSS по градиентам CSS3, которое поможет вам эффективно использовать градиенты CSS3. Они включили еще несколько свойств для браузеров Microsoft и Opera, но они не полностью поддерживаются во всех случаях. Я не включил их в демо-код здесь - но это хорошо, чтобы понять все варианты.
-WebKit-градиент а также -Мос-линейный градиент являются основными решениями, которые делают большую часть работы. Я включил устаревший код для более старых версий Internet Explorer, но это не гарантировано правильно отображать все время (мы используем мощные методы рендеринга изображений, в конце концов). Обратите внимание, что я установил RGB и шестнадцатеричные цветовые коды между свойствами фона. Вы можете придерживаться одного метода или другого, если вам удобнее.
радиус границы Код применяется только к нашей вторичной навигации навигации. Это дает аккуратный эффект в верхнем левом и правом нижнем углу нашего меню. Панель, кажется, почти всплывает со страницы - действительно фантастический эффект для браузеров, которые поддерживают стили, но они покрывают только состояния по умолчанию для наших ссылок. Теперь давайте создадим эффекты наведения, похожие на изображения, которые мы использовали выше.
CSS3 Границы и тени
Всякий раз, когда пользователь наводит курсор мыши на ссылку, мы хотим обновить несколько вещей. Сначала нам нужно затемните границы цветов сверху и снизу нашего активного элемента. Это можно увидеть на изображениях как для парящих, так и для активных состояний..
.crumbs2 li a: hover border-top-color: # c4c4c4; Цвет рамки снизу: # c4c4c4; background-image: -webkit-градиент (линейный, левый нижний, левый верхний, цветовой стоп (0,45, RGB (241 241 241)), color-stop (0,73, RGB (248 248 248))); background-image: -moz-linear-Gradient (центр внизу, 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-фильтр: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; цвет: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; тень от рамки: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; Цвет рамки снизу: # c4c4c4; background-image: -webkit-Gradient (линейный, слева внизу, слева вверху, цветовой стоп (0,45, RGB (224,224,224)), цветовой стоп (0,73, RGB (235,235,235))); background-image: -moz-linear-Gradient (центр внизу, 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-фильтр: "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, все же другие дескрипторы были немного изменены, чтобы соответствовать пользовательским командам.
При наведении вы увидите блестящий рельефный эффект который в сочетании с затемненные границы дает всплывающие стили страницы. Если вы нажмете и удержите, вы попадете в активное состояние, в котором градиент затемненного фона. Этот эффект заставляет кнопки выглядеть они на самом деле “прессованный” на странице.
Мы также подаем заявку коробчатого тень свойства из новых спецификаций CSS3. -WebKit, -Мос, и стили по умолчанию используются с теми же настройками. Зависание отображает легкая тень выходит из нижней части выбранной ссылки. Когда активен, тень будет сформирована на верхней, правой и нижней границах. Этот эффект создается с помощью вставка Ключевое слово добавляется в конец каждой строки свойства box-shadow. Опять же, CSS Tricks - ваш лучший друг здесь с замечательной статьей о box-shadow, которая рассказывает о синтаксисе и его правильном использовании в CSS3..
Бонус: больше стилей
В дополнение к учебному коду я добавил дополнительные фоновые изображения с адаптированными цветовыми схемами. Я взял образцы оригинальных фонов и использовал Adobe Photoshop для создания нескольких вариантов, которые вы можете применить на своем собственном веб-сайте..
Эти бонусные файлы включены в исходный файл которую вы можете скачать в формате архива .zip в разделе ниже.
Вы можете проверить изображение выше, чтобы понять, о чем я говорю. Если вам нужна конкретная цветовая схема, откройте окно Photoshop> Изображение> Настройки> Оттенок / Насыщенность чтобы изменить цветовую схему в соответствии с вашим собственным шаблоном, не забудьте отметьте опцию Colorize в панели Hue / Saturation, если цвет не изменился вообще.
Заключение
Этот урок должен был познакомить вас с некоторыми из новых техник CSS3. Мы создали два фантастических меню в виде хлебных крошек, разработанных аналогичным образом, и создали его таким образом, чтобы оно могло изящно ухудшаться в старых браузерах. Кроме того, я предложил мой демо-код и несколько бонусных картинок, чтобы вы могли поиграть с ними.
Вам особенно нравятся стили, которые мы здесь создали? Или, может быть, у вас есть вопросы или идеи о том, как улучшить учебный код? Пожалуйста, поделитесь своими мыслями с нами в области обсуждения ниже, и не забудьте скачать исходные файлы, чтобы вы могли поиграть с демо!
Больше учебников по CSS3
Тяга к большему CSS3? Ниже приведены наши статьи для теоретического и практического понимания CSS3.!
- CSS3: создание логотипа RSS-канала
- CSS3: создать поле поиска
- CSS3: создайте контактную форму AJAX
- CSS3: создание веб-страниц HTML5 / CSS3
