ZorNet.Ru — сайт для вебмастера » HTML и CSS » Варианты навигации 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. Вариант

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. Вариант

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

Код

HTML

Код

<ul class="bread_kroshki">
 <li><a href="#"> Домой</a></li>
 <li><a href="#"> Общение</a></li>
 <li><a href="#"> Материалы</a></li>
 <li><a href="#"> Файлы</a></li>
 <li><a href="#"> Компаний</a></li>
 <li><a href="#"> Дизайн</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, кроме второй панели, и безусловно присутствует эффекты при наведении клика.

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

10 Апреля 2020 Загрузок: 1 Просмотров: 869 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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