Cara Membuat Mega Menu Di Blog

Cara Membuat Mega Menu Di Blog -  Pada kali ini kita akan membahas cara membuat mega menu atau membuat mega menu dengan gambar di blog. Mega menu hampir sama dengan menu dropdown yang biasa kita lihat, tapi mega menu ada yang memiliki submenu yang banyak atau menampilkan gambar sesuai dengan kategori. Kebanyakan orang membuat mega menu dengan css hanya menampilkan link dengan jumlah yang banyak. Sedangkan mega menu yang akan kita buat akan menampilkan gambar atau thumbnail dari setiap postingan dan otomatis. Bagi yang ingin membuat mega menu di blog, simak langkah dibawah ini.

Live Demo

CSS Mega Menu Blog

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan css berikut diatas ]]></b:skin>.

.megamenu *,ul.megamenu,ul.megamenu:after{margin:0;padding:0}ul.megamenu{list-style:none;line-height:1;overflow:visible!important}ul.megamenu:after{content:'display:block;height:0;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #666;font-size:0;line-height:0;bottom:35px;right:10px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#666;font-size:14px;transition:all .3s ease-in-out}ul.megamenu li a:hover{color:#fff;background:#e75151}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:100px;float:none;background:#000;text-shadow:none}ul.leftmenulist li{width:149px}ul.megamenu ul li a{text-transform:none;font-weight:400}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:600px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,.1);transition:all .3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}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:149px;left:0;top:0;bottom:0;background:#EEE;border-right:1px dashed #e5e5e5!important}ul.megamenuid ul.leftmenulist a{border-left:none!important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:445px;float:right;margin:0!important;background:0 0}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:0 5px!important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100px;height:100px;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none!important;padding:0 5px!important;line-height:1.4;font-size:12px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:0 0}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZzkZbdqryaH9RaCWK1pR2Ns-ve7J8aVnxmz0cfjj-pWgYPBjNNmcPnk2eUE0x1auIGfawCjuC-Cq10yzY5DTk6HVqM_K67n0IfzO8WJr9IDGKYu5NysaYM_uLjr0I4LnduS-Pu_3Nfw/s1600/wait.gif') no-repeat;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}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:11px;top:50%;width:0}#megamenuid h5:after,#megamenuid h5:before{content:"position:absolute;left:50%;border-left:2px solid #000;border-right:2px solid #000}#megamenuid{margin:0 auto 10px;padding:0;float:left;background:#f9f9f9}#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 #000;border-radius:8px 8px 0 0}

Javascript Mega Menu Blog

• Login ke blogger.
• Kklik menu template.
• Edit html.
• Pastekan script berikut diatas </head>.

(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("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/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(/\/s72\-c\//,"/s100-c/"):n.settings.noThumbnail;r.push(' <li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br /><div class="megatitle"> ',i,"</div> </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($) { $('#megamenutapike').megaBloggerMenu({ postsNumber : 4, noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTa27u-s5ScfqHE1lhB8pqlCUKHyP1eAEmVdxNvm5GN77TEN2OZxTITLfX0RtvpVoeMJ5Ro2qkFFpbO59epN40q063IlYIya9k8OLs-JWPnYwwJzToOwhG4DQaJTLReFjQtpGp36_39A/s1600/no_image_available.png' }); }); $(function(){ $('.search-here').submit(function(e){ if($('.search-box .search-field').val().length==0){ $('.search-box .search-alert').fadeIn().css('display','inline-block'); e.preventDefault(); } }); });

HTML Mega Menu Blog

• Masuk ke blogger.
• Klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan kode di bawah ini.

<div id='megamenuid'> <ul class='megamenu' id='megamenutapike'> <li><a class='menu-target' href='#'>Mega Menu 1</a> <ul> <li><a href='http://tapike.com/search/label/Film'>Film</a></li> <li><a href='http://www.tapike.com/search/label/Unik?'>Unik</a></li> <li><a href='http://tapike.com/search/label/Wisata'>Wisata</a></li> <li><a href='http://www.tapike.com/search/label/Teknologi'>Teknologi</a></li> </ul> </li> <li><a class='menu-target' href='#'>Mega Menu 2</a> <ul> <li><a href='http://www.tapike.com/search/label/Top%20List'>Top List</a></li> <li><a href='http://www.tapike.com/search/label/Personal'>Personal</a></li> </ul> </li> <li><a href='http://www.tapike.com'>Single Link 1</a></li> <li><a href='http://www.tapike.com'>Single Link 2</a></li> <li><a href='http://www.tapike.com'>Single Link 3</a></li> </ul> </div>

Pengaturan

Jika mega menu tidak bisa meload gambar, tambahkan Jquery berikut bersamaan dengan javascript di atas, namun jika blog Anda sudah memiliki jquery versi lain lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Demikianlan penjelasan saya mengenai cara membuat mega menu atau cara membuat mega menu dengan gambar di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Bila ada yang kurang paham bisa tanyakan lansung melalui form komentar di bawah dan jangan lupa di like atau share.