ZorNet.Ru — сайт для вебмастера » Меню для сайта » Меню боковой левой панели на JavaScript

Меню боковой левой панели на JavaScript

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

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

Изображение с демонстрации:

Боковое меню панели с использованием HTML, CSS и JavaScript

Установка:

Добавляем в HEAD для шрифтовых кнопок

Код

HTML

Код

<div class="karkas_navinats">
  <div class="menyu_razdelena">
  <div class="venyseda_panel">
  <div class="gamburgery">
  <a href="#">
  <i class="fas fa-bars"></i>
  </a>
  </div>
  </div>
  <div class="konteyner_opusavea">
  Здесь страница сайта или описание под тематику.
  </div>
  </div>
  <div class="desamuves">
  <div class="kabunetun">
  <img src="https://i.ibb.co/Fm2mYBv/00142044.jpg" alt="kabunetun_picture">
  <h3>Kosten</h3>
  <p>ZorNet.Ru - для вебмастера</p>
  </div>
  <ul>
  <li>
  <a href="#" class="deystvuyus">
  <span class="icon"><i class="fas fa-home"></i></span>
  <span class="item">Главная</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-desktop"></i></span>
  <span class="item">Каталог файлов</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-user-friends"></i></span>
  <span class="item">Каталог статей</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-tachometer-alt"></i></span>
  <span class="item">Раздел блога</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-database"></i></span>
  <span class="item">Раздел форума</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-chart-line"></i></span>
  <span class="item">Reports</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-user-shield"></i></span>
  <span class="item">Admin</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon"><i class="fas fa-cog"></i></span>
  <span class="item">Настройки</span>
  </a>
  </li>
  </ul>
  </div>

  </div>

CSS

Код

.karkas_navinats .desamuves {
  background: rgb(0 64 100);
  position: fixed;
  top: 0;
  left: 0;
  width: 230px;
  height: 100%;
  padding: 20px 0;
  transition: all 0.5s ease;
}

.karkas_navinats .desamuves .kabunetun{
  margin-bottom: 30px;
  text-align: center;
}

.karkas_navinats .desamuves .kabunetun img{
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}

.karkas_navinats .desamuves .kabunetun h3{
  color: #eaeff1;
  margin: 10px 0 5px;
}

.karkas_navinats .desamuves .kabunetun p{
  color: rgb(206, 240, 253);
  font-size: 14px;
}

.karkas_navinats .desamuves ul li a{
  display: block;
  padding: 13px 30px;
  border-bottom: 1px solid #10558d;
  color: rgb(241, 237, 237);
  font-size: 16px;
  position: relative;
}

.karkas_navinats .desamuves ul li a .icon{
  color: #dee4ec;
  width: 30px;
  display: inline-block;
}



.karkas_navinats .desamuves ul li a:hover, .karkas_navinats .desamuves ul li a.deystvuyus {
  color: #0c4e6c;
  background: #e2f1f5;
  border-right: 2px solid rgb(9 56 82);
}

.karkas_navinats .desamuves ul li a:hover .icon,
.karkas_navinats .desamuves ul li a.deystvuyus .icon{
  color: #0c7db1;
}

.karkas_navinats .desamuves ul li a:hover:before,
.karkas_navinats .desamuves ul li a.deystvuyus:before{
  display: block;
}

.karkas_navinats .menyu_razdelena{
  width: calc(100% - 225px);
  margin-left: 226px;
  transition: all 0.5s ease;
}

.karkas_navinats .menyu_razdelena .venyseda_panel {
  background: rgb(49 101 145);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 28px;
}

.karkas_navinats .menyu_razdelena .venyseda_panel .gamburgery a{
  font-size: 28px;
  color: #edf1f3;
}

.karkas_navinats .menyu_razdelena .venyseda_panel .gamburgery a:hover{
  color: #a2ecff;
}

  .karkas_navinats .menyu_razdelena .konteyner_opusavea{
  margin: 30px;
  background: #edf1f3;
  padding: 50px;
  line-height: 28px;
}

body.deystvuyus .karkas_navinats .desamuves {
  left: -230px;
}

body.deystvuyus .karkas_navinats .menyu_razdelena{
  margin-left: 0;
  width: 100%;
}

Код

var gamburgery = document.querySelector(".gamburgery");
  gamburgery.addEventListener("click", function(){
  document.querySelector("body").classList.toggle("deystvuyus");
  })

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

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

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

31 Августа 2022 Загрузок: 1 Просмотров: 805 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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