logo blog

Membuat Mega Menu Navigation Simple

Membuat Mega Menu Navigation Simple

mega menu navigation

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

Nah bagi kalian yang ingin memasangnya di blog, silahkan ikuti tutorial di blog mas tamvan ini. Tapi jangan lupa untuk membaca tutorial tips dan trik lainnya ya :)

Membuat Mega Menu Navigation Simple Di blog Plus Dengan Gambar Thumbnail

  • Login ke Blogger.com
  • 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://lh3.googleusercontent.com/-tvsFPhYWC6w/Ui4Qkjn2eoI/AAAAAAAAGH8/dyHH8KQIQ60/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://lh3.googleusercontent.com/-bX9QkKivPsU/UhmMCRTYNjI/AAAAAAAAGCA/UhxTPXYjElQ/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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Mega Menu Navigation Simple. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Mega Menu Navigation Simple. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Comment Loading