ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Вертикальное меню для сайта на Javascript

Вертикальное меню для сайта на Javascript

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

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

Так выглядит в рабочем состояние:

Навигационное меню в адаптивной верстке для сайта на CSS

Установка:

HEAD

Код

HTML

Код

<ul class="vertical-navigatsiya animated">
  <li class="categories-menyu">
  <input type="checkbox" name ="group-1" id="group-1" checked>
  <label for="group-1">Главная</label>

  <ul>
  <li class="categories-menyu">
  <input type="checkbox" name ="sub-group-1" id="sub-group-1">
  <label for="sub-group-1">Уроки</label>

  <ul>
  <li><a href="http://zornet.ru/">zornet.ru</a></li>
  <li><a href="/">Коды</a></li>
  <li><a href="/">Скрипты</a></li>
  </ul>
  </li>
  <li class="categories-menyu">
  <input type="checkbox" name ="sub-group-2" id="sub-group-2">
  <label for="sub-group-2">Контакты</label>

  <ul>
  <li class="categories-menyu">
  <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
  <label for="sub-group-level-3">Интересно</label>

  <ul>
  <li><a href="/">Как сделать</a></li>
  <li><a href="/">Подробно</a></li>
  </ul>
  </li>
  <li><a href="/">Разработка</a></li>
  </ul>
  </li>
  <li><a href="/">Веб-дизайн</a></li>
  <li><a href="/">Вопросы</a></li>
  </ul>
  </li>

  <li class="categories-menyu">
  <input type="checkbox" name ="group-2" id="group-2">
  <label for="group-2">Установка</label>

  <ul>
  <li><a href="/">Установка CMS</a></li>
  <li><a href="/">Установка Денвера</a></li>
  </ul>
  </li>

  <li class="categories-menyu">
  <input type="checkbox" name ="group-3" id="group-3">
  <label for="group-3">Приложения</label>

  <ul>
  <li><a href="/">Скрипты</a></li>
  <li><a href="/">Изображения</a></li>
  </ul>
  </li>

  <li class="categories-menyu">
  <input type="checkbox" name ="group-4" id="group-4">
  <label for="group-4">Как создать</label>

  <ul>
  <li class="categories-menyu">
  <input type="checkbox" name ="sub-group-3" id="sub-group-3">
  <label for="sub-group-3">Инструкции</label>

  <ul>
  <li><a href="/">CSS</a></li>
  <li><a href="/">jQuery</a></li>
  </ul>
  </li>
  <li><a href="/">Про компанию</a></li>
  <li><a href="/">Связаться на прямую</a></li>
  </ul>
  </li>
  </ul>

CSS

Код

h1 {
  text-align: center;
  width: 90%;
  margin: 2em auto 0;
  font-size: 2.4rem;
  color: #507b55;
  font-weight: bold;
}
@media only screen and (min-width: 600px) {
  h1 {
  font-size: 3.2rem;
  }
}

input {
  font-family: "Jaldi", sans-serif;
  font-size: 1.6rem;
}

.vertical-navigatsiya {
  width: 90%;
  max-width: 600px;
  background: #4d5158;
  margin: 4em auto;
  box-shadow: 0 4px 40px #70ac76;
}
.vertical-navigatsiya ul {
  /* by default hide all sub menus */
  display: none;
}
.vertical-navigatsiya li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.vertical-navigatsiya input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.vertical-navigatsiya label, .vertical-navigatsiya a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1.6rem;
}
.no-touch .vertical-navigatsiya label:hover, .no-touch .vertical-navigatsiya a:hover {
  background: #52565d;
}
.vertical-navigatsiya label::before, .vertical-navigatsiya label::after, .vertical-navigatsiya a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.vertical-navigatsiya label {
  cursor: pointer;
}
.vertical-navigatsiya label::before, .vertical-navigatsiya label::after {
  background-image: url(http://zornet.ru/Abavaga/znachok-dlya-navigatsiy.svg);
  background-repeat: no-repeat;
}
.vertical-navigatsiya label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.vertical-navigatsiya label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
.vertical-navigatsiya a::after {
  /* image icon */
  left: 36px;
  background: url(http://zornet.ru/Abavaga/cd-icons.svg) no-repeat -48px 0;
}
.vertical-navigatsiya input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.vertical-navigatsiya input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.vertical-navigatsiya input[type=checkbox]:checked + label + ul,
.vertical-navigatsiya input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.vertical-navigatsiya ul label,
.vertical-navigatsiya ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}
.no-touch .vertical-navigatsiya ul label:hover, .no-touch
.vertical-navigatsiya ul a:hover {
  background: #3c3f45;
}
.vertical-navigatsiya > li:last-of-type > label,
.vertical-navigatsiya > li:last-of-type > a,
.vertical-navigatsiya > li > ul > li:last-of-type label,
.vertical-navigatsiya > li > ul > li:last-of-type a {
  box-shadow: none;
}
.vertical-navigatsiya ul label::before {
  left: 36px;
}
.vertical-navigatsiya ul label::after,
.vertical-navigatsiya ul a::after {
  left: 59px;
}
.vertical-navigatsiya ul ul label,
.vertical-navigatsiya ul ul a {
  padding-left: 100px;
}
.vertical-navigatsiya ul ul label::before {
  left: 54px;
}
.vertical-navigatsiya ul ul label::after,
.vertical-navigatsiya ul ul a::after {
  left: 77px;
}
.vertical-navigatsiya ul ul ul label,
.vertical-navigatsiya ul ul ul a {
  padding-left: 118px;
}
.vertical-navigatsiya ul ul ul label::before {
  left: 72px;
}
.vertical-navigatsiya ul ul ul label::after,
.vertical-navigatsiya ul ul ul a::after {
  left: 95px;
}
@media only screen and (min-width: 600px) {
  .vertical-navigatsiya label, .vertical-navigatsiya a {
  padding: 24px 24px 24px 82px;
  font-size: 1.9rem;
  }
  .vertical-navigatsiya label::before {
  left: 24px;
  }
  .vertical-navigatsiya label::after {
  left: 53px;
  }
  .vertical-navigatsiya ul label,
  .vertical-navigatsiya ul a {
  padding-left: 106px;
  }
  .vertical-navigatsiya ul label::before {
  left: 48px;
  }
  .vertical-navigatsiya ul label::after,
  .vertical-navigatsiya ul a::after {
  left: 77px;
  }
  .vertical-navigatsiya ul ul label,
  .vertical-navigatsiya ul ul a {
  padding-left: 130px;
  }
  .vertical-navigatsiya ul ul label::before {
  left: 72px;
  }
  .vertical-navigatsiya ul ul label::after,
  .vertical-navigatsiya ul ul a::after {
  left: 101px;
  }
  .vertical-navigatsiya ul ul ul label,
  .vertical-navigatsiya ul ul ul a {
  padding-left: 154px;
  }
  .vertical-navigatsiya ul ul ul label::before {
  left: 96px;
  }
  .vertical-navigatsiya ul ul ul label::after,
  .vertical-navigatsiya ul ul ul a::after {
  left: 125px;
  }
}
.vertical-navigatsiya.animated label::before {
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

Код

jQuery(document).ready(function(){
  var accordionsMenu = $('.vertical-navigatsiya');

  if( accordionsMenu.length > 0 ) {

  accordionsMenu.each(function(){
  var accordion = $(this);

  accordion.on('change', 'input[type="checkbox"]', function(){
  var checkbox = $(this);
  console.log(checkbox.prop('checked'));
  ( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
  });
  });
  }
});

Разве только hover эффект при наведении здесь распределен по всем категориям и разделам, что можно каждому задать свой оттенок. То в первой навигаций только можно изначально выставить 2 эффекта, но это так на будущее. Так как можно посмотреть на demo странице первый и второй, а точнее этот вариант.

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

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

20 Марта 2020 Загрузок: 1 Просмотров: 1816 Комментариев: (8)

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

СКАЧАТЬ

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

Kosten

Комментарии: 8
Порядок вывода комментариев: snigirevpavel 10 Июня 2021 11:21¹ 0 Здравствуйте. не подскажите как сделать что бы при загрузке оно не открывалось а было в свернутом. вроде везде none. Похоже на скрипт а там я "0" Сопрано 10 Июня 2021 14:20² 0 Больше всего здесь нужно функцию в JS отключать, точнее убирать, только знать какую. snigirevpavel 10 Июня 2021 20:48³ 0 У меня без скриптов стоит на сайте нормально. Так здесь дело в css! Kosten 11 Июня 2021 00:19⁴ 0 Вы сами дизайн выстраивали. А по сути под такой дизайн такая навигация подойдет. Как без скрипта, но там вы прописали JS, что как раз за эту функцию отвечает, возможно кто то знает. Нужно под демонстрацию на codepen.io и там уже проверять, что нужно убрать, так, чтоб все корректно работало. snigirevpavel 11 Июня 2021 18:39⁵ 0 Да сам. Уже 5 раз переделывал. начинаешь читать узнаешь что-то новое и хочется чтоб пользователю и мне понравилось и было удобно но к сожалению пока тока учусь и поэтому не всё получается как надо. Kosten 11 Июня 2021 20:22⁶ +1 Вероятно вы изначально прозрачным по стилистике делаете. А на свет навигации, то открытую категорию можно оставить на самую актуальную тему. Так, что зайдя на сайт можно видеть ключевое слово, под такую структуру сделана навигия. snigirevpavel 12 Июня 2021 18:51⁷ +1 Все нашел как её сделать чтобы она не открывалась. Надо у тега input удалить checked (Предварительно активированный переключатель или флажок.) Kosten 12 Июня 2021 20:25⁸ 0 Отлично, такая информация может другим пригодиться.