Menu Navigasi Plus Search Show Hide Responsive

AA Sciences, Aldi Andreansyah - Search button, menu navigasi, Search Show Hide Plus Menu Navigasi Responsive, Cara Mnbuat Search Show Hide Plus Menu Navigasi Responsive Blogger, Search Show Hide Plus Menu Navigasi Keren Responsive.

Membuat tampil cantik pada suatu halaman website terutama blogger adalah salah satu tujuan bahkan dambaan sekalipun untuk para user nya sehingga para user bermikirkan untuk kepentingan para pengunjung terutama dengan adanya tampilan cantik tersebut.

Yakni dengan adanya sebuah menu navigasi plus search button salah satunya membuat tampilan website kalian menjadi tampil cantik. Yang dimana adanya menu navigasi plus search button pun salah satunya berfungsi untuk mempermudah pengunjung untuk mempermudah mengakses website tersebut terutama blog kalian tersebut, di karenakan adanya menu navigasi plus search button tersebut lah yang mempermudah pengunjung mengakses website tersebut.

Namun jika terdapat menu navigasi plus search button saja tidak cukup tentunya dengan tampilan pada versi desktop saja tetapi hal tersebut pun penting dengan adanya tampilan menu navigasi plus search button yang tampil Responsive yang berarti tampilan sebuah menu navigasi plus search button tersebut dapat kita gunakan layaknya versi desktop dengn versi seluler, bagaimana keren bukan ?.

Apalagi jika sebuah search button tersebut memilki hal fitur yang dimana terdapat efek show hide yang berarti search button tersebut akan tampil dengan efek bagus yakni sembunyi dan tampil pada halaman blog kalian yang dimana fitur tersebut cukup terbilang memikat terutama untuk para pengunjung.

Langsung saja jika kalian sudah penasaran mengenai pembuatan menu navigasi plus search button show hide yang dimana tampil responsive pada versi desktop maupun seluler maka langsung saja simak tutor pembuatan nya di bawah ini.

Cara Membuat Search Show Hide Plus Menu Navigasi Responsive

Pembuatan CSS nya terlebih dahulu :

• Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.
• Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style>.
• Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Search Show Hide Plus Menu Navigasi nya di bawah ini tepat sebelum ]]></b:skin> atau </style>, berikut CSS nya :

nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #016fba; } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #000; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #ddd; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #30cc91; } .search_box { clear: both; width: 100%; background: #374760; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #efa666; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu > li > ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu > ul > li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #efa666; color: #fff; } .menu ul li.hover > a { background: #efa666; color: #fff; } .menu ul li > a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover > ul { display: block; } .menu ul ul > li { position: relative; } .menu ul ul > li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul > li a:hover { background: #efa666; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; }

Kalian dapat mengubah warna nya tersebut, dengan kode warna HTML tertentu dan dapat juga kalian atur antara jarak, batas dan lebar tinggi nya sesuai kenyamanan kalian.

Penerapan HTML nya :

• Masih dalam mode Template - > Langsung saja CTRL+F (Memudahkan pencarian) lalu cari bagian Menu Navigasi yang biasnya terletak atas maupun bawah header kalian atau dapat juga kalian memasang search button nya pada bagian tertentu yang dimana kalian ingin meletakkan search button ini baik itu header, menu navigasi, sidebar,dll. berikut script HTML nya :

<div class="nav_wrapper">

<!--<a class="menu-link" href="#menu"></a>-->

<div class="spinner-master"> <input type="checkbox" id="spinner-form" /> <label for="spinner-form" class="spinner-spin"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> </div> <a href="#search_box" class="btn" id="search">&#9740;</a> <nav id="menu" class="menu"> <ul class="dropdown"> <li ><a href="#Link" title="Link">Home</a> <ul > <li ><a href="#Link" title="Link">Link » </a> <ul > <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> </ul> </li> <li ><a href="#Link" title="Link">About</a></li> <li ><a href="#Link" title="Link">Link » </a> <ul > <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link </a></li> </ul> </li> </ul> </li> <li ><a href="#Link" title="Link">Category</a> <ul > <li ><a href="#Link" title="Link ">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> </ul> </li> <li ><a href="#Link" title="Link">Portfolio</a> <ul > <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> </ul> </li> <li ><a href="#Link" title="Link">Work</a> <ul > <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title=" Link"> Link</a></li> </ul> </li> <li ><a href="#Link" title="Link">Playground</a> <ul > <li ><a href="#Link" title="Link">Link </a></li> <li ><a href="#Link" title="Link">Link</a></li> <li ><a href="#Link" title="Link">Link</a></li> </ul> </li> <li ><a href="#Link" title="Link">Sitemap</a></li> </ul> </nav> <form class="search_box" id="search_box" action="/search/"> <input name="search_criteria" placeholder="Search here" value="" type="text"> <input class="search_icon" value="Search" type="submit"> </form> </div>

Penting :

Ubah #Link dengan Menu Navigasi yang ingin kalian inginkan seperti URL label, postingan, dll. Dan Pastikan kalian memasang / menyalin script di atas dengan benar agar tidak terjadi nya kerusakan dalam button search nya tersebut yakni awalan yang ber tag <div> dan akhiran nya </div>.

Sekiranya sampai disini Search Show Hide Plus Menu Navigasi nya pun sepenuhnya nya sudah terbuat, tetapi jika kalian ingin menambahkan agar sebuah Search Show Hide Plus Menu Navigasi ini nya agar tampil sebagai seperti mengikuti ukuran layar pada desktop dan seluler ( responsive ), maka kalian tambahkan script CSS nya dibawah ini tepat sebelum </head> atau ]]></b:skin> pun bisa, berikut CSS nya :

Pembuatan CSS agar Responsive

@media only screen and (max-width:768px){

 { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #efa666; } a.menu-link:after { content: "\2630"; font-weight: normal; } a.menu-link.active:after { content: "\2715"; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu > li > ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu > ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu > ul > li { display: block; } .menu > ul > li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul > li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover > a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }

}

Sampai diatas Pembuatan agar Responsive saja tidak cukup rasanya, jika tidak memasang Jquery agar berfungsi maksimal nya Search Show Hide Plus Menu Navigasi Responsive ini, berikut Script Jquery nya :

Pembuatan Jquery nya

• Masih dalam mode Template, CTRL+F (memudahkan pencarian), lalu cari tag kode </body>, langsung saja masukkan Jquery/Javascript nya di bawah ini tepat kode sebelum </body> nya, berikut Jquery/Javascript nya :

<script type='text/javascript'> $("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})}) </script>

• Steps Terakhir, langsung saja simpan Template dan lihat hasil nya.

Sekian sejenak mengenai pembahasan kali ini Search Show Hide Plus Menu Navigasi Responsive yang dapat AA Sciences sampaikan, semoga bermanfaat dan menambah wawasan kalian, Amin.

Share this post