Главная » Вебмастеру » 10 бесплатных сниппетов навигационных цепочек для веб-проектов

10 бесплатных сниппетов навигационных цепочек для веб-проектов

Навигационные цепочки («хлебные крошки», breadcrumb) делают организацию более понятной и мотивируют пользователей глубже просматривать сайт.

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

Thick Breadcrumbs

0

Навигационная панель создана с использованием чистого CSS и бесплатных иконок от Font Awesome.

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

Flat CSS3 Design

0

Плоский дизайн все еще актуален. Если вы создаете сайт с использованием однородных цветов, тогда стоит использовать этот плоский навигационный дизайн, созданный на CSS.

Стрелки созданы с использованием CSS и Sass, что облегчает редактирование. Вы можете быстро сменить фон или цвет при наведении, изменив одну переменную Sass.

Данная навигационная панель использует библиотеку Bootstrap, которая также включает в себя иконки Font Awesome.

Bright Colors

0

 

В этом примере используется дизайн с превосходными эффектами и цветовой схемой, которая идеально вписывается в макет.

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

Fluid Step Nav

0

Часто хлебные крошки используются в процессе оформления заказа. На панели выделяется текущий этап.

Эта навигационная панель служит образцом реализации данного эффекта. В ней используется градиент для создания иллюзии глубины на странице.

Rounded Crumbs

0

В этой панели хлебных крошек применяется анимация, работающая на CSS.

Каждый элемент цепочки панели использует иконку из библиотеки Font Awesome. Эти иконки легко масштабируются и создают структуру всей навигационной цепочки.

При наведении мышки вы получаете более подробную информацию на расширяющихся ярлыках.

Pixel-Perfect Breadcrumbs

0

Дизайн этой навигации довольно простой и лаконичный: с цифрами и эффектами при наведении мыши. Каждая стрелка выполнена на чистом CSS, а элементы навигационной цепочки идеально сочетаются друг с другом.

Reverse Arrows

0

Большинство стрелок в навигационных цепочках направлены слева направо. Но в этой у стрелок обратное направление.

Обратите внимание, как подсвечен последний элемент цепочки. Благодаря этому эффекту пользователь видит, что это последняя позиция.

Highlights

0

В этом решении можно найти пару хороших примеров с темной и светлой темой оформления. Мне также нравится форма панели и эффект теней, который заметно выделяется на более светлом заднем фоне.

Custom Separators

0

Панель представляет собой простые ссылки с четкими разделителями между ними. Это отличный пример простого дизайна. В нем вы сможете изменить разделители исходя из вашего дизайна.

Credit Card Checkout

0

Страницы оформления заказа используют навигационные цепочки, чтобы заставить посетителей завершить процесс покупки. Данный пример наглядно демонстрирует это. В нем используется небольшое количество JavaScript для создания эффекта затухания при заполнении каждого поля.

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

Данная публикация представляет собой перевод статьи «10 Free Breadcrumb CSS Snippets For Web Projects» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник

Интересные публикации по этой теме: