Cara Membuat Megamenu Responsive Pada Menu Header di Blogger

www.azid45.web.id - Cara Membuat Megamenu Responsive Pada Menu Header di Blogger. Asslamaualaikum.Wr, Wb. Alhamdulillah setelah sekian lama kurang lebih 3 bulan akhirnya upgrade akun adsense saya telah disetujui. Setelah disetujui, jadi jarang memposting juga karena banyak tugas dan menjadi teknisi ditempat mengajar. Jadi curhat, satu lagi mungkin teman-teman yang melihat atau sedang membaca postingan ini doakan saya agar cepat selesai dalam mengerjakan tesis ya, dan tidak terkena penyakit malas. Amin.

Pada kesempatan kali ini, saya akan membagikan tips atau cara membuat megamenu responsive pada header di blog. Tutorial membuat megamenu ini saya dapatkan dari template Viopaper yang sebelumnya bernama Newspaper platform blogger modifikasi dari Rian SEO. Namun dari segi struktur css dan javascriptnya dugaan saya kang Rian SEO memodifikasi dan mengubah sedikit warna tampilan dari megamenu buatan kang Adhy Suryadi pemilik blog terkenal www.kompiajaib.com. Namun itu semua tidak masalah, saya sendiri juga telah sedikit memodifikasi tampilan warna dan tampilan mobilenya. Dikarenakan tampilan mobile yang sudah dimodifikasi oleh kang Rian SEO menggunakan gambar yang tentunya memberatkan blog. Selain itu megamenu ini menggunakan javascript dimana sebelumny berupa javascript eksternal yang juga memberatkan blog maka saya buat menjadi javascript internal tanpa pihak hosting ketiga.

Sebelum membuat megamenu, pasti teman-teman sudah tahu sendiri bukan bahwa megamenu merupakan tampilan pada menu navigasi blog yang berada di header, dimana ketika kita mengarahkan kursor kita maka otomatis akan menampilkan beberapa postingan sesuai dengan label atau kategori. Biasanya mega menu ini terdapat pada template profesional di platform wordpress seperti Newspaper. Bagi teman-teman yang menginginkan tampilan megamenu ini jangan khawatir, teman-teman tidak usah mengganti platform blogger ke wordpress karena pada blogger juga sudah ada tutorial cara membuat megamenu. Salah satunya adalah kompiajaib dan blog saya sendiri Azid Zainuri. Baik, bagi teman-teman yang ingin membuat tampilan navigasi headernya terdapat megamenu bisa mengikuti tutorial berikut ini;

Pertama, langkah awal yang harus teman-teman lakukan adalah menuju pada menu edit HTML setalah itu copas code css berikut dan letakkan diatas code </head>

<style>
/* NAV MENU */
.mega_menu{float:left;margin:0;padding:0;}
.megamenu *{margin:0;padding:0;font-family:inherit;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
ul.megamenu{list-style:none;line-height:1;overflow:visible!important}
ul.megamenu:after{margin:0;padding:0;content:"";display:block;height:0;clear:both}
ul.megamenu li{float:left;display:inline;padding:0;}
ul.megamenu li a.menu-target:after{content: "";font-family: FontAwesome;font-style: normal;font-weight: 800;text-decoration: inherit;line-height: 0;top: 30px;position: absolute;}
ul.megamenu li a{display:block;padding: 0 14px;font: 700 13px Open Sans, Arial, sans-serif;line-height: 60px;text-decoration: none;text-transform: uppercase;color: #fff;}
ul.megamenu li a:hover,ul.megamenu li a.hover-menu{color:#4db2ec}
ul.megamenu ul{position:absolute;display:none;top:100%}
ul.megamenu li a.hover-menu>ul{display:block}
ul.megamenu ul.leftmenulist li{z-index:72;width:100%;float:none;position:relative;}
ul.megamenu ul.rightmenulist li{z-index:72;width:25%;float:none;}
ul.megamenu ul li a{text-transform:none;font-weight:400}
ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#fff;border-top: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;;color:#4db2ec}
ul.megamenu ul ul{display:none;left:100%;top:0}
ul.megamenuid li div.megasubmenu{background:#fff;position:absolute;width:100%;z-index:90;left:0;top:66%;overflow:hidden;min-height:150px;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,.1);transition:all .3s ease-in-out;display:none}
ul.megamenuid li a.hover-menu~div.megasubmenu{visibility:visible;opacity:1;display:block;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
ul.megamenuid ul,ul.megamenuid ul li{display:block!important;border:0!important;margin:0!important;padding:0!important}
ul.megamenuid ul li{background:0 0!important;float:left!important}
ul.megamenuid ul.leftmenulist{position:absolute;width:15%;left:0;top:0;bottom:0;background:#fafafa}
ul.megamenuid ul.leftmenulist a{display: block;font: 600 13px Open Sans, Arial, sans-serif;line-height: 24px;color: #333;padding: 5px 22px;vertical-align: middle;border-top: 1px solid transparent;border-bottom: 1px solid transparent;}
ul.megamenuid ul.rightmenulist{position:relative;display:block;width:85%;float:right;margin:0!important;background:0 0}
ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;height:100%;padding:20px 20px 20px 0!important}
ul.megamenuid ul.rightmenulist li .thumb-container{width:100%;height:100%;position:relative;overflow:hidden;font-size:0;display:inline}
ul.megamenuid ul.rightmenulist li .thumb-container img{width:100%;height:130px;margin-bottom:10px}
ul.megamenuid ul.rightmenulist li a{display:block;border-left:none!important;padding:0!important;font-family: roboto,sans-serif;font-weight: 500;font-size: 13px;line-height: 18px;color: #111}
ul.megamenu li.has-submenu .leftmenulist {background:#fff;box-shadow: 1px 1px 4px rgba(0,0,0,.15);}
ul.megamenuid ul.rightmenulist li a:hover{background:#fff;color:#4db2ec;border:none!important;}
ul.megamenu li.has-submenu,ul.megamenu li.has-sub a{position:relative;}
ul.megamenu li.has-submenu .rightmenulist,ul.megamenu li.mega-label .leftmenulist,ul.megamenu li.has-submenu .menu-icon{display:none!important;}
ul.megamenu li.has-submenu .leftmenulist,ul.megamenu li.mega-label .rightmenulist{width:100%;}
ul.megamenu li.has-submenu .megasubmenu{top:100%;min-width:180px;min-height:100%;overflow:visible;}
ul.megamenu li.has-submenu>a,ul.megamenu li.has-sub>a{padding:0 25px 0 20px;}
ul.megamenu li.has-submenu>a:after,ul.megamenu li.has-sub>a:after{content: "";font-family: FontAwesome;font-style: normal;font-weight: 800;text-decoration: inherit;margin-left: 5px;}
ul.megamenu li.has-submenu>a:hover:after,ul.megamenu li.has-submenu>a.hover-menu:after,ul.megamenu li.has-sub>a:hover:after,ul.megamenu li.has-sub>a.hover-menu:after{border-top-color:#111;}
ul.megamenu li.has-submenu .leftmenulist li{background:#fff!important;}
ul.megamenu li.has-submenu .leftmenulist li a {background-image: linear-gradient(90deg,#111 12%,rgba(0,0,0,0.4)250%);box-shadow:0 2px 6px 0 rgba(0,0,0,0.2);padding:7px 30px;font: 500 12px Open Sans, Arial, sans-serif;line-height: 20px;border:0;color:#fff}
ul.megamenu li.has-submenu .leftmenulist li a:hover {color:#4db2ec;}
ul.megamenu li.has-submenu .leftmenulist li .loading-icon{display:none}
ul.megamenu li.mega-label .megasubmenu{padding:0 0 0 20px!important}
ul.megamenu li.mega-label ul.rightmenulist li .thumb-container img{height:160px}
ul.megamenu li.mega-label ul.rightmenulist li a{font-size:14px}
ul.megamenuid .loading-icon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7hwquLS7pZDrqdarWztA0eBZbPMdiB9vIerlAKdE-ZtJqcoIHTpEQlulAKmRvvTnNgqey0UBI6nOU_dRQ2lu-_IOhZd_vu8377oBdxOmVRfALvOZ4xB7CW2KdKqdfVHqMf2dt0ojU_Q/s1600/wait.gif) no-repeat;background-size:16px 16px;width:16px;height:16px;position:absolute;top:50%;margin-top:-8px;right:20px}
ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:20px;top:50%;width:0}
#megamenuid h5:after,#megamenuid h5:before{content:"";position:absolute;left:50%;border-left:2px solid #888;border-right:2px solid #888}
#megamenuid{margin:0;padding:0;}
#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}
#megamenuid h5:before{top:50px;width:5px;height:2px;margin-left:-4px}
#megamenuid h5:after{top:55px;width:10px;height:5px;margin-left:-7px;border-top:2px solid #888;border-radius:8px 8px 0 0}
.menupage_mobile_icon,.menu_mobile_burger,#search-label3,#mega_menu h2,.cssmenu>ul>li.home{display:none}
@media screen and (max-width:800px){
/* CSS mobile Menu */
.menu_mobile_burger,.menupage_mobile_icon{position:absolute;top:0;width:64px;text-align:right;padding:0;color:#fff;font-size:27px;font-weight:500;line-height:54px;cursor:pointer;z-index:990;display:block}
.menu_mobile_burger{right:0px;top:5px;}
.menupage_mobile_icon{right:0}
.menupage_mobile_icon svg,.menu_mobile_burger svg,#search-label3 svg{width:31px;height:32px;vertical-align:-5%}
.menupage_mobile_icon svg path,.menu_mobile_burger svg path,#search-label3 svg path{fill:#fff}
ul.megamenu li.has-sub>a.hover-menu:after,ul.megamenu li.has-sub>a:hover:after,ul.megamenu li.has-submenu>a.hover-menu:after,ul.megamenu li.has-submenu>a:hover:after{border-top-color:transparent}
ul.megamenu li.has-submenu>a, ul.megamenu li.has-sub>a{padding:12px 30px 12px 12px;}
#css-menu,.cssmenu{width: 100%;height: 113%;}
#css-menu{position:fixed;top:0;right:100%;z-index:999;background-image: linear-gradient(90deg,#111 12%,rgba(0,0,0,0.4)250%);box-shadow:0 2px 6px 0 rgba(0,0,0,0.2);background-repeat: no-repeat;background-size: cover;background-position: center top;transition:all .4s ease-in-out;display:block}
.cssmenu,.cssmenu a,.cssmenu li,.cssmenu ul{margin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;font-size:16px;position:relative;display:block;float:none}
.cssmenu{overflow-x:hidden;overflow-y:visible}
.cssmenu a{line-height:1.3;padding:12px 15px}
.cssmenu>ul>li{cursor:pointer;display:block;float:none;padding: 20px 20px 0;}
.cssmenu>ul>li:first-child{border:none;text-align:center;height:65px;padding-left:0;cursor:default}
.cssmenu>ul>li:first-child a{display:inline-block;background:#fff!important;padding-right:0;line-height:65px}
.cssmenu>ul>li:last-child{border:0}
ul.megamenu:after{border:0}
.cssmenu>ul>li:last-child.active{border:0}
.cssmenu>ul>li:last-child>a{border:0}
.cssmenu>ul>li>a{font-size:20px;font-weight:700;display:block;color:#fff;line-height:21px;padding:12px 30px 12px 12px;text-transform: none;}
.cssmenu>ul>li>a:hover{text-decoration:none;color:#4db2ec;border:0}
.cssmenu>ul>li.active{font-weight:700}
.cssmenu>ul>li.search_icon{display:none;}
.cssmenu>ul>li.home{display:block;}
.cssmenu>ul>li.home .close-menu, #searchfs .close {color:#fff;font-size:50px;font-weight:300;padding:0 15px;line-height:25px;display:inline-block;float:right;cursor:pointer;margin-right:-30px}
.cssmenu>ul>li.has-sub>a:after,.cssmenu>ul>li.has-submenu>a:after{content:">";font-family: FontAwesome;font-style: normal;font-weight: 800;position:absolute;top:15px;right:15px;}
.cssmenu>ul>li.has-sub.active>a:after,.cssmenu>ul>li.has-submenu.active>a:after{content:"<";right:15px;top:17px;}
.cssmenu ul ul{position:relative;top:0;}
.cssmenu ul ul a{display:block;color:#fff;font-size:16px;font-weight:400;line-height:19px;padding:9px 26px 9px 36px!important;}
.cssmenu ul ul a:hover{color:#4db2ec!important}
.cssmenu ul ul li{border:0;display:block;float:none}
.cssmenu ul ul li a:hover{color:#4db2ec!important;border:none}
.cssmenu ul ul li.even a{background:0 0}
.cssmenu ul ul li.odd a{background:0 0;border:0}
.cssmenu ul ul li:last-child{border:none}
.flow{overflow:hidden;position:relative}
.cssmenu>ul>li.home .title_blog{margin:0;display:inline-block;vertical-align:middle;line-height:65px}
.cssmenu>ul>li.home .title_blog img{width:auto;height:auto;display:block;max-height:64px;}
}
</style>

Kedua, setelah meletakkan code diatas langkah selanjutnya adalah menghapus css menu nav pada blog teman-teman agar tidak bentrok. Selain menghapus css menu nav, teman-teman juga harus menghapus kode <nav ...> samapai </nav> dan ganti dengan code dibawah ini

<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'/>
<!-- menu navigasi header start -->
<div class='mega_menu' id='mega_menu'>
<div class='menu_mobile_burger' title='Menu'>
<svg viewbox='0 0 24 24'>
    <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='#000000'/>
</svg>
</div>

<div class='cssmenu' id='css-menu'>
<ul class='megamenu' id='megamenuid'>
  <li class='home'><span class='close-menu' title='Close'>&amp;times;</span></li>
  <li class='has-sub'><a class='menu-target' href='javascript:viod(0)'>Pendidikan</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Pendidikan' onclick='addURL(this)'>Pendidikan Umum</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Pendidikan%20Karakter' onclick='addURL(this)'>Pendidikan Karakter</a></li>
      <li class='last'><a href='https://www.azid45.web.id/search/label/Penelitian' onclick='addURL(this)'>Pendidikan Penelitian</a></li>
    </ul>
  </li>
  <li class='has-sub'><a class='menu-target' href='javascript:viod(0)'>Islam</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Filsafat%20Islam'>Filsafat Islam</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Seputar%20Islam'>Seputar Islam</a></li>
      <li class='last'><a href='https://www.azid45.web.id/search/label/Tokoh%20Muslim'>Tokoh Muslim</a></li>
    </ul>
  </li>
  <li class='mega-label has-sub'><a href='javascript:viod(0)'>Download</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Download'>Download</a></li>
    </ul>
  </li>
  <li class='has-submenu'><a class='menu-target' href='javascript:viod(0)'>More</a>
    <ul>
      <li><a href='https://www.azid45.web.id/search/label/Ilmu'>Ilmu</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Kepemimpinan'>Kepemimpinan</a></li>
      <li><a href='https://www.azid45.web.id/search/label/Tutorial'>Tutorial</a></li>
    </ul>
  </li>
<li><a href='https://www.azid45.web.id/p/cdata-document.html'>Sitemap</a></li>
</ul>
</div>
</div>
<!-- menu navigasi header end -->
</nav>

Ketiga, Setalah mengganti kode nav langkah selanjutnya dalah letakkan javascript beriktu tepat diatas kode </body>

<script type='text/javascript'>//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 801px)');if (mql.matches){
$(document).ready(function(){var a=$(".mega_menu").offset().top,e=function(){var e=$(window).scrollTop();e>a?$(".mega_menu").addClass(" fixed-nav"):a>e&&$(".mega_menu").addClass("relative-nav").removeClass("fixed-nav")};e(),$(window).scroll(function(){e()})});
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(//[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(//[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(//[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s72\-c\//,"/s202/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'" width="202" height="202"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
jQuery(document).ready(function(e){e("#megamenuid").megaBloggerMenu({postsNumber:4,noThumbnail:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnc4TueWwlNMR8T3wxBf1bWmHbDu2FI-YH_3o1m0154jFRTUp8m0Y23RdJfB_t3KvHQ1es3KpyZJWV7TtBYoslcy8mobjX8TQNXTlvP-13soCL9HPbFFBTbMz3qps_PDXJ59-5ymsQNwM/s1600/no_image_available.png"})});
function addURL(n){$(n).attr("href",function(){return this.href+"?&max-results=7"})};
};
if (window.matchMedia("(max-width:800px)").matches){
$(".cssmenu ul ul li:odd").addClass("odd"),$(".cssmenu ul ul li:even").addClass("even"),$(".cssmenu > ul > li > a").click(function(){$(".cssmenu li").removeClass("active"),$(this).closest("li").addClass("active");var s=$(this).next();return s.is("ul")&&s.is(":visible")&&($(this).closest("li").removeClass("active"),s.slideUp("normal")),s.is("ul")&&!s.is(":visible")&&($(".cssmenu ul ul:visible").slideUp("normal"),s.slideDown("normal")),0==$(this).closest("li").find("ul").children().length}),$(function(){$(".menu_mobile_burger").click(function(){$("#css-menu").css({right:"0"});var s=document.body;s.classList.toggle("flow")}),$(".close-menu").click(function(){$("#css-menu").css({right:"100%"});var s=document.body;s.classList.toggle("flow")})});
};
//]]>
</script>

Jika dengan code tersebut tidak berfungsi maka tambahkan pula javascript dibawah ini

<script type='text/javascript'>//<![CDATA[
// nav menu
!function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>

Keempat, Langkah terakhir adalah pastikan pada blog teman-teman sudah terdapat script JQuery, karena pada megamenu ini harus menggunakan Jquery. Tanpa script Jquery maka taidak akan berfungsi. Jika teman-teman sudah memiliki script Jquery maka bisa langsung Save template teman-teman. Namun jika belum terdapat Jquery bisa download Jquery internal berikut dan letakkan diatas kode </head>

Download

NB: Jangan lupa untuk mengganti alamat pada menu Nav dengan alamat blog teman-teman. Dan jangan bingung jika pada tampilan layout teman-teman sedikit berantakan dikarenakan code css megamenu.

Demikainlah Cara Membuat Megamenu Responsive Pada Menu Header di Blogger. Semoga bermanfaat. Amin.