Адаптивное меню с прокруткой категорий
 | |
| Оригинальный вид для адаптивного меню в CSS, которое прокручивает категорий, ведь по сторонам установлены кнопки, где отлично смотрится на сайте. По своим характеристикам, то здесь всегда будет одно горизонтальное положение. Так как по сторонам установлены кнопки, которые отлично дополняют стиль меню. Вот эта будет полноценный функционал выбора, также присутствует стрелка, что по верху указывает категорий. Стоит только кликнуть на одну из предложенный, как она выезжает и на этой категории останавливается, что красиво и оригинально смотрится. Это широко используемая навигации сайта для отображения главного меню на сайте, а также других важных компонентов интерфейса, таких как окно поиска, кнопки социальных сетей и уведомления. Где также все проверено на работоспособность по функциям, где ниже представлены изображение с разных размеров монитора. экранов. Выставлена ширина на 80%, где самостоятельно под шаблон редактируем.  Здесь наблюдаем вид с планшета, где видим, что все корректно выводит.  Но и самый небольшой экран, который имеет доступ к интернет сети.  Установочный процесс: Нужно подключить библиотеки: Код <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, которая позволяют посетителю осуществлять вертикальную прокрутку пунктов меню при наведении курсора или касании пальцем, если говорить про мобильные гаджет. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
