Memasang Hidangan Navigation Kafe Responsive
Material Menu Navigation Bar Responsive Membuat Menu Navigation Bar Responsive , kali ini aku akan menyebarkan Menu Bar /atau navigatio...
https://tutorialcarapintar.blogspot.com/2019/02/memasang-hidangan-navigation-kafe.html
Material Menu Navigation Bar Responsive
Juga buat yang ingin mengganti menunya menjadi suport mobile supaya gampang untuk melihat isi dari daftar sajian tersebut.
Sebelumnya aku juga sudah menyebarkan sajian kafe yang responsive dengan dampak scroll....Membuat Responsive Menu Navigation Bar Scrolling
Tampilan Menu Navigation kafe ini menyerupai berikut dikala di buka dengan device atau resolusi monitor /atau layar yang lebih kecil.
Nah buat yang ingin mencoba sajian yang satu ini, silahkan ikuti tutorial cara pemasangannya.
- Login ke Blogger.com
- Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
- Masukan CSS di bawah ini, sempurna di atasnya.
.mainNav {background: #efefef;color: #1a1b18;max-height: 70px;position: relative;margin: 33px;font: 14px/1.5em "Open Sans";} .mainNav a {text-decoration: none;} .mainNav .logo {display: inline-block;color: #fff;font-size: 1.7em;height: 40px;line-height: 1.55em;letter-spacing: -2px;text-transform: uppercase;padding: 0 10px;z-index: 0;/*POSITION*/position: relative;} .mainNav .logo:hover:before {background: #292938;} .mainNav .logo:before {content: "";background: #3C91E6;z-index: -1;/*POSITION*/position: absolute;top: 0;right: 0;bottom: 0;left: 0;} .mainNav .logo a {color: #efefef;} .mainNav .menu {background: #efefef;box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);border-top: 1px solid #d9d9d9;display: none;list-style: none;margin: 0;padding: 0;text-align: center;/*POSITION*/position: absolute;top: 60px;right: 0;left: 0;} .mainNav .menu a {color: #292938;border-bottom: 1px solid #d9d9d9;font-weight: bold;display: block;padding: 15px;} .mainNav .menu a:hover {background: #292938;color: #efefef;} .mainNav .navBars {cursor: pointer;display: inline-block;font-size: 1.7em;line-height: 1.5em;float: right;/*USER SELECTION*/-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-user-select: none;} #xBxHack {visibility: hidden;opacity: 0;position: absolute;top: -99999px;} #xBxHack:checked nav .menu {display: block;} .bungkus {max-width: 960px;margin: 0 auto;padding: 10px;} @media screen and (min-width: 600px) { .mainNav {overflow: hidden;} .mainNav .navBars {display: none;} .mainNav .bungkus {padding-top: 0;padding-bottom: 0;} .mainNav .logo {margin: 10px 0;} .mainNav .menu {display: block;box-shadow: none;border: none;float: right;/*POSITION*/position: static;} .mainNav .menu li {display: inline-block;} .mainNav .menu a {border: none;padding: 20px 10px;}} - Selanjutnya, cari arahan </body> kemudian masukan javascript dibawah ini sempurna diatasnya.
<script type='text/javascript'> //<![CDATA[ $(document).ready(function () { "use strict"; var myNav = { init: function () { this.cacheDOM(); this.browserWidth(); this.bindEvents(); }, cacheDOM: function () { this.navBars = $(".navBars"); this.xBxHack = $("#xBxHack"); this.navMenu = $("#menu"); }, browserWidth: function () { $(window).resize(this.bindEvents.bind(this)); }, bindEvents: function () { var width = window.innerWidth; if (width < 600) { this.navBars.click(this.animate.bind(this)); this.navMenu.hide(); this.xBxHack[0].checked = false; } else { this.resetNav(); } }, animate: function (e) { var checkbox = this.xBxHack[0]; if (!checkbox.checked) { this.navMenu.slideDown(); } else { this.navMenu.slideUp(); } }, resetNav: function () { this.navMenu.show(); } }; myNav.init(); }); //]]> </script> - Langkah terakhir copy HTML dibawah ini kemudian masukan arahan ini di bawah </header> atau <body>. Atau terserah kalian mau ditaro dimana.
<!--Responsive Nav--> <input type="checkbox" id="xBxHack" /> <nav id="mainNav" class="mainNav"> <div class="bungkus"> <div class="logo"><a href="#">Mas <strong>Tamvan</strong></a></div> <label class="navBars" for="xBxHack"> <i class="fa fa-bars"></i> </label> <ul id="menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Profolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <!--END Responsive Nav--> Sesuaikan saja dengan template kalian.
Menu Navigation Bar Responsive ini memerlukan ajaq jquery lubis di template kalian, bila belum ada... masukan script berikut di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> - Save Template n Done
Cukup sekian dan terimakasih, semoga artikel perihal Memasang Menu Navigation Bar Responsive ini bermanfaat.
Jangan Lupa tinggalkan jejak kalian di kolom komentar, supaya nanti aku juga dapat mengunjungi blog kalian dengan gampang :)
