ZorNet.Ru — сайт для вебмастера » Меню для сайта » Простая навигация сайта в адаптивном CSS

Простая навигация сайта в адаптивном CSS

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

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

Также проверенно по работоспособности, где ниже изображение, что будет на молом экране мобильного аппарата.

Красивый стиль навигации на CSS для сайта

Здесь уже в адаптивном режиме при просмотре с мобильного аппарата.

Мобильное меню для сайта на CSS3

Установка:

HTML

Код

<nav class="navigation">
  <ol>
  <li class="kavenges"><a href="/">Главная</a></li>
  <li class="kavenges"><a href="/">Файлы</a>
  <ol class="aselokus">
  <li class="kavenges"><a href="/">categories-1</a></li>
  <li class="kavenges"><a href="/">categories-2</a></li>
  <li class="kavenges"><a href="/">categories-3</a></li>
  </ol>
  </li>
  <li class="kavenges">
  <a href="/">Форум</a>
  <ol class="aselokus">
  <li class="kavenges"><a href="/">categories-1</a></li>
  <li class="kavenges"><a href="/">categories-2</a></li>
  <li class="kavenges"><a href="/">categories-3</a></li>
  </ol>
  </li>
  <li class="kavenges">
  <a href="/">Категории</a>
  <ol class="aselokus">
  <li class="kavenges"><a href="/">categories-1</a></li>
  <li class="kavenges"><a href="/">categories-2</a></li>
  <li class="kavenges"><a href="/">categories-3</a></li>
  </ol>
  </li>
  <li class="kavenges"><a href="/">Связь</a></li>
  </ol>
</nav>

CSS

Код

.navigation {
  margin: 15px;
}
.navigation > ol {
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.navigation > ol > li {
  background: #2c303a;
  color: #9b9dad;
  border-left: 5px solid #5a5f73;
  margin-bottom: 1px;
  position: relative;
  transition: 0.5s;
}

.navigation > ol > li a {
  color: #9b9dad;
  display: block;
  padding: 15px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.navigation > ol > li a:hover{
  color: #fff;
}
.navigation > ol > li a:not(:last-child):before {
  content: "";
  font-size: 0.75em;
  line-height: 50px;
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.5s;
}
.navigation > ol > li:focus,
.navigation > ol > li:focus-within,
.navigation > ol > li:hover {
  z-index: 100;
}

.navigation > ol > li:focus a:before,
.navigation > ol > li:focus-within a:before {
  transform: rotate(-180deg);
}
.navigation > ol > li:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: 0.5s;
  max-width: 0;
  overflow: hidden;
}
.navigation > ol .aselokus {
  list-style: none;
  max-height: 0px;
  overflow: hidden;
  position: relative;
  transition: 0.5s;
  z-index: 1;
}
.navigation > ol .aselokus li {
  font-size: 0.9em;
}
.navigation > ol .aselokus li a:after {
  bottom: 5px;
  height: 2px;
}
.navigation > ol .aselokus li a:hover:after,
.navigation > ol .aselokus li a:focus:after {
  width: 100%;
}
@media (min-width: 600px) {
  a:focus,
  a:hover {
  position: relative;
  }
  a:focus:after,
  a:hover:after {
  width: 100%;
  }
  a:after {
  left: 0;
  right: 0;
  margin: auto;
  }
  .navigation {
  margin: 0;
  margin-top: 40vh;
  }
  .navigation > ol {
  display: block;
  max-width: none;
  text-align: center;
  }
  .navigation > ol > li {
  border-top: 5px solid #5a5f73;
  border-left: 0;
  display: inline-block;
  margin-left: -5px;
  vertical-align: top;
  width: 120px;
  }
  .navigation > ol > li:hover .aselokus,
  .navigation > ol > li:focus .aselokus,
  .navigation > ol > li:focus-within .aselokus {
  max-height: 850px;
  }
  .navigation > ol .aselokus {
  border-left: 0;
  padding-left: 0;
  }
}
@media (min-width: 775px) {
  .navigation > ol > li {
  width: 150px;
  }
  .navigation > ol > li a:not(:last-child):before {
  right: 25px;
  }
}

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

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

01 Июня 2023 Загрузок: 3 Просмотров: 715 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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