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

Меню вертикальной навигации в CSS + JS

Меню вертикальной навигации в CSS + JS
Это вертикальное меню нового образца сайта, которое при клике будет расшириться, где изначально видим иконки, а по развороту идут ключевые слова. Если брать конструкцию, то она простая для этой навигации, ведь вертикальное меню выполнено с использованием HTML и CSS, а также JS, который нужен нам для функции развертывание. Здесь сама задумка хорошо исполнена, ведь можно и другой функционал задействовать, главное, что функционал полностью рабочий, где подойдет на разные тематические сайты. Что по заданным данным, это ширина, здесь все выставлено, чтоб смотрелось корректно, а вдруг вам нужно добавить, то все редактируется в прикрепленной стилистике.

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

При проверки на работоспособность:

Современное меню для сайта

Установка:

Для начало подключим кнопки на страницу или по всему сайту:

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML

Код
<div class="osnova-karkas">
  <div class="nuvegas">
  <div class="vedukas">
  <div class="povades-1"></div>
  <div class="povades-2"></div>
  </div>
  <ul>
  <li>
  <i class="fas fa-home fa-lg"></i>
  <span>ZORNET.RU</span>
  </li>
  <li>
  <i class="fas fa-envelope fa-lg"></i>
  <span>ГЛАВНАЯ</span>
  </li>
  <li>
  <i class="fas fa-cog fa-lg"></i>
  <span>КАТАЛОГИ</span>
  </li>
  <li>
  <i class="fas fa-sign-out-alt fa-lg"></i>
  <span>РАЗДЕЛЫ</span>
  </li>
  </ul>
  </div>
</div>

CSS

Код
.osnova-karkas {
  position: relative;
}

.nuvegas {
  width: 67px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: 0.5s;
}

.nuvegas.akilodsa {
  width: 225px;
}

.vedukas {
  position: absolute;
  top: -20px;
  right: -15px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  z-index: 1;
  background-color: #000000;
  border: 4px solid #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.povades-1,
.povades-2 {
  height: 2px;
  width: 15px;
  background-color: #ffffff;
  transition: 0.5s ease;
}

.povades-1 {
  transform: rotate(-35deg) translate(5px, 8px);
}

.povades-2 {
  transform: rotate(35deg) translate(-8px, 0px);
}

.nuvegas.akilodsa .povades-1 {
  transform: rotate(-45deg) translate(5px, 6px);
}

.nuvegas.akilodsa .povades-2 {
  transform: rotate(45deg) translate(-5px, 6px);
}

ul {
  position: relative;
  width: 100%;
}

li {
  position: relative;
  list-style: none;
  height: 75px;
  width: 100%;
  padding-left: 23px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

li:hover {
  background-color: #dddddd;
}

span {
  margin-left: 20px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
}

.nuvegas.akilodsa span {
  visibility: visible;
  opacity: 1;
}

JS

Код
let menu = document.querySelector('.nuvegas');
let toggle = document.querySelector('.vedukas');

toggle.addEventListener('click', () => {
  menu.classList.toggle('akilodsa');
});

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

Демонстрация
2022-07-16 Загрузок: 1 Просмотров: 382 Комментарий: (0)

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

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

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

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