ZorNet.Ru — сайт для вебмастера » HTML и CSS » Варианты навигации Flat с помощью CSS3

Варианты навигации Flat с помощью CSS3

Варианты навигации Flat с помощью CSS3
В материале представлены 3 варианта навигационной палили или хлебные крошки, которые задействованы на сайте для указания местоположение на сайте. Это одна из актуальных функций навигаций, что предоставлена в оригинальном веб-дизайне. Так как она отлично помогает пользователям или гостям сайта перемещаться по ресурсу, позволяя им видеть, где находится текущая страница.

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

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

1. Вариант

Навигационная панель для сайта

HTML

Код
<ul class="crumbs_navigation cased">
  <li><a href="#">Первая</a></li>
  <li><a href="#">Вторая</a></li>
  <li><a href="#">Третья</a></li>
  <li><a href="#">Четвертая</a></li>
</ul>

CSS

Код
.crumbs_navigation {
  font: .75em sans-serif;
  list-style: none;
}

.crumbs_navigation.cased {
  font-size: 1em;
}

.crumbs_navigation p {
  margin: 0;
}

.crumbs_navigation li {
  display: inline-block;
  margin-bottom: .2em;
}

.crumbs_navigation li a {
  background-color: #0c5f82;
  box-sizing: border-box;
  color: #fff;
  display: block;
  max-height: 2em;
  padding: .5em 1em .5em 1.5em;
  position: relative;
  text-decoration: none;
  transition: .25s;
}

.crumbs_navigation li a:before {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #fff;
  content: "";
  position: absolute;
  top: 0;
  right: -1.25em;
  z-index: 1;
}

.crumbs_navigation li a:after {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #0c5f82;
  content: "";
  position: absolute;
  top: 0;
  right: -1em;
  transition: .25s;
  z-index: 1;
}

.crumbs_navigation li a:hover {
  background-color: #0388c1;
}

.crumbs_navigation li a:hover:after {
  border-left-color: #0388c1;
}

.crumbs_navigation li:last-child a {
  background-color: #1181b1;
  pointer-events: none;
}

.crumbs_navigation li:last-child a:after {
  border-left-color: #1181b1;
}

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

Демонстрация

2. Вариант

Меню хлебных крошек на CSS

HTML

Код
<div class="sumeb">
  <a href="#" class="devkaus">Главная</a>
  <a href="#">Скрипты</a>
  <a href="#">Коды</a>
  <a href="#">Контакты</a>
</div>

CSS

Код
.sumeb {
  display: inline-block;
  box-shadow: 0 0 15px 1px rgba(2, 2, 2, 0.35);
  overflow: hidden;
  border-radius: 5px;
  counter-reset: flag;  
}

.sumeb a {
  font-size: 12px;
  line-height: 36px;
  color: #fbfbfb;
  padding: 0 20px 0 64px;
  background: #171819;
  position: relative;
  text-decoration: none;
  outline: none;
  display: block;
  float: left;
}

.sumeb a:first-child {
  padding-left: 50px;
  border-radius: 5px 0 0 5px;
}

.sumeb a:first-child:before {
  left: 14px;
}

.sumeb a:last-child {
  border-radius: 0 5px 5px 0;
  padding-right: 25px;
}

.sumeb a.devkaus, .sumeb a:hover, .sumeb a.devkaus:after, .sumeb a:hover:after {
  background: #191919;
}

.sumeb a:after {
  right: -18px;  
  width: 36px;  
  height: 36px;
  transform: scale(0.707) rotate(45deg);
  z-index: 1;
  box-shadow:  
  2px -2px 0 2px rgba(9, 100, 136, 0.4),  
  3px -3px 0 2px rgba(128, 128, 128, 0.1);
  border-radius: 0 5px 0 50px;
  background: #151617;
  transition: all 0.3s;
  content: '';
  position: absolute;
  top: 0;  
}

.sumeb a:last-child:after {
  content: none;
}

.sumeb a:before {
  content: counter(flag);
  counter-increment: flag;
  position: absolute;
  top: 0;
  left: 30px;
  background: #f7f5f5;
  color: rgb(15, 63, 99);
  box-shadow: 0 0 0 1px rgba(191, 191, 191, 0.84);
  font-weight: bold;
  border-radius: 100%;
  padding-left: 6px;
  width: 14px;
  height: 20px;
  line-height: 20px;
  margin: 8px 0;
}

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

Демонстрация

3. Вариант

Хлебные крошки для сайта на CSS3

Подключаем шрифтовые кнопки

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">

HTML

Код
<ul class="bread_kroshki">
  <li><a href="#"><span class="fa fa-home"> </span> Домой</a></li>
  <li><a href="#"><span class="fa fa-comments"> </span> Общение</a></li>
  <li><a href="#"><span class="fa fa-cloud"></span> Материалы</a></li>
  <li><a href="#"><span class="fa fa-folder-open"> </span> Файлы</a></li>
  <li><a href="#"><span class="fa fa-users"> </span> Компаний</a></li>
  <li><a href="#"><span class="fa fa-university"> </span> Дизайн</a></li>
</ul>

CSS

Код
.bread_kroshki {
  list-style: none;
  display: inline-block;
}
.bread_kroshki .fa {
  font-size: 14px;
}
.bread_kroshki li {
  float: left;
}
.bread_kroshki li a {
  color: #fbf8f8;
  display: block;
  background: #1a1f2f;
  text-decoration: none;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 22px;
  margin-top: 8px;
  font-family: "Cuprum";
  font-size: 14px;
}
.bread_kroshki li:nth-child(even) a {
  background-color: #1a1f2f;
}
.bread_kroshki li:nth-child(even) a:before {
  border-color: #1a1f2f;
  border-left-color: transparent;
}
.bread_kroshki li:nth-child(even) a:after {
  border-left-color: #1a1f2f;
}
.bread_kroshki li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 4px;
  border-radius: 3px 0 0 3px;
}
.bread_kroshki li:first-child a:before {
  border: none;
}
.bread_kroshki li:last-child a {
  padding-right: 12px;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0;
  border-radius: 0 3px 3px 0;
}
.bread_kroshki li:last-child a:after {
  border: none;
}
.bread_kroshki li a:before,
.bread_kroshki li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #1a1f2f;
  border-width: 17px 10px;
  width: 0;
  height: 0;
}
.bread_kroshki li a:before {
  left: -20px;
  border-left-color: transparent;
}
.bread_kroshki li a:after {
  left: 100%;
  border-color: rgba(0, 0, 0, 0);
  border-left-color: #1c1f29;
}
.bread_kroshki li a:hover {
  background-color: #152b73;
  color: #e5ebfd;
}
.bread_kroshki li a:hover:before {
  border-color: #152b73;
  border-left-color: transparent;
}
.bread_kroshki li a:hover:after {
  border-left-color: #152b73;
}
.bread_kroshki li a:active {
  background-color: #152b73;
}
.bread_kroshki li a:active:before {
  border-color: #152b73;
  border-left-color: transparent;
}
.bread_kroshki li a:active:after {
  border-left-color: #152b73;
}

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

Демонстрация

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

Здесь по сути можно доработать по оформлению, где-то больше закруглить углы или оставить, ведь все зависит, где и под какой стилистикой будет установка, что с большой вероятностью кто-то добавит тени. Но это уже сам веб-разработчик будет решать, как и в каком дизайне он решит устанавливать навигационную панельку.
2020-04-10 Загрузок: 1 Просмотров: 305 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar