» »

Вертикальное меню аккордеон на CSS + jQuery

Вертикальное меню аккордеон на CSS + jQuery

Стильное и по конструкции компактное вертикальное меню, которое создано в стиле Аккордеон, где применены CSS3 и jQuery для функциональности. Теперь веб мастер может поставить его в любой блок, где автоматически она выставится, также в стилистике можно его редактировать, как вам нужно. Это расставить все оттенки цвета, чтоб отлично влился в основной дизайн сайта и как вы сами видите на своем ресурсе. Безусловно есть очень много материалов в таком плане, что созданы на jQuery, где основном можно увидеть на стилях.

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

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

Так можно увидеть при входе на сайт или страницу.

Вертикальное меню аккордеон на jQuery и CSS

Открываем категорию и там уже прописаны все запросы для быстрого поиска.

Вертикальное раздвижное меню с описанием на CSS3

Приступаем к установке:

HTML

Код
<ul class="generatio-nmemory">
  <li>
  <div class="begunamas-production"><i class="fa fa-road" aria-hidden="true"></i> ZORNET.RU
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
  </div>
  <ul class="developers-accidentaly">
  <li><a href="#">Как создать сайт на CSS</a></li>
  <li><a href="#">Как создать сайт на CSS2</a></li>
  </ul>
  </li>
  <li>
  <div class="begunamas-production"><i class="fa fa-paper-plane" aria-hidden="true"></i> Коды HTML  
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
  </div>
  <ul class="developers-accidentaly">
  <li><a href="#">Скрипты для сайта 1</a></li>
  <li><a href="#">Скрипты для сайта 2</a></li>
  <li><a href="#">Скрипты для сайта 3</a></li>
  </ul>
  </li>
  <li>
  <div class="begunamas-production"><i class="fa fa-quote-left" aria-hidden="true"></i> Дизайн сайта
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
  </div>
  <ul class="developers-accidentaly">
  <li><a href="#">Шаблоны для портала 1</a></li>
  <li><a href="#">Шаблоны для портала 2</a></li>
  <li><a href="#">Шаблоны для портала 3</a></li>
  </ul>
  </li>
  <li>
  <div class="begunamas-production"><i class="fa fa-motorcycle" aria-hidden="true"></i> Раскрутка SEO
  <i class="fa fa-chevron-down" aria-hidden="true"></i>
  </div>
  <ul class="developers-accidentaly">
  <li><a href="#">Action book 1</a></li>
  <li><a href="#">Action book 2</a></li>
  <li><a href="#">Action book 3</a></li>
  </ul>
  </li>
</ul>

CSS

Код
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

h2 {
  text-align: center;
  margin: 20px auto;
  color: #fff;
}

.generatio-nmemory {
  width: 100%;
  max-width: 371px;
  margin: 57px auto 18px;
  background: #ece9e9;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.generatio-nmemory li.open .begunamas-production {
  color: #177512;
  font-weight: bold;
  }

.generatio-nmemory li.open + li {
  border-top: 1px solid #b3aaaa;
  }

/* поворот наоботот */
.generatio-nmemory li:not(.open) .begunamas-production .fa-chevron-down {
  -moz-transform: rotate(90deg); /* Для Firefox */
  -ms-transform: rotate(90deg); /* Для IE */
  -webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */
  -o-transform: rotate(90deg); /* Для Opera */
  transform: rotate(270deg);
}

.generatio-nmemory li.open .begunamas-production {
  border-bottom: 1px dashed #b3aaaa;
}  

.begunamas-production {
  cursor: pointer;
  display: block;
  padding: 14px 14px 14px 37px;
  font-size: 18px;
  border-bottom: 1px solid #b3aaaa;
  color: #274052;
  position: relative;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  font-weight: bold;
}
   
  .begunamas-production i {
  position: absolute;
  top: 15px;
  left: 15px;
  }
  .begunamas-production .fa-chevron-down {
  right: 12px;
  left: auto;
  }

.developers-accidentaly {
  display: none;
  background: #bad4dc;
}

.developers-accidentaly a {
  display: block;
  color: #545151;
  padding: 10px 10px 10px 38px;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  background-color: #caf4fb;
  font-weight: bold;
  font-size: 14px;
}
  .developers-accidentaly:hover {
color: #b5e6ef;
  }

.developers-accidentaly a:hover {
  color: #691401;
  text-decoration: underline;
}

JS

Код
$(function() {
  var Accordion = function(el, multiple) {
  this.el = el || {};
  // more then one submenu open?
  this.multiple = multiple || false;
   
  var dropdownlink = this.el.find('.begunamas-production');
  dropdownlink.on('click',
  { el: this.el, multiple: this.multiple },
  this.dropdown);
  };
   
  Accordion.prototype.dropdown = function(e) {
  var $el = e.data.el,
  $this = $(this),
  //this is the ul.submenuItems
  $next = $this.next();
   
  $next.slideToggle();
  $this.parent().toggleClass('open');
   
  if(!e.data.multiple) {
  //show only one menu at the same time
  $el.find('.developers-accidentaly').not($next).slideUp().parent().removeClass('open');
  }
  }
   
  var accordion = new Accordion($('.generatio-nmemory'), false);
})

Выбираем категорию и делаем клик, там появляются под меню и вот весь выбор, где не чего такого сложного в применение нет, все как на простой навигаций.

Автоматическое разворачивание на основе текущей страницы и элемента. Если этот флажок установлен, этот параметр автоматически расширяет подменю на основе текущей страницы.

Демонстрация
27.06.2018 Просмотров: 299 Комментарий: (3)

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

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

Комментарий: 3
Kosten
Kosten 27.06.2018 04:091
0
Здесь тема была на материале га SCSS, что перекинул на CSS, и где ошибки показывало, то стили переписал, но так получилось. то при открытие, в меню все категорий аналогично раскрыты, хотя должны закрыты.

Возможно, кто знаком стилями, то плиз подскажите, как сделать правильно, чтоб при открытие сайта все категорий закрыты были, и уже самостоятельно по клику открывать.
-SAM-
-SAM- 28.06.2018 02:162
0
Там стили поломаны, проверьте вложенность... не закрыт } и в предыдущий класс вложен другой.

UPD.: ну, так оно до переписки вами работало нормально же, а источника не указали, откуда брали... исходя из того, что было вами скинуто, я исправил-переписал: Доступно только для пользователей
Kosten
Kosten 28.06.2018 03:073
0
Вот про это и говорю, здесь на сайте не выдавало ошибки, что на демонстраций. Но когда начинаю исправлять, то все значение по углам расходятся, что приходится открывать.
avatar