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

Адаптивная закрепленная панель меню на CSS

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

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

1. На всю ширину монитора;

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

2. Мобильный поиск;

Код поиск по сайту

Мобильная навигация;

Мобильное меню навигации для сайта на CSS

Установка:

Шрифтовые кнопки:

Код
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

HTML

Код
<nav>
  <div class="menu-icon">
<span class="fas fa-bars"></span></div>
<div class="logo">
ZORNET.RU</div>
<div class="nav-items">
<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>
</div>
<div class="search-icon">
<span class="fas fa-search"></span></div>
<div class="cancel-icon">
<span class="fas fa-times"></span></div>
<form action="#">
  <input type="search" class="search-data" placeholder="Search" required>
  <button type="submit" class="fas fa-search"></button>
  </form>
</nav>

CSS

Код
nav{
  background: #171c24;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 100px;
}
nav .logo{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
}
nav .nav-items{
  display: flex;
  flex: 1;
  padding: 0 0 0 40px;
}
nav .nav-items li{
  list-style: none;
  padding: 0 15px;
}
nav .nav-items li a{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
nav .nav-items li a:hover{
  color: #ff3d00;
}
nav form{
  display: flex;
  height: 40px;
  padding: 2px;
  background: #1e232b;
  min-width: 18%!important;
  border-radius: 2px;
  border: 1px solid rgba(155,155,155,0.2);
}
nav form .search-data{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #fff;
  font-size: 17px;
  border: none;
  font-weight: 500;
  background: none;
}
nav form button{
  padding: 0 15px;
  color: #fff;
  font-size: 17px;
  background: #ff3d00;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
nav form button:hover{
  background: #e63600;
}
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
  width: 40px;
  text-align: center;
  margin: 0 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  display: none;
}
nav .menu-icon span,
nav .cancel-icon,
nav .search-icon{
  display: none;
}
@media (max-width: 1245px) {
  nav{
  padding: 0 50px;
  }
}
@media (max-width: 1140px){
  nav{
  padding: 0px;
  }
  nav .logo{
  flex: 2;
  text-align: center;
  }
  nav .nav-items{
  position: fixed;
  z-index: 99;
  top: 70px;
  width: 100%;
  left: -100%;
  height: 100%;
  padding: 10px 50px 0 50px;
  text-align: center;
  background: #14181f;
  display: inline-block;
  transition: left 0.3s ease;
  }
  nav .nav-items.active{
  left: 0px;
  }
  nav .nav-items li{
  line-height: 40px;
  margin: 30px 0;
  }
  nav .nav-items li a{
  font-size: 20px;
  }
  nav form{
  position: absolute;
  top: 80px;
  right: 50px;
  opacity: 0;
  pointer-events: none;
  transition: top 0.3s ease, opacity 0.1s ease;
  }
  nav form.active{
  top: 95px;
  opacity: 1;
  pointer-events: auto;
  }
  nav form:before{
  position: absolute;
  content: "";
  top: -13px;
  right: 0px;
  width: 0;
  height: 0;
  z-index: -1;
  border: 10px solid transparent;
  border-bottom-color: #1e232b;
  margin: -20px 0 0;
  }
  nav form:after{
  position: absolute;
  content: '';
  height: 60px;
  padding: 2px;
  background: #1e232b;
  border-radius: 2px;
  min-width: calc(100% + 20px);
  z-index: -2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }
  nav .menu-icon{
  display: block;
  }
  nav .search-icon,
  nav .menu-icon span{
  display: block;
  }
  nav .menu-icon span.hide,
  nav .search-icon.hide{
  display: none;
  }
  nav .cancel-icon.show{
  display: block;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.space{
  margin: 10px 0;
}
nav .logo.space{
  color: red;
  padding: 0 5px 0 0;
}
@media (max-width: 980px){
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon{
  margin: 0 20px;
  }
  nav form{
  right: 30px;
  }
}
@media (max-width: 350px){
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon{
  margin: 0 10px;
  font-size: 16px;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.content .space{
  margin: 10px 0;
}

JS

Код
const menuBtn = document.querySelector(".menu-icon span");
  const searchBtn = document.querySelector(".search-icon");
  const cancelBtn = document.querySelector(".cancel-icon");
  const items = document.querySelector(".nav-items");
  const form = document.querySelector("form");
  menuBtn.onclick = ()=>{
  items.classList.add("active");
  menuBtn.classList.add("hide");
  searchBtn.classList.add("hide");
  cancelBtn.classList.add("show");
  }
  cancelBtn.onclick = ()=>{
  items.classList.remove("active");
  menuBtn.classList.remove("hide");
  searchBtn.classList.remove("hide");
  cancelBtn.classList.remove("show");
  form.classList.remove("active");
  cancelBtn.style.color = "#ff3d00";
  }
  searchBtn.onclick = ()=>{
  form.classList.add("active");
  searchBtn.classList.add("hide");
  cancelBtn.classList.add("show");
  }

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

Демонстрация
2021-01-20 Загрузок: 1 Просмотров: 441 Комментарий: (0)

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

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

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

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