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

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

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

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

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

Установка:

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

Код

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;
}

Код

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

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

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

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

16 Июля 2022 Загрузок: 5 Просмотров: 1271 Комментариев: (7)

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

СКАЧАТЬ

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

Kosten

Похожие материалы

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

Комментарии: 7
Порядок вывода комментариев: AlenDelonUFA 14 Ноября 2023 13:12¹ 0 Вот это меню AlenDelonUFA 14 Ноября 2023 13:27² 0 Как его зафиксировать слева по центру? Kosten 14 Ноября 2023 16:23³ 0 Как понять с лево по центру, это получается вам нужно, чтоб при клике выдвигалось меню по правую сторону, но также оставалось по центру. Snoopak 14 Ноября 2023 17:55⁴ +2 Очень просто, все делается при помощи абсолютного позиционирования. Обернуть в ещё один div код с публикации, напр.: Код <div class="fixed-menu__left">код с публикации</div> Далее в CSS прописать для div'a Код .fixed-menu__left {position: fixed; top: calc(50% - 150px); left: 20px;} ---------- AlenDelonUFA 16 Ноября 2023 03:41⁵ 0 У меня не открывается меню по стрелочке AlenDelonUFA 16 Ноября 2023 04:44⁶ 0 Если брать с архива файлы то всё работает, если брать с кодов которые прописаны на сайте то не работает! Особо не вникал, но с сайта коды что написаны не работает меню, с архива если брать то работает -SAM- 16 Ноября 2023 05:47⁷ 0 AlenDelonUFA, тут в материале JS указан как бы, а куда ставить - нужно знать. Код скрипта на меню прописывать нужно после HTML-кода меню, как оно указано в материале и как оно идёт в демо (и в прикрепленном архиве). Если ставить код перед меню, как у вас было - нужно делать: Код <script> $(document).ready(function(){ ТУТ СКРИПТ НА МЕНЮ }); </script> Но в вашем случае не поможет, пока сперва библиотеку jQuery не подключите в исходнике повыше (в </head> нужно). Или можно реализовать на чистом JS. Или же можно подключать в </head> отдельным файлом примерно так: Код <script defer src="/js/menu.js"></script> Атрибут defer - откладывает выполнение скрипта до полной загрузки документа страницы. Короче, ключевое из вашего сообщения, что "особо не вникал" © - материал выложен рабочий!