TERONI.RU



» » Адаптивное горизонтальное меню на CSS и JS



Адаптивное горизонтальное меню на CSS и JS

Адаптивное горизонтальное меню на CSS и JS
Отличное адаптивное горизонтальное меню на CSS и JS. Простая по конструкций адаптивная панель для горизонтальной навигации, которая создана при помощи HTML, CSS и jаvascript на все размеры экранов. В этой статье мы создадим полностью адаптивную панель навигации, которая будет создана с нуля, где немного задействуем jаvascript, что на прямую отвечает за переключение категорий или разделов.Такой стиль адаптивной панели можно поставить на многие тематические сайты.

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

Установка адаптивного меню


Если библиотека не подключена, то нужно поставить по месту.

<script
  src="https://code.jquery.com/jquery-3.3.1.js">
</script>

Это шрифтовые кнопки, что появятся на мобильных размерах экрана.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

HTML

<nav id="main">
  <div class="napravlenis"><i class="fas fa-bars navigatsiu"></i></div>
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Каталоги</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS

nav {
  width: 100%;
  background: #0e3f79;
}

ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 24px;
}

ul li:hover {
  background: #e91e63;
}

ul li a{
  color: #ebeff3;
  text-decoration: none;
  padding: 35px;
}

.napravlenis {
  width: 100%;
  padding: 14px 18px;
  background: #0a2f5a;
  text-align: right;
  box-sizing: border-box;
  color: #f1eded;
  font-size: 32px;
  display: none;
}

@media (max-width: 768px){
  .napravlenis {
  display: block;
  }
  ul {
  width: 100%;
  display: none;
  }

  ul li {
  display: block;
  text-align: center;
  }
  .deystvuyus {
  display: block;
  }
  }

JS

$(document).ready(function() {
   
  $(".navigatsiu").click(function() {
  $("ul").toggleClass("deystvuyus");
  })
})

посмотреть пример
Вот как будет выглядит, как пропишите все коды и стили. Обратите внимание на маленький значок гамбургера в верхнем левом углу можно редактировать как саму панель.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.