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

Мобильная навигация сайтов на CSS + JS

В статье представлена мобильная навигация, которая по умолчанию скрыта, но есть иконок-гамбургер, где при клике появится меню с красивым эффектом. А это появление ключевых фраз идет самого верху, и как только доходит до низа, то идет эффект батута или отдачи, что несколько раз подпрыгивает, где смотрится очень интересно. Все это изначально представлено на синем фоне, и безусловно с hover эффекты при наведении.

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

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

При открытие:

Также здесь нам не нужна библиотека, это полностью функциональная навигация создана при помощи JavaScript и CSS для основного оформления навигации.

Установка:

HTML

Код

<nav class="menu">
  <button class="popular_searches">
  <div class="unoveg-1"></div>
  <div class="unoveg-2"></div>
  <div class="unoveg-3"></div>
  </button>

  <ul class="navigatsion">
  <li class="asumpkudon">Главная</li>
  <li class="asumpkudon">Скачать</li>
  <li class="asumpkudon">Профиль</li>
  <li class="asumpkudon">Скрипты</li>
  <li class="asumpkudon">Дизайн</li>
  <li class="asumpkudon">Контакты</li>
  </ul>
  </nav>

CSS

Код

.popular_searches {
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  position: fixed;
  right: 2%;
  margin-top: 0.5rem;
}

.unoveg-1,
.unoveg-2,
.unoveg-3 {
  height: 0.3rem;
  background-color: #fff;
  width: 2rem;
  margin-bottom: 0.3rem;
  box-shadow: 0 0.5rem 1rem;
}

.navigatsion {
  list-style: none;
  background-color: rgba(9, 35, 130, 1);
  position: fixed;
  right: 0;
  top: 0;
  text-transform: uppercase;
  color: white;
  font-family: Roboto;
  text-align: left;
  min-height: 100vh;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100rem);
  visibility: hidden;
  transition: all 1s cubic-bezier(0.27, 1.58, 0.36, 0.64);
}

.asumpkudon {
  padding: 1rem;
  cursor: pointer;
  transition: all 1s cubic-bezier(0.27, 1.58, 0.36, 0.64);
}

.asumpkudon:hover {
  background-color: #096d9c;
  border-radius: 0.2rem;
}
.asumpkudon:not(:last-child) {
}

.edium-adekin {
  transform: translateY(0);
  visibility: visible;
}

Код

const btn = document.querySelector(".popular_searches");
const shownavigatsion = (event) => {
document.querySelector(".navigatsion").classList.toggle("edium-adekin");

};
btn.addEventListener("click", shownavigatsion);

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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