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

Адаптивное меню с прокруткой категорий

Адаптивное меню с прокруткой категорий
Оригинальный вид для адаптивного меню в CSS, которое прокручивает категорий, ведь по сторонам установлены кнопки, где отлично смотрится на сайте. По своим характеристикам, то здесь всегда будет одно горизонтальное положение. Так как по сторонам установлены кнопки, которые отлично дополняют стиль меню.

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

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

Выставлена ширина на 80%, где самостоятельно под шаблон редактируем.

Горизонтальное меню для сайта на HTML+CSS

Здесь наблюдаем вид с планшета, где видим, что все корректно выводит.

Создание меню при помощи CSS3 + HTML

Но и самый небольшой экран, который имеет доступ к интернет сети.

Мобильное меню для сайта на CSS

Установочный процесс:

Нужно подключить библиотеки:

Код
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

HTML

Код
<div id='vaimascertain'>
  <div id="dascevaimas">
  <div id="dascevaimas-wrapper">
  <ul id="navigatsion-menyu" style="">
  <div id="kasetudsionud"></div>
  <li class="dascevaimas-item active"> <a href="#">Главная</a> </li>
  <li class="dascevaimas-item"> <a href="#">Скрипты</a> </li>
  <li class="dascevaimas-item"> <a href="#">Шаблоны</a> </li>
  <li class="dascevaimas-item"> <a href="#">Javascript</a> </li>
  <li class="dascevaimas-item"> <a href="#">Дизайн</a> </li>
  <li class="dascevaimas-item"> <a href="#">HTML и CSS</a> </li>
  <li class="dascevaimas-item"> <a href="#">Контакты</a> </li>
  <li class="dascevaimas-item"> <a href="#">Навигация</a> </li>
  <li class="dascevaimas-item"> <a href="#">Media</a> </li>
  <li class="dascevaimas-item"> <a href="#">Zornet.ru</a> </li>
  <li class="dascevaimas-item active"> <a href="#">Связь </a> </li>
  </ul>
  <div class="asenavi-gatgtudsion-menyu">
  <button class="dascevaimas-paddle-left icon-chevronleft" aria-hidden="true"> </button>
  <button class="dascevaimas-paddle-right icon-chevronright" aria-hidden="true"> </button>
  </div>
  </div>
  </div>

CSS

Код
#vaimascertain {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#dascevaimas {
  background: #222;
  position: relative;
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
}
#dascevaimas #dascevaimas-wrapper {
  overflow: hidden;
  height: 60px;
  padding: 0 30px;
}
#navigatsion-menyu {
  margin: 1px 20px;
  padding: 1px 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#kasetudsionud {
  position: relative;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}
#dascevaimas ul li {
  display: inline-block;
  height: 60px;
  margin: 0px;
  box-shadow: 1px 0px 0px rgb(51, 51, 51) inset;
  border-left: 1px solid rgb(0, 0, 0);
}
#dascevaimas ul li a {
  color: #FAFAFA;
  padding: 0px 15px !important;
  line-height: 44px;
}
.slick-prev, .icon-chevronleft { transform: rotate(180deg); }
.icon-chevronleft, .icon-chevronright {
  background-image: url('http://zornet.ru/CSS-ZORNET/ASABAG/asetadiw.png');
  background-repeat: no-repeat;
  background-size: 20px;
}
.dascevaimas-paddle-left, .dascevaimas-paddle-right {
  cursor: pointer;
  border: none;
  position: absolute;
  top: 20px;
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}
.slick-prev, .dascevaimas-paddle-left { left: 0; }
.arrow {
  width: 25px;
  margin-left: auto;
  margin-right: auto;
}
.slick-next, .dascevaimas-paddle-right { right: 0;  
}

JS

Код
$(function() {
  var items = $('#navigatsion-menyu').width();
  var itemSelected = document.getElementsByClassName('dascevaimas-item');
  navPointerScroll($(itemSelected));
  $("#navigatsion-menyu").scrollLeft(200).delay(200).animate({
  scrollLeft: "-=200"
  }, 2000, "easeOutQuad");
   
  $('.dascevaimas-paddle-right').click(function () {
  $("#navigatsion-menyu").animate({
  scrollLeft: '+='+items
  });
  });
  $('.dascevaimas-paddle-left').click(function () {
  $( "#navigatsion-menyu" ).animate({
  scrollLeft: "-="+items
  });
  });

  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  var scrolling = false;

  $(".dascevaimas-paddle-right").bind("mouseover", function(event) {
  scrolling = true;
  scrollContent("right");
  }).bind("mouseout", function(event) {
  scrolling = false;
  });

  $(".dascevaimas-paddle-left").bind("mouseover", function(event) {
  scrolling = true;
  scrollContent("left");
  }).bind("mouseout", function(event) {
  scrolling = false;
  });

  function scrollContent(direction) {
  var amount = (direction === "left" ? "-=3px" : "+=3px");
  $("#navigatsion-menyu").animate({
  scrollLeft: amount
  }, 1, function() {
  if (scrolling) {
  scrollContent(direction);
  }
  });
  }
  }
   
  $('.dascevaimas-item').click(function () {
  $('#dascevaimas').find('.active').removeClass('active');
  $(this).addClass("active");
  navPointerScroll($(this));
  });

});

function navPointerScroll(ele) {

  var parentScroll = $("#navigatsion-menyu").scrollLeft();
  var offset = ($(ele).offset().left - $('#navigatsion-menyu').offset().left);
  var totalelement = offset + $(ele).outerWidth()/2;

  var rt = (($(ele).offset().left) - ($('#dascevaimas-wrapper').offset().left) + ($(ele).outerWidth())/2);
  $('#kasetudsionud').animate({
  left: totalelement + parentScroll
  })
}

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

Демонстрация
2019-08-26 Загрузок: 2 Просмотров: 947 Комментарий: (3)

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

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

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

Комментарий: 3
avatar
gdds 2020-07-10 18:211
0
делаю меню ресторана, вставляю несколько таких меню на странице, а работает только одно, самое верхнее. как сделать чтоб работали все подскажите, пожалуйста ! Пример на скрине - https://prnt.sc/tfg0hs
Сопрано
Сопрано 2020-07-10 18:472
0
Вам нужно выбрать меню или от сюда или с демонстраций, так как здесь аналогичное меню, но только с подписанными классами.

Или попробовать поставить с демо, и от сюда вторым меню выставить, так как классы разные, они не будут ругаться точнее должно корректно оба работать.
-SAM-
-SAM- 2020-07-14 10:583
+1
Не будут оба работать по определению. Поскольку на странице не должно быть элементов с одинаковыми идентификаторами (id). Иначе, когда открываете то меню, что ниже находиться, скрипт срабатывает для того, что в коде исходном документа страницы находиться выше. Вывод тут прост: по стандартам веб нельзя повторять идентификатор, а чтобы меню работали оба - нужно переписывать скрипт, делая на два id разных.
Собственно, это же объяснял и здесь: либо искать аналоги, чтобы таких заморочек не было с привязкой в скрипте (ставить на одних лишь стилях), либо же просто в тело документа страницы "довеском" скрипт продублировать (сменив id в нём для второго меню) - если не знаете как скрипт нужно переписать.
avatar