Membuat Mega Menu Navigation Simple

Cara Membuat Mega Menu Navigation Simple Di blogger

Mega Menu Navigation With Thumbnail

Kali ini mas tamvan akan share lagi mega menu navigation plus dengan gambar thumbnail yang akan menampilkan postinan blog berdasarkan label dan disertai dengan image / thumbnail yang diambil dari postingan secara otomatis.

Mungkin kalian pernah melihat beberapa blog / website yang memakai menu navigation dan pada menu dropdownnya di sertai dengan gambar atau bagi kalian yang belum pernah melihatnya, bisa lihat di link demo berikut ini
Demo Tampilan Mega Menu Navigation With Thumbnail

Membuat Mega Menu Navigation Simple Di blog Plus Dengan Gambar Thumbnail

Masuk ke Menu Template Lalu Klik Edit HTML, Cari Code </head>

Setelah Ketemu Kalian masukan CSS dibawah ini tepat di atasnya


<style type="text/css">
/*Mega Menu Navigation With Thumbnail mastamvan.blogspot.com */
#mega-menu{background:#222 none repeat scroll 0% 0%;width:100%;margin:0 auto;padding:0;border-bottom:5px solid #63C4F1;display:block}
#mega-menu a{text-decoration:none!important}
#ms-tamvan{position:relative;width:100%;margin:0 auto;font-size:18px;font-weight:400;text-transform:uppercase}
.ms-tamvan *{margin:0;padding:0}
ul.ms-tamvan{list-style:none;line-height:1;overflow:visible!important;padding:0}
ul.ms-tamvan:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0}
ul.ms-tamvan li{border-left:1px solid #000;box-shadow:1px 0 0 #333 inset;list-style:none;position:relative;margin:0 auto!important;padding:0!important;display:inline-block}
ul.ms-tamvan li a{color:#fff;display:block!important;line-height:60px;margin:0;padding:0 15px!important}
ul.ms-tamvan li a:hover,ul.ms-tamvan li a.hoverover{background:#333}
ul.ms-tamvan ul{z-index:999;position:absolute;display:none;top:100%;border:1px solid #ccc}
ul.ms-tamvan ul li{min-width:160px;box-shadow:none;background:none!important;float:none!important}
ul.ms-tamvan ul li a{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;padding:12px 14px}
ul.ms-tamvan ul li a:hover,ul.ms-tamvan ul li a.hoverover{color:#000!important;background:#63C4F1}
ul.ms-tamvan ul ul{display:none;left:100%;top:0}
ul.ms-tamvan li div.submenu{box-shadow:3px 3px 5px #333;display:none;position:absolute;width:600px;left:-1px;top:100%;overflow:hidden;min-height:150px;background:#f9f9f9;border:none;z-index:999}
ul.ms-tamvan ul,ul.ms-tamvan ul li{display:block!important;border:none;margin:0!important;padding:0!important}
ul.ms-tamvan ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#222}
ul.ms-tamvan ul.postslist{position:relative;display:block;width:65%;float:right;background:#f9f9f9;margin:8px 0!important}
ul.ms-tamvan ul.postslist li{display:block;overflow:hidden;box-shadow:0 1px 0 0 #fff;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:5px 5px 5px 110px!important;margin-right:10px!important}
ul.ms-tamvan ul.postslist li:last-child{border-bottom:none;box-shadow:none}
ul.ms-tamvan ul.postslist li .imgCont{position:absolute;left:0;top:8px;width:100px;height:50px;overflow:hidden;border:1px solid #eee}
ul.ms-tamvan ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0}
ul.ms-tamvan ul.postslist li a{color:#000!important;border:none!important;background:none;display:block;line-height:1.4;box-shadow:none;padding:0!important;text-decoration:none;font-size:15px}
ul.ms-tamvan .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsZF8tGhytjfCSqwVsiD5qQv4UsAmD6EwIjuV1skonjhNJcLeOkqGNURpmAH8OLf0nEpx9At9HGv1ZO-GQA9iW5pprevaMm983BCJ-zVIhnd7_3pWpUBn6YPmi2TbrthFC2N1El5-Sqw/h120/loading.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}
ul.ms-tamvan .menuArrow{border-bottom:10px solid transparent;border-top:10px solid transparent;border-left:10px solid #000;display:block;height:0;margin-top:-10px;position:absolute;right:11px;top:50%;width:0}
ul.ms-tamvan li:hover > ul,ul.ms-tamvan li:hover div.submenu{display:block}
</style>

Sekarang Kalian Cari Lagi Kode </body> dan Masukan Javascript dibawah ini, tepat diatasnya.


<script type='text/javascript'>jQuery(document).ready(function($){$('#ms-tamvan').ajaxBloggerMenu({numPosts:7,defaultImg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDAuMt0yDZ9RQjX8cWmxqP5OXjs_JlJMEwH8E1GBfSAvvONvueB_y87R2IKHQyg0ug66AQyx4bKy6XofHcRGJKPa-bCxPI5i5Dgl_DcBAhEr9ZiqlPKOgwSO0ldOLV5TH8TTICrwt0yY/w140-h140-p/no-image.png'})});</script>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu 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.lielem.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.numPosts};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":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").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.defaultImg;r.push('<li><span class="imgCont"><a href="',s,'"><img alt="',i,'" src="',o,'" title="',i,'"/></a></span><a title="',i,'" href="',s,'">',i,"</a></li>")}):r.push("<h5>","Sorry!!, No Posts to Show", "</h5>");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error" ){this.hideLoader();this.addArrow();this.container.html("<h5>Error!! Could not fetch the Blog Posts!</h5>")}},addArrow:function(){this.lielem.closest("li").find ("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("<span></span>",{"class":"menuArrow"}).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("hoverover");var r=e(this).find("ul.verticlemenu li"). height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first"). removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("navmenublue").find(">li").find("ul:first").addClass( "verticlemenu").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("<ul></ul>",{"class":"postslist"}))},requestFirstAjax: function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn. ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function (){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>

Langkah selanjutnya pemasangan HTML untuk menampilkan mega menu akan di simpan dimana.

sekarang tinggal pemasangan HTMLnya, Terserah kalian mau simpan di mana. Tapi Pada tutorial ini saya kita akan memasangnya di dalam body

Sekarang, kalian cari kode <body>. Kalo sudah ketemu, copy dan masukan HTML mega menu dibawah ini tepat dibawahnya


<nav id='mega-menu'>
    <ul class='ms-tamvan' id='ms-tamvan'>
        <li><a href='http://mastamvan.blogspot.com/p/blog-page.html' target='_blank' title='Template Blog'><i class='fa fa-desktop'></i> Template</a></li>
        <li><a href='http://mastamvan.blogspot.co.id/search/label/Widget' target='_blank' title='CSS'><i class='fa fa-code'></i> CSS</a>
            <ul class='submenu'>
                <li><a href='http://mastamvan.blogspot.co.id/search/label/Blogger' target='_blank' title='Navigasi'><i class='fa fa-list'></i> Navigasi</a></li>
                <li><a href='http://mastamvan.blogspot.co.id/search/label/Tips%20Dan%20Trik' target='_blank' title='Slider'><i class='fa fa-picture-o'></i> Slideshow</a></li>
                <li><a href='http://mastamvan.blogspot.co.id/search/label/Tools' target='_blank' title='Gallery'><i class='fa fa-th'></i> Gallery</a></li>
            </ul>
        </li>
        <li><a href='http://mastamvan.blogspot.co.id/search/label/Blogger' target='_blank' title='Blogging'><i class='fa fa-laptop'></i> Blogging</a>
            <ul class='submenu'>
                <li><a href='http://mastamvan.blogspot.co.id/search/label/Widget' target='_blank' title='Widget Blog'><i class='fa fa-tablet'></i> Widget Blog</a></li>
                <li><a href='http://mastamvan.blogspot.co.id/search/label/Tips%20Dan%20Trik' target='_blank' title='jQuery'><i class='fa fa-code'></i> jQuery</a></li>
            </ul>
        </li>
        <li><a href='http://mastamvan.blogspot.co.id/search/label/Tools' target='_blank' title='SEO'><i class='fa fa-globe'></i> SEO</a></li>
        <li><a href='http://mastamvan.blogspot.co.id/p/sitemap.html' target='_blank' title='Follow'><i class='fa fa-sitemap'></i> Sitemap</a></li>
        <li><a href='http://www.blogger.com/follow-blog.g?blogID=6222520536924570210' target='_blank' title='Follow'><i class='fa fa-users'></i> Follow</a></li>
    </ul>
</nav>

Kalo Sudah, Kalian Tinggal Save Dan Lihat Hasilnya

#Keterangan
Kalo Icon Di Menu Tidak Tampil, Copy Dan Masukan Css FontAwesome dibawah ini tepat diatas kode </head>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Mega Menu ini memerlukan jquery library Jadi kalo thumbnail mega menunya tidak tampil, kalian masukan kode dibawah ini tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
dan jangan lupa, ganti url labelnya dengan label blog kalian.

Semoga bermanfaat, salam tamvan

Cukup sekian dan terimakasih, semoga artikel yang saya share tentang Membuat Mega Menu Navigation Dengan Gambar Thumbnail ini bermanfaat.
Kalo ada yang bingung / tidak di mengerti silahkan bertanya di kolom komentar :). cara membuat mega menu dengan css, membuat mega menu di blogger, membuat mega menu jquery, membuat mega menu navigation

Mas Tamvan

Membuat Mega Menu Navigation Simple

Cara Membuat Mega Menu Navigation Simple Di blogger

Mega Menu Navigation With Thumbnail

Cara Membuat Menu Bar Responsive di Blog Tanpa Edit Html Pure CSS

Menu Navigation Bar Seperti Blog Arlina Design

Membuat Menu Bar Drop Down Responsive

Membuat Mega Menu Navigation Simple Di blog Plus Dengan Gambar Thumbnail