Cara Membuat Menu Dropdown Tampilan Mobile Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Sebagai seorang Webmaster atau Blogger jika bicara mengenai template Website atau Blog, tidak cukup hanya sekedar sibuk dengan tampilan pada satu perangkat saja, akan tetapi sebagai seorang Webmaster atau Blogger yang profesional maka anda harus peduli dalam segala aspek. Sekarang saya akan membahas tentang template dalam kawasan menu navigasi, pada artikel yang lalu saya telah memposting artikel mengenai Cara Membuat Menu Dropdown Multi Level Pada Blogger. Ada template yang ditawarkan baik yang cuma-cuma atau premium responsive atau adaptif pada perangkat Desktop, Tablet dan Mobile, tapi umumnya pengguna blog tidak puas dan membuat mereka memutar fikiran bagaimana menggapai kepuasan mereka sampai ada yang belajar secara umum atau secara autodidact. Tidak semua template yang ditawarkan di situs-situs internet responsif dan adaptif terhadap perangkat mobile, paling hanya responsive dan adaptif pada perangkat Desktop saja.
Oleh sebab itu saya akan bagikan Cara Membuat Menu Dropdown Multi Level Responsive Pada Blogger Tampilan Mobile bagi anda yang berat hati untuk mengganti menu blog yang responsive hanya pada tampilan desktopnya saja walaupun tidak adaptif pada tampilan mobile. Artikel ini merupakan alternatif dan juga ilmu dari ilmu dan pengalaman yang akan saya bagikan kepada anda, Menu ini hanya tampil pada versi mobile saja dan tidak tampil pada tampilan desktop juga pastinya tidak akan mengganggu tampilan dan aktivitas menu navigasi versi desktop pada blog anda.

Menu ini mudah saja diterapkan dan ringan sehingga tidak mengganggu loading blog anda, berikut fitur dan kelebihan menu ini:
1. Full Responsive sehingga akan otomatis menyesuaikan dengan ukuran layar mobile,
2. Tentunya menu ini dropdown multi level,
3. Menu ini akan tampil hanya dalam perangkat mobile saja,
4. Memiliki kotak pencarian Responsive atau Responsive Search Box,
5. Mendukung nesting dan struktur tak terbatas memungkinkan anda boleh menambahkan sub menu tanpa batas,
6. Menu ini adalah Cross Platform Browser dengan desain yang sesuai didukung oleh semua browser pada perangkat mobile anda,
7. Pengunjung sekarang dapat dengan mudah menavigasi blog anda.

Untuk hasilnya nanti boleh anda lihat dan anda gunakan pada perangkat mobile anda jika anda berhasil dalam menerapkan tutorial dari saya.
Langsung saja, mari ke tutorialnya⇨

1. Letakkan CSS berikut diatas / sebelum tag ]]></b:skin>⇩

<style> 
/*----------- Multilevel Dropdown Menu Responsive Mobile Version By https://rahmatarifish.blogspot.com --------------*/ 
.sf-menu a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya input{padding:5px 10px;width:80%;margin:10px 0 0;background-color:#FFF;height:30px;box-shadow:1px 2px 4px #A2A2A2 inset;position:relative}#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:Open Sans;color:#BDB5B5;font-weight:400}#searchnya button{background-color:#006600;padding:0;width:38px;height:31px;margin-right:5px;cursor:pointer;position:relative;top:2px}#searchnya button:hover{background:#76D314} 
#navitions{background-color:#242729;border-bottom:0px solid #6FC415;box-shadow:0 1px 9px #666;display:none}#mobilenav{display:none}#nav1{height:50px;position:relative;background:#242729;box-shadow:1px 2px 9px #006600}.sf-menu,.sf-menu *{list-style:none;margin:0;padding:0}.sf-menu li{white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}.sf-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:block}.sf-menu a{display:block;position:relative;height:50px;line-height:50px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0 15px; font-family:Open Sans; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}.sf-menu &gt; li &gt; a{font-size:105%;font-family:Open Sans}.sf-menu ul ul{top:0;left:100%}.sf-menu{float:left}.sf-menu a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu li:hover{background:#222}.sf-menu ul li{background-color:#242729}.sf-menu ul li:hover{background-color:#333}.sf-menu ul a{font-weight:400;height:40px;line-height:40px;font-family:Open Sans,arial}.sf-menu ul ul li{background:#3C3C3C}.sf-menu li:hover &gt; a,.sf-menu li.sfHover,.sf-menu &gt; li &gt; a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows .sf-with-ul{padding-right:1em}.sf-arrows .sf-with-ul:after{content:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt; .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; .sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; .sf-with-ul:after{border-top-color:#FFF}.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent transparent transparent #FFF}.sf-arrows ul li &gt; .sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; .sf-with-ul:after,.sf-arrows ul .sfHover &gt; .sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; i{position:absolute;top:15px;right:15px;width:22px;height:22px;cursor:pointer;display:none;background-color:#006600;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px Open Sans,Geneva,sans-serif}.sf-menu li &gt; i:after{content:&#39;+&#39;;color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu li ul li i:after{left:5px;font-size: 16px;top: -1px;} .sf-menu li ul li i.active:after  {left: 6px;font-size: 26px;top: -10px;} 
.sf-menu li &gt; ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;} 
.sf-menu li &gt; i.active:after{content:&#39;-&#39;;font-size:36px;top:-14px}.sf-menu a.home{position:relative}.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu a.home:before,#view a:before{text-indent:0}html {-webkit-text-size-adjust: 100%;} 
@media only screen and (max-width:320px){#searchnya input{width:80%}} 
@media only screen and (max-width:768px) { 
#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:37px;top:2.5px;left:8px;position:absolute;height:41px;outline:0;background-color:#006600;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#00ff00}#mobilenav:before{content:&quot;\f0c9&quot;;top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px 10px}#menunav li{float:none;margin:0}#menunav &gt; li{margin:1px 0}.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px 20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px; }.sf-menu ul ul ul li a{padding-left:60px; }.sf-menu a.home,.sf-menu li:hover &gt; a.home,.sf-menu &gt; li &gt; a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover &gt; a,.sf-menu li.sfHover{background-color:transparent}.sf-menu a.home:before,#ra-search-layout button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit} 
} 
</style>
<script type='text/javascript'> 
//<![CDATA[ 
// Superfish v1.7.2 - jQuery menu widget - Rahmat Arif 
(function(b){var a=(function(){var p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var c=document.documentElement.style;return("behavior" in c&&"fill" in c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var c=p.menuClass;if(t.cssArrows){c+=" "+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+" "+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var s="MSPointerDown.superfish";if(!f){s+=" touchend.superfish"}if(k){s+=" mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return c.closest("."+p.menuClass)},o=function(c){return e(c).data("sf-options")};return{hide:function(s){if(this.length){var v=this,w=o(v);if(!w){return this}var t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var x=b(this);w.onHide.call(x)})}return this},show:function(){var t=o(this);if(!t){return this}var s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return this},destroy:function(){return this.each(function(){var s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+" "+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return this.each(function(){var t=b(this);if(t.data("sf-options")){return false}var u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}else{return b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true, disableHI:false,onInit:b.noop,onBeforeShow:b.noop, onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop, onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery); 
function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};      
//]]> 
</script>

2. Letakkan JavaScript berikut diatas / sebelum tag </head>⇩
Note: Bila template blog anda sudah mempunyai jQuery dan JavaScript berikut, maka tak perlu anda memasangnya lagi

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>

3. Letakkan HTML berikut dibawah / selepas tag </head>⇩

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> 
<div id='navitions'> 
        <div class='isi'> 
          <nav class='navix' id='nav1'> 
<div id='searchnya'> 
               <form action='/search'> 
           <input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Search here…&apos;;}' onfocus='if (&apos;Search here…&apos; === this.value) {this.value = &apos;&apos;;}' type='text' value='Search here…'/> 
                <button title='Search' type='submit'> 
                  <i class='fa fa-search siy'/> 
                </button> 
              </form> 
            </div>
            <a href='#' id='mobilenav'> 
              Select Menu
            </a> 
            <ul class='sf-menu' id='menunav'> 
              <li> 
                <a class='home' expr:href='data:blog.homepageUrl'> 
                  Home 
                </a> 
              </li>
   <li class='active '><a href='URL'><span>NAMA MENU </span></a></li>
   <li class='active '><a href='URL'><span>NAMA MENU </span></a></li>
   <li class='active '><a href='URL'><span>NAMA MENU </span></a></li>
   <li class='has-sub '><a href='#'><span>NAMA MENU </span></a>
      <ul>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
      </ul>
   </li> 
   <li class='has-sub '><a href='#'><span>NAMA MENU </span></a>
      <ul>
         <li class="has-sub"><a href="#"><span>Nama Sub Menu 1 </span></a>
<ul>
<li><a href="URL"><span>Nama Sub Menu 2 </span></a></li>
<li class="last"><a href="URL"><span>Nama Sub Menu 2 </span></a></li>
</ul>
    </li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
         <li><a href='URL'><span>Nama Sub Menu 1 </span></a></li>
      </ul>
   </li>
   <li><a href='URL'><span>NAMA MENU </span></a></li>
   <li><a href='URL'><span>NAMA MENU </span></a></li> 
       </ul>        
            <script type='text/javascript'> 
              //<![CDATA[ 
              menunav (jQuery); 
              //]]> 
            </script> 
          </nav> 
        </div> 
      </div> 
    </b:if>

Catatan: Ganti "URL" dengan URL menu halaman blog anda, ganti "NAMA MENU" ke nama menu blog anda, ganti "Nama Sub Menu 1", ganti "Nama Sub Menu 2". Sesuaikan HTML yang saya berikan sesuai dengan kebutuhan blog anda.

4. Save Template.

5. Alhamdulillaah, tutorial sudah siap.