komputerdia.com - Gaya sajian kafetaria atau sajian navigasi yang akan saya jelaskan pada artikel kali ini, memang berbeda dari sajian kafetaria lainnya. Apa yang menciptakan perbedaannya? Pada pembuatan sajian kafetaria kali ini saya akan mencoba menunjukkan sedikit sentuhan gaya slide dikala kursor kalian diarahkan pada icon panah.
Untuk melengkapi pengetahuan kalian perihal variasi sajian kafetaria lainnya yang sanggup kalian pasang di blog, kalian sanggup membaca ulasan tersebut pada artikel terkait dibawah ini.
Baca Juga :
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
- Membuat Menu Bar Responsive Mengecil Saat Di Scroll atau Di Gulir Kebawah .
- Cara Membuat Menu Navigasi Simple Dropdown Di Blog .
- Cara Membuat Menu Bar Responsive Dengan Tambahan Efek .
Langkah - Langkah Membuat Menu Bar Slider
- Pertama silahkan kalian masuk ke akun blogger kalian
- Masuk ke sajian template atau thema dan cari instruksi </head>, lalu tempelkan instruksi dibawah ini sempurna diatas instruksi </head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
- Perlu diperhatikan, kalau pada template kalian telah terdapat kedua instruksi diatas, maka instruksi tersebut jangan kalian pasang lagi
- Selanjutnya kalian cari kode ]]></b:skin> , dan tempelkan instruksi dibawah ini sempurna diatas kode ]]></b:skin> .
#main { width: 60%; margin-right: auto; margin-left: auto; position: relative; } #navMenu { background: #222; position: relative; border-radius: 6px; font-family: 'Roboto', sans-serif; } #navMenu #navMenu-wrapper { overflow: hidden; height: 60px; padding: 0 30px; } #navMenu-items { margin: 1px 20px; padding: 1px 0; list-style: none; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } #menuSelector { 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; } #navMenu 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); } #navMenu 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://www.jqueryscript.net/demo/Responsive-Scrolling-Navigation-Menu-With-jQuery-jQuery-UI/arrow.png'); background-repeat: no-repeat; background-size: 20px; } .navMenu-paddle-left, .navMenu-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, .navMenu-paddle-left { left: 0; } .arrow { width: 25px; margin-left: auto; margin-right: auto; } .slick-next, .navMenu-paddle-right { right: 0; } - Lalu kalian cari instruksi </body>, dan tempatkan instruksi dibawah ini sempurna diatas instruksi </body> .
<script> $(function() { var items = $('#navMenu-items').width(); var itemSelected = document.getElementsByClassName('navMenu-item'); navPointerScroll($(itemSelected)); $("#navMenu-items").scrollLeft(200).delay(200).animate({ scrollLeft: "-=200" }, 2000, "easeOutQuad"); $('.navMenu-paddle-right').click(function () { $("#navMenu-items").animate({ scrollLeft: '+='+items }); }); $('.navMenu-paddle-left').click(function () { $( "#navMenu-items" ).animate({ scrollLeft: "-="+items }); }); if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { var scrolling = false; $(".navMenu-paddle-right").bind("mouseover", function(event) { scrolling = true; scrollContent("right"); }).bind("mouseout", function(event) { scrolling = false; }); $(".navMenu-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"); $("#navMenu-items").animate({ scrollLeft: amount }, 1, function() { if (scrolling) { scrollContent(direction); } }); } } $('.navMenu-item').click(function () { $('#navMenu').find('.active').removeClass('active'); $(this).addClass("active"); navPointerScroll($(this)); }); }); function navPointerScroll(ele) { var parentScroll = $("#navMenu-items").scrollLeft(); var offset = ($(ele).offset().left - $('#navMenu-items').offset().left); var totalelement = offset + $(ele).outerWidth()/2; var rt = (($(ele).offset().left) - ($('#navMenu-wrapper').offset().left) + ($(ele).outerWidth())/2); $('#menuSelector').animate({ left: totalelement + parentScroll }) } </script> - Langkah terakhir, silahkan kalian cari instruksi </header> , dan letakkan instruksi berikut dibawah instruksi </header> .
<div id='main'> <div id="main2"> <div id="navMenu"> <div id="navMenu-wrapper"> <ul id="navMenu-items" style=""> <div id="menuSelector"></div> <li class="navMenu-item active"> <a href="#">Home</a> </li> <li class="navMenu-item"> <a href="#">Templates</a> </li> <li class="navMenu-item"> <a href="#">Widget</a> </li> <li class="navMenu-item"> <a href="#">Javascript</a> </li> <li class="navMenu-item"> <a href="#">Jquery</a> </li> <li class="navMenu-item"> <a href="#">HTML dan CSS</a> </li> <li class="navMenu-item"> <a href="#">Contact</a> </li> <li class="navMenu-item"> <a href="#">About</a> </li> <li class="navMenu-item"> <a href="#">RSS</a> </li> <li class="navMenu-item"> <a href="#">Social Media</a> </li> <li class="navMenu-item active"> <a href="#">Navmenu </a> </li> </ul> <div class="navMenu-paddles"> <button class="navMenu-paddle-left icon-chevronleft" aria-hidden="true"> </button> <button class="navMenu-paddle-right icon-chevronright" aria-hidden="true"> </button> </div> </div> </div> </div> </div>
- Setelah semua instruksi telah kalian atur, silahkan kalian tekan tombol simpan atau save .
- Lihat hasilnya, kalau kalian berhasil maka tampilan sajian tersebut akan tampak menyerupai pola dibawah ini
- Selesai dan biar bermanfaat untuk kalian semuanya
Sumber Referensi : https://mastamvan.blogspot.co.id/