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

Адаптивное выпадающее меню сайта на CSS

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

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

Рассмотрим основной дизайн:

1. При открытие на широком мониторе;

Адаптивное горизонтальное многоуровневое выпадающая навигация

2. Плавный переход под панель мобильных аппаратов;

Мобильное меню сайта с помощью CSS

3. Здесь как раз сделали клик, чтоб показалось основа с переходами;

Адаптивное выпадающее меню на CSS3 и без jQuery, JS

Установка:

HTML

Код
<nav class="navigasua">
  <div class="kandelos-bulens">
  <input type="checkbox" id="mobile-manug"/>
  <label for="mobile-manug">
  <span></span>
  <span></span>
  <span></span>
  </label>

  <h1 class="kulaga-uvaden">zornet.ru</h1>

  <ul class="mobka-asuna kedsan-milagas">
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Блоги</a></li>
  <li><span>Скачать файлы</span>
  <ul>
  <li><a href="#">Под меню №1</a></li>
  <li><a href="">Под меню №2</a></li>
  <li><a href="#">Под меню №3</a></li>
  </ul>
  </li>
  <li><a href="#">Контакт!</a></li>
  </ul>
   
  </div>
</nav>

CSS

Код
.kulaga-uvaden {
  font-size: 2rem;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin: 0 1rem;
  cursor: pointer;
}

/* --- Элементы --- */
.kandelos-bulens {
  max-width: 1200px; /* максимальная ширина содержимого сайта */
  margin: 0 auto; /* по центру и горизонтали */
}

.navigasua {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fbf3f3;
  height: 60px;
}

.navigasua .kandelos-bulens {
  display: flex;
  align-items: center; /* вертикально по центру */
  height: 100%;
}

/* Скрыть флажок, управляющий кнопкой мобильной навигации*/
#mobile-manug {
  display: none;
}

/* Кнопка мобильной навигации */
#mobile-manug + label {
  position: relative;
  display: none;
  width: 60px;
  height: 60px;
  overflow: hidden;
  background-color: transparent;
  transition: all 300ms ease-in-out;
}

/* Панели кнопок мобильной навигации */
#mobile-manug + label span {
  position: absolute;
  display: block;
  background-color: #5f5959;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  left: 50%;
  transform: translate(-50%, -50%); /* центрирующий трюк */
  transition: all 300ms ease-in-out;
}

/* Панели кнопок мобильной навигации по отдельности */
#mobile-manug + label span:nth-child(1) {
  top: 35%;
}
#mobile-manug + label span:nth-child(2) {
  top: 50%;  
}
#mobile-manug + label span:nth-child(3) {
  top: 65%;  
}

/* Стиль кнопок мобильной навигации для отмеченного */
#mobile-manug:checked + label {
  background-color: #655c5c;
}

#mobile-manug:checked + label span {
  background-color: white;
}

/* Превратите полоски в крестик */
#mobile-manug:checked + label span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);  
}
#mobile-manug:checked + label span:nth-child(2) {
  left: -150%;  
}
#mobile-manug:checked + label span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);  
}

/* Главный рабочий Nav */
.mobka-asuna {
  flex-grow: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #211e1e;
}

.mobka-asuna li {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;  
  text-align: center;
}

.mobka-asuna li a,
.mobka-asuna li span {
  display: block;
  width: 100%;
  height: 100%;
}

.mobka-asuna li a:hover,
.mobka-asuna li span:hover {
  border-bottom: 4px solid #655c5c;
}

.mobka-asuna li > ul {
  max-height: 0px;  
  transition: all 500ms ease-in-out;
  overflow: hidden;
}

.mobka-asuna li:hover > ul {
  max-height: 180px;  
  height: auto;
}

.mobka-asuna li > ul li a,
.mobka-asuna li > ul li span {
  background-color: white;
}

.mobka-asuna li > ul li a:hover,
.mobka-asuna li > ul li span:hover {
  background-color: #655c5c;
  color: white;
  border-bottom: none;
}

/* Планшетный и мобильный просмотр */
@media (max-width: 768px) {
  .kulaga-uvaden {
  font-size: 1.5rem;
  flex-grow: 1;
  text-align: center;
  }
   
  #mobile-manug + label {
  display: block; /* показать кнопку мобильной навигации */
  }
   
  .mobka-asuna {
  max-height: 0px; /* тот же трюк с вертикальным переходом роста, что и выше */
  height: calc(100vh - 60px); /* возьмите полную высоту вертикального окна просмотра, -60 пикселей для навигации */
  overflow: hidden;
  position: absolute;
  top: 60px;
  line-height: auto;
  left: 0;
  width: 100%;
  flex-direction: column;
  background-color: #f3f3f3;
  transition: all 500ms ease-in-out;
  }
   
  #mobile-manug:checked ~ .mobka-asuna {
  max-height: calc(100vh - 60px);
  transition: all 500ms ease-in-out;
  }

  .mobka-asuna li span {
  position: relative;
  }
   
  /* дизайн и положение стрелки вниз */
  .mobka-asuna li span:after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  margin-left: 8px;
  transform: translateY(-50%) rotate(-45deg);
  border-left: 2px solid #666;
  border-bottom: 2px solid #666;
  }
   
  .mobka-asuna li a:hover,
  .mobka-asuna li span:hover {
  background-color: #655c5c;
  color: white;
  border-bottom: none;
  }
   
  .mobka-asuna li > ul li {
  position: relative;
  }
   
  .mobka-asuna li > ul li a,
  .mobka-asuna li > ul li span {
  background-color: #e6e0e0;
  }  
}

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

Демонстрация
26 Августа 2021 Загрузок: 1 Просмотров: 1202 Комментариев: (0)

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

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

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

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