ZorNet.Ru — сайт для вебмастера » Меню для сайта » Адаптивное меню при задействовании CSS3

Адаптивное меню при задействовании CSS3

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

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

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

Открытие страницы или портала:

Адаптивная горизонтальная навигация на CSS для сайта

Это вот как раз на мобильном экране при наведенье курсора:

Мобильное отзывчивое меню сайта на CSS

Установка:

HTML

Код

<header>
  <div class="emanag_amenus">
  <div class="navigatsiona_menyu">
  <a href="http://zornet.ru">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/logos.png">
  </a>
  </div>
  <nav>
  <ul>
  <li><a href="">Главная</a></li>
  <li><a href="">SEO</a></li>
  <li><a href="">HTML</a></li>
  <li><a href="">CSS</a></li>
  <li><a href="">Скрипты</a></li>
  <li><a href="">Коды</a></li>
  <li><a href="">Обратная связь</a></li>
  </ul>
  </nav>
  </div>
</header>

CSS

Код

header {
  padding: 15px 0;
  background: repeating-linear-gradient(45deg, #020202, #0a0a0a 20px, #060606 20px, #080808 40px);
  box-shadow: 0 3px 16px 1px rgb(84 84 84 / 67%);
}

.emanag_amenus {
  padding: 0 15px;
  max-width: 990px;
  margin: 0 auto;
}

.navigatsiona_menyu {
  float: left;
  margin-right: 15px;
}
.navigatsiona_menyu a {
  outline: none;
  display: block;
}
.navigatsiona_menyu img {display: block;}
nav {
  overflow: hidden;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
nav li {
  display: inline-block;
  margin-left: 18px;
  height: 72px;
  line-height: 72px;
  transition: .7s linear;
}

nav a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #e8dfdf;
  text-shadow: 0 1px 0 #000000;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: bold;
}

nav a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 17px;
  background: #afafaf;
  transition: width .3s linear;
}

nav a:hover:after {width: 100%;}

@media screen and (max-width: 660px) {
  header {text-align: center;}
  .navigatsiona_menyu {
  float: none;
  display: inline-block;
  margin: 0 0 16px 0;
  }
  ul {float: none;}
  nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
  display: block;
  margin: 0;
  height: 39px;
  line-height: 39px;
}
nav li:hover {background: rgba(19, 18, 18, 0.1);}
nav a:after {content: none;}
}

@media screen and (max-width: 580px) {
nav a:after {
  content: "";
  width: 0;
  height: 38px;
  position: absolute;
  left: 0;
  bottom: 0px;
  background: rgb(175 175 175 / 14%);
  transition: width .5s linear;
}
  }

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

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

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

22 Июля 2020 Загрузок: 1 Просмотров: 1233 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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