DropDown Mega Menu Sederhana adalah anakan dari sub menu navigasi utama dengan menampilkan thumbnail gambar dan snippet dari entri posting pada blog. Dengan menambahkan Mega Menu ini akan menambah mudah para visitor untuk mencari posting lain dari pada blog dan tampilannya juga sangat menarik.
DropDown Mega Menu Sederhana ini berisikan related post yang dapat kita atur dengan menempatkan judul label yang ingin ditampilkan pada Mega Menu dan disesuaikan dengan feed blog.
Cara Membuat DropDown Mega Menu Sederhana Support HTML5.
Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan CSS dibawah ini tepat diatas kode </style> atau ]]></b:skin>.
/* Skin Design Mega Menu Wrapper */
.navlist{position:relative;font-size:0;list-style:none;padding:0;margin-bottom:0}
.navlist >li.menu-item-has-children.item-plus >a{position:relative}
.navlist >li.menu-item-has-children.item-plus >a:after,.navlist >li >ul >li.menu-item-has-children.item-plus >a:after{content:'\f107';font-family:fontawesome;display:inline-block;margin-left:8px}
.navlist >li >ul >li.menu-item-has-children.item-plus >a:after{content:'\f105';font-family:fontawesome;float:right}
.navlist >li >.sub-menu{transform:translateY(0)}
.navlist li{position:relative;display:inline-block;margin:0 10px;}
.navlist li a{display:inline-block;font-size:14px;color:#fff;line-height:52px;font-weight:700}
.navlist li:first-child{margin-left:0}
.navlist li .sub-menu{position:absolute;background-color:#dadada;width:190px;padding:0;list-style:none;left:-15px;top:91%;border:1px solid #f3f3f3;opacity:0;visibility:hidden;transform:scale(1.03);transition:all .4s}
.navlist li .sub-menu li{display:block;margin:0}
.navlist li .sub-menu li a{display:block;padding:0 15px;border-bottom:1px solid #f3f3f3;line-height:55px;font-weight:400}
.navlist >li >.sub-menu >li:last-child >a,.navlist >li >.sub-menu >li >.sub-menu >li:last-child >a{border:0}
.navlist li .sub-menu .sub-menu{left:100%;top:-1px}
.navlist li.current-menu-parent >a,.navlist li.current-menu-item >a,.navlist li:hover >a{color:#e67e22}
.navlist li:hover >.sub-menu{opacity:1;visibility:visible;transform:scale(1.0)}
.navlist li.megamenu{position:static}
.navlist li.megamenu:after{content:'';display:block;clear:both}
.navlist li.megamenu .sub-menu{width:98.1%;padding:10px;left:auto;right:0;background-color:#dadada;border:0;box-shadow:0 2px 2px rgba(0,0,0,0.08)}
.navlist li.megamenu .sub-menu li{float:left;padding:0px;background:none}
.navlist li.megamenu .sub-menu li a{border:0;line-height:2em;font-size:12px}
.navlist li.megamenu .post{text-align:center;background:#dadada;padding:0}
.navlist li.megamenu .post .post-media img{width:100%}
.post-media{overflow:hidden;max-height:120px}
.navlist li.megamenu .post h2{font-size:14px;color:#222;margin:8px auto;text-align:center}
.navlist li.megamenu .post h2 a{color:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.navlist li.megamenu .post h2 a:hover{color:#e67e22}
.navlist li.megamenu .post .post-date{display:block;margin:auto;font-size:12px;text-align:center;color:#999}
.navlist li.megamenu.col-5 .sub-menu li{width:20%}
.navlist li.megamenu.col-4 .sub-menu li{width:25%}
.navlist li.megamenu.col-3 .sub-menu li{width:33.3333333333%}
.navlist li.megamenu.col-2 .sub-menu li{width:50%}
.navlist li.megamenu.col-1 .sub-menu li{width:100%}
.navlist.off-canvas{position:fixed;width:100%;max-width:320px;top:52px;left:0;padding:0;overflow-x:hidden;overflow-y:auto;background-color:#f7f9f9;box-shadow:0 100px 0 0 #f7f9f9;z-index:99;transform:translateX(-100%);transition:all 0.3s ease}
.navlist.off-canvas li{position:static;display:block;margin:0}
.navlist.off-canvas li a{display:block;border-bottom:1px solid #eee;line-height:42px;padding:0 15px}
.navlist.off-canvas li .sub-menu{opacity:1;visibility:visible;position:absolute;border:0;width:100%;min-height:100%;top:0;left:0;background-color:#f7f9f9;transform:translateX(-100%)}
.navlist.off-canvas li .sub-menu li a{border-bottom:1px solid #eee}
.navlist.off-canvas li .sub-menu.sub-menu-active{transform:translateX(0);z-index:98}
.navlist.off-canvas li.megamenu .sub-menu{padding:0 15px;-webkit-box-shadow:0;-moz-box-shadow:0;box-shadow:0}
.navlist.off-canvas li.megamenu .sub-menu li{width:100%!important;float:none;padding:10px 0}
.navlist.off-canvas li.megamenu .sub-menu li a{border:0}
.navlist.off-canvas li.megamenu .sub-menu li.back-mb{width:auto!important;background-color:#f3f3f3;margin-left:-15px;margin-right:-15px;margin-bottom:10px}
.navlist.off-canvas li.megamenu .sub-menu li.back-mb a{font-size:11px}
.navlist.off-canvas li.megamenu .sub-menu li:last-child{padding-bottom:30px}
.navlist.off-canvas li.back-mb{background-color:rgba(0,0,0,0.02)}
.navlist.off-canvas.off-canvas-active{transform:translateX(0)}
.navlist.off-canvas .submenu-toggle{position:absolute;right:0;width:42px;height:42px;text-align:center;cursor:pointer;background-color:#eff1f1;background-color:rgba(0,0,0,0.02);border-left:1px solid #f2f2f2;color:#383838;transform:translateY(-43px)}
.navlist.off-canvas .submenu-toggle .fa{font-size:14px;line-height:42px}
.open-menu{display:none;position:absolute;width:50px;height:14px;cursor:pointer;margin:auto;top:0;left:0;bottom:0;z-index:98}
.open-menu .item{position:absolute;display:block;font-size:0;width:20px;height:2px;background-color:#383838;margin:auto;left:0;right:0;overflow:hidden;z-index:1;transition:all 0.3s ease}
.open-menu .item-1{top:0}
.open-menu .item-2{top:0;bottom:0}
.open-menu .item-3{bottom:0}
.open-menu.toggle-active .item{background-color:#e67e22}
.close-menu{position:absolute;width:50px;height:14px;cursor:pointer;margin:auto;top:0;left:0;bottom:0;z-index:99;display:none}
Letakkan kode script dibawah ini tepat diatas kode </head>.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<script class='java' type='text/javascript'>
//<![CDATA[
function labelthumbs(t){document.write('<ul class="'+outerclass+'">');for(var e=0;e<numposts;e++){var r,i=t.feed.entry[e],n=i.title.$t,l=i.category[0].term;if(e==t.feed.entry.length)break;for(var o=0;o<i.link.length;o++)if("alternate"==i.link[o].rel){r=i.link[o].href;break}var u;try{u=i.media$thumbnail.url}catch(m){s=i.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1B6ED2M9snOawVrjXE6XfYTwauYoxw38dC-8G2esK70nqS1qPBh58-kBCb7y4s0d5tu1-eR5sZRXPt5lkCorr72_F6oYHLjwOYF1W22GhlgCNM3CH8gYxffXwBvbt_C2Yxzf97H9gXbu/s500-c/no-image-found.jpg"}var p=i.published.$t,v=p.substring(0,4),h=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December";var A=g[parseInt(h,10)]+" "+f+", "+v;document.write(starttag+"<"+intag+' class="post">'),document.write('<div class="post-media"><div class="image-wrap"><img src="'+u.replace("/s72-c/","/s400-p/")+'" alt="'+n+'"/></div></div><div class="post-body">'),"featured-slider"==outerclass&&document.write('<span class="cat"><a href="/search/label/'+l+'">'+l+'</a></span><div class="post-title"><h4><a href="'+r+'">'+n+'</a></h4></div><div class="post-meta"><span class="post-date">'+A+"</span></div></div>"),"sub-menu"==outerclass&&document.write('<div class="post-title"><h2><a href="'+r+'">'+n+'</a></h2></div><span class="post-date">'+A+"</span></div>"),document.write("</"+intag+">"+endtag)}document.write("</ul>")};
//]]>
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Cara menerapkan CSS dan script pada template blog.
Masukkan kode dibawah ini pada pada bagian menuwrapper atau navwrapper atau navigationwrapper atau yang sesuai dengan kode template.
<nav class='infinite-nav' data-menu-responsive='992' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class='container'>
<div class='open-menu'>
<span class='item item-1'/>
<span class='item item-2'/>
<span class='item item-3'/>
</div>
<div class='close-menu'/>
<ul class='navlist'>
<li><a href='/' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li>
<a href='/p/about-me.html'><span itemprop='name'>About</span></a>
<ul class='sub-menu'>
<li><a href='/p/contact.html'><span itemprop='name'>Contact</span></a></li>
<li><a href='/p/forum.html'><span itemprop='name'>Forum</span></a></li>
<li><a href='/p/sitemap_13.html'><span itemprop='name'>Sitemap</span></a></li>
<li>
<a href='/p/privacy-policy.html'><span itemprop='name'>Policy</span></a>
<ul class='sub-menu'>
<li><a href='/p/disclaimer.html' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='/p/terms-of-service.html' itemprop='url'><span itemprop='name'>TOS</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='megamenu col-5'>
<a href='/search/label/Android'><span itemprop='name'>Android</span></a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default/-/Android?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>
<li class='megamenu col-5'><a href='/search/label/Software' itemprop='url'><span itemprop='name'>Software</span></a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default/-/Software?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>
<li class='megamenu col-5'><a href='/search/label/Games' itemprop='url'><span itemprop='name'>Games</span></a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default/-/Games?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>
</ul>
</nav>
Jika semua sesuai dengan tutorial diatas, silahkan klik SAVE template.
Demikian tutorial yang bisa kami sampaikan, mudah-mudahan bisa bermanfaat dan apabila ada yang kurang dipahami silahkan tinggalkan pesan.
Show Parser Hide Parser