Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript

Baca Juga

Cara Memasang Menu Responsive + Kotak Pencarian Menggunakan Selectnav Javascript. Selectnav Menu Responsive. Penampakannya seperti gambar di bawah ini.

1. Tema > Edit HTML
2. Copas kode JavaScript berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Plugin: SelectNav.js
window.selectnav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="selectnav" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"?",u=n.label||"Menu",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){selectnav('menu-main-nav');selectnav('menu-main-nav');});
$("#LinkList94").each(function () {
var k = "<ul id='menu-main-nav'><li><ul class='sub-menu'>";
$("#LinkList94 li").each(function () {
var a = $(this).text(),
o = a.substr(0, 1),
p = a.substr(1);
"_" == o ? (o = $(this).find("a").attr("href"), k += '<li><a href="' + o + '">' + p + "</a></li>") : (o = $(this).find("a").attr("href"), k += '</ul></li><li><a href="' + o + '">' + a + "</a><ul class='sub-menu'>")
});
k += "</ul></li></ul>";
$(this).html(k);
$("#LinkList94 ul").each(function () {
var k = $(this);
if (k.html().replace(/\s|&nbsp;/g, "").length == 0) k.remove()
});
$("#LinkList94 li").each(function () {
var k = $(this);
if (k.html().replace(/\s|&nbsp;/g, "").length == 0) k.remove()
})
});
$(document).ready(function ($) {
$("#menu").show();
$("ul.sub-menu").parent("li").addClass("has-children");
$('#search-icon').on('click', function () {
$('#nav-search').slideToggle(0)
});
//]]>
</script>

3. Copas kode CSS Menu Responsive berikut ini di atas kode ]]></b:skin>

#menu{display:none} #main-nav{background-color:#003399;position:relative;width:100%;height:50px;font-size:12px;font-weight:700;} #main-nav .row{height:50px;position:relative;padding:0} li.li-home{float:left;display:inline-block;padding:0} li.li-home a {padding-left:0 !important} #main-nav li{position:relative;float:left;height:50px;line-height:50px;padding:0} #main-nav li:hover a{color:#131313;} #main-nav a{float:left;color:#fff;padding:0 16px;text-transform:uppercase} #main-nav ul li.has-children a:after{content:"\f107";font-size:14px;font-family:FontAwesome;font-weight:400;position:relative;padding-left:5px} #main-nav ul li ul{display:none;position:absolute;left:0;top:50px;z-index:100;background-color:#fff} #main-nav ul li:hover > ul{display:block} #main-nav ul li ul:before{content:"\f0d8";font-family:FontAwesome;color:#fff;position:absolute;left:20px;top:-13px;font-size:19px;height:19px;font-weight:400;line-height:1} #main-nav ul li ul li{height:auto;clear:both;margin-left:0;line-height:normal;border-right:none;border-bottom:1px solid #eee} #main-nav ul li ul li:last-child{border-bottom:none} #main-nav ul li ul li::after{content:'';display:none} #main-nav ul li ul li:hover {background-color: #f9f9f9;} #main-nav ul li ul li a{min-width:150px;padding:0 16px;margin-top:0;font-size:12px;color:#666!important;font-weight:400;text-transform:capitalize;line-height:38px;transition:all 0s ease;border:none} #main-nav ul li ul li a:hover {color:#003399!important} #main-nav ul li ul li a:after{display:none} #main-nav ul li ul ul{left:100%;top:0} .selectnav{display:none} #search-icon{position:absolute;right:0;top:0;display:block;line-height:50px;height:50px;color:#fff;font-size:18px;text-align:right;cursor:pointer;padding-left:10px} #search-icon:hover{color:#131313} #nav-search{position:absolute;right:0;top:50px;z-index:50;display:none;width:300px;height:60px;background-color:#fff} #nav-search:before{content:"\f0d8";font-family:FontAwesome;color:#fff;position:absolute;right:0;top:-13px;font-size:19px;height:20px;font-weight:400;line-height:1} #nav-search #searchform{box-sizing:border-box;overflow:hidden;height:60px;color:#666;position:relative;padding:12px} #nav-search #s{position:relative;height:36px;padding:0 12px;border:1px solid #eee;font-family:'Poppins',sans-serif;font-size:12px;color:#666;box-sizing:border-box;width:100%;border-radius:2px;line-height:36px} @media screen and (max-width: 920px) { #menu-main-nav{display:none} #menu{float:left;width:30%;height:50px} .selectnav{display:block;border-radius:2px!important;background:rgba(255,255,255,0.2);color:#fff;height:30px;width:100%;line-height:30px;margin-top:10px;border:0} .selectnav option {color:#222;} } @media screen and (max-width: 360px) { #nav-search{width:100%} }

4. Copas kode HTML  Menu Responsive berikut ini di bawah kode </header> atau setelah kode header blog Anda.

<!-- Main Menu -->
<nav id='main-nav'>
<div class='row'>
   <li class='li-home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <b:section id='menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
      <b:widget id='LinkList94' locked='true' title='Main Menu' type='LinkList' version='1'>
        <b:includable id='main'>
          <div class='widget-content'>
            <ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
              <b:loop values='data:links' var='link'>
                <li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
              </b:loop>
           </ul>
          </div>
        </b:includable>
      </b:widget>
    </b:section>
  <span id='search-icon'><i class='fa fa-search'/></span>
<div id='nav-search'>
<form action='/search/max-results=7' id='searchform' method='get'>
  <input id='s' name='q' placeholder='Type and hit enter...' type='text'/>
</form>
</div>
</div>
</nav>
<!-- Main Menu (end) -->
<div class='clear'/>

Kode LAYOUT
Simpan di atas kode ]]></b:skin> atau dijajaran kode body#layout yang sudah ada.

body#layout #main-nav{height:auto;min-height:87px;overflow:hidden;padding-bottom:1px}
body#layout #main-nav .section{display:block;background-color:#3598db;border-color:#2980b9}
body#layout #main-nav .section h4{padding-bottom:3px;color:#fff}
body#layout #main-nav .section .widget-content{border-color:#fff}
body#layout li.li-home{display:none}
body#layout #main-nav .row{height:auto}

Save!
Klik Layout/Tata Letak untuk memasukkan daftar menu/link menu menggunakan Link List Widget yang sudah ada.

Demikian Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript. Good Luck & Happy Blogging! (www.contohblog.com).

Sumber