ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивное меню в темном стиле CSS + HTML

Адаптивное меню в темном стиле CSS + HTML

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

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

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

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

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

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

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

Приступаем к установке:

HTML

Код

<nav class="garkolpan">
  <input class="kobusine-samtuksa" id="kobusine-samtuksa" type="checkbox">
  <label class="ansord-sexpanar-nkolas" for="kobusine-samtuksa"><i class="fa fa-bars" style="font-size:25px;"></i></label>
  <ul class="kistemad-ukadgtun">
  <li><a href="http://zornet.ru">Главная</a></li>
  <li><a href="#">SEO</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Каталог</a></li>
  <li><a href="#">Модули</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS

Код

.garkolpan {
  background-color: #18181b;
  color: #f7f6f6;
  margin: 0;
  padding: 10px;
  font-size: 16px;
  box-shadow: 1px 3px 7px 2px rgba(33, 31, 31, 0.43), 0px 5px 30px 4px rgba(23, 21, 21, 0);
}

.kistemad-ukadgtun {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kistemad-ukadgtun a {
  color: inherit;
  display: inline-block;
  padding: 1rem;
  text-decoration: none;
  border: 1px solid rgba(251, 251, 251, 0);
}

.kistemad-ukadgtun a:focus, .kistemad-ukadgtun a:hover {
  background-color: #403e3e;
  outline: none;
  border-radius: 5px;
  border: 1px solid #636567;
}

.kistemad-ukadgtun a:active {
  background-color: #5a5757;
}

.ansord-sexpanar-nkolas {
  cursor: pointer;
  display: none;
  padding: 1rem;
  user-select: none;
}

.kobusine-samtuksa:focus ~ .ansord-sexpanar-nkolas,
.ansord-sexpanar-nkolas:hover {
  background-color: #353333;
}

.kobusine-samtuksa {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

@media (max-width: 800px) {
  .kistemad-ukadgtun {
  flex-direction: column;
  }

  .kistemad-ukadgtun a {
  width: 93%;
  }

  .kobusine-samtuksa:not(:checked) ~ .kistemad-ukadgtun {
  display: none;
  }

  .ansord-sexpanar-nkolas {
  display: inline-block;
  }
}

Под мобильную настройку media выставлено на max-width: 800px, что зависит от запросов, если их больше, то здесь меняем значение.

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

06 Сентября 2018 Просмотров: 1558 Комментариев: (0)

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

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

Kosten

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