 |
| How to Make a Navigation Menu Ala Jalan Tikus on Blog |
I have optimized this menu for responsiveness to match the device you are using, although it is not entirely similar to the mobile version of the Jalan Tikus website. For the latest, the Jalan Rat template will follow because the making requires a long time.
Not only Navigation Menu and Recent Post Mega Menu, but this menu also has features similar to the Jalan Tikus websites, such as Tiny Menu and similar search fields. 😎
 |
| The Jalan Tikus menu with Search Form |
In this tutorial I use CSS Minify, so it's easier to edit CSS. You can use the dirtymarkup.com website to make CSS easier to read.
Step One: Make sure your template uses jQuery and install the CSS Font Script below right above the code </head> so that the text is similar to the Jalan Tikus website.
<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,400italic,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");loadCSS("https://fonts.googleapis.com/css?family=Bitter");
//]]>
</script>Step Two: Enter the CSS below directly above the code ]]></b:skin> or </style>
/* Menu Jalan Tikus Created by www.idblanter.com */
#headerblanter{height:65px;font-family:'Bitter',Roboto,Arial;width:100%;position:fixed;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);top:0;right:0;left:0;z-index:11;transition:all .5s ease-in-out;background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}.mega-wrapper{background:#fff;overflow:hidden;left:0;right:0;top:65px;position:absolute;padding:20px;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;-webkit-box-shadow:0 12px 50px rgba(0,0,0,0.17);box-shadow:0 12px 50px rgba(0,0,0,0.17);transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#navigation ul li:hover .mega-wrapper{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showkacatikus{color:#fff;position:fixed;top:12px;right:10px;display:none}#showjalantikus{color:#fff;position:fixed;top:12px;left:10px;display:none}#showkacatikus i,#showjalantikus i{font-size:35px}.megamenu{width:1100px;max-width:100%;margin:0 auto}.mega-wrapper li{width:205px;height:150px;margin-bottom:15px;margin-right:15px;border-radius:7px;overflow:hidden;position:relative}.mega-wrapper li:after{content:'';background:-webkit-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-webkit-gradient(linear,left bottom,left top,color-stop(40%,rgba(0,0,0,.5)),color-stop(68%,hsla(0,0%,100%,0)));background:-o-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:linear-gradient(0deg,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);position:absolute;transition:all .3s ease-in-out;top:0;bottom:0;left:0;right:0}.mega-wrapper li:hover:after{opacity:.8}.mega-wrapper ul li a{font-size:13px!important;padding:0!important;z-index:9}.mega-wrapper ul li a:hover{background:transparent!important}.mega-wrapper ul li a:nth-child(2){position:absolute;width:195px;bottom:0;text-shadow:0 3px 6px #000;text-transform:none!important;padding:10px!important}.mega-wrapper li img{height:150px;width:220px}#search-blanter{position:fixed;background:#ffeddf;left:0;right:0;top:65px;padding:15px 15px 18px;text-align:center;transform:scaleY(0);transition:all .3s ease-in-out;-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#search-blanter.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#search-blanter:after{content:'';height:4px;background:linear-gradient(90deg,#ce0a46,#e98125);position:absolute;bottom:0;left:0;right:0}#bsearchbox{width:850px;max-width:100%;margin:0 auto;position:relative;overflow:hidden}#bsearchbox:before{content:'';background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzfnXv1RE25ZqLpHNLPQqltvzKx-Dafo2h1bHXv6g-RpFW_4tKaoI497jrZAh1tCtpQKFMn7n-LkJv6YGYv2QLEpPhjml_fA3kcKJzJlP5mypgONz98z5GlXGg_3WcH6STYFH2-yptTt8/s35/searchblanter.png)no-repeat;position:absolute;width:33px;height:35px;left:17px;top:13px}input#searchteks{font-size:18px;padding:20px 20px 20px 70px;border:1px solid #e69f65;border-radius:4px;width:100%;outline:none;color:#666}button.bsearchbtn{position:absolute;top:1px;background:linear-gradient(0deg,#e3642d,#f5743c 56px,#fff);font-weight:700;background:-webkit-linear-gradient(bottom,#e3642d,#f5743c 56px,#fff);font-family:'Roboto',Arial;text-transform:uppercase;color:#fff;border-radius:0 4px 4px 0;border:none;font-size:20px;width:150px;height:61px;right:0;outline:none;cursor:pointer}button.bsearchbtn:hover{opacity:.9}button.bsearchbtn:before{bottom:0;border-top:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after{top:1px;border-bottom:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after,button.bsearchbtn:before{position:absolute;height:30px;left:0;content:"";border-left:10px solid #fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:9}#navigation ul li a.blanter-nav:hover:after{bottom:-1px;border-bottom:7px solid #fff}#navigation ul li a.blanter-nav:after{position:absolute;bottom:-7px;width:14px;left:50%;margin-left:-7px;content:"";-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:7px solid hsla(0,0%,100%,0);border-left:7px solid hsla(0,0%,100%,0);border-right:7px solid hsla(0,0%,100%,0);-webkit-transition:.2s;-o-transition:.2s;transition:.2s}#navigation ul li a:hover{background:rgba(255,255,255,.14)}#navigation ul li{float:left}#navigation ul li a.blanter-nav{position:relative}#navigation ul li a{color:#fff;font-size:15px;text-transform:uppercase;padding:21px;font-weight:600;display:block}#navigation ul{margin:0;padding:0;list-style:none}#header2{float:left;font-size:160%;text-transform:uppercase;font-weight:300;line-height:57px;margin-top:8px;margin-right:50px}#header2 img{margin:0;padding:0;max-width:240px;max-height:70px}.titlewrapper{margin:0;padding:0}.header h1.title,.header p.title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.4px;margin:5px 0}.header .description{display:none}.header a,.header a:hover{color:#fff}.logo{float:left;font-size:160%;text-transform:uppercase;font-weight:300;max-height:70px}.logo a{color:#fff;text-decoration:none;margin-top:-5px}.logo a:hover{color:#fff;text-decoration:none}.logo img{top:0;left:0!important}#jtheadermenu{font-family:'Bitter',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:100px;top:45px;padding:10px 15px 5px;width:18px;height:1px;transition:all .3s ease-in-out;z-index:9;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);opacity:0;border-radius:4px;overflow:hidden}#jtheadermenu li{width:100%;border-bottom:1px solid #ddd}#jtheadermenu li a{padding:8px 0;display:block;color:#444;font-weight:700;font-size:14px!important}#jtheadermenu li a:hover{color:#e56f2a}#jtheadermenu.shows{visibility:visible;height:167px;opacity:1;width:180px}a.blanter#showmenu i.material-icons{line-height:.6;font-size:35px;margin-top:5px}#menu-kiri{margin-right:30px}a.blanter#showsearch i.material-icons{line-height:.6;font-size:40px;margin-top:5px}#showsearch.aktif{background:#ffeddf;color:#e87e25!important}a.blanter i.fa{margin-top:5px}a.blanter{font-size:22px;color:rgba(255,255,255,0.73)!important;padding:15px 8px;text-align:center;float:right;margin-right:5px}a.blanter:hover{color:#fff!important}
@media screen and (max-width:1024px){#menu-kiri{display:none}}
@media screen and (max-width:768px){#headerblanter li a{width:100%;text-align:left;color:#fff}#headerblanter li{width:100%}.nav-menu2{width:100%}#search-box .fa-arrow-left,.blanter-back{display:block}#header2{width:220px;height:60px;overflow:hidden;float:none;margin:8px auto}a#showsearch{visibility:hidden}.mega-wrapper li{width:47%!important;height:120px}#search-blanter{background:#fff;padding:0}#bsearchbox{width:auto}input#searchteks{width:75%;font-size:15px;border:none}#bsearchbox:before{background-size:25px}#menu-wrapper{width:100%;position:absolute;top:60px;transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;overflow:hidden}#menu-wrapper,.mega-wrapper{background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}#menu-wrapper.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showjalantikus,#showkacatikus,#menu-kiri{display:block}.mega-wrapper li:nth-child(2),.mega-wrapper li:nth-child(4),.mega-wrapper li:nth-child(6){margin-right:0}.mega-wrapper{z-index:1;top:0}#jtheadermenu{right:80px;top:initial;bottom:70px}#jtheadermenu li a{color:#555}.mega-wrapper li img{height:120px}li.clearfix:nth-child(n+7),button.bsearchbtn,#navigation ul li a.blanter-nav:after{display:none}}Step Three: Place the Javascript below right above the code
</head>
<script type='text/javascript'>
//<![CDATA[
// Javascript Jalan Blanter
function jalanblanter(t){document.write('<ul class="taglabel">');for(var e=0;e<numpostsx;e++){var r,n,m=t.feed.entry[e],i=m.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<m.link.length;o++){if("replies"==m.link[o].rel&&"text/html"==m.link[o].type){var u=m.link[o].title;m.link[o].href}if("alternate"==m.link[o].rel){r=m.link[o].href;break}}try{n=m.media$thumbnail.url,n=n.replace("/s72-c/","/w215-h150/")}catch(t){s=m.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),n=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png"}var l=m.published.$t,g=l.substring(0,4),p=l.substring(5,7),x=l.substring(8,10),f=new Array;if(f[1]="Jan",f[2]="Feb",f[3]="Mar",f[4]="Apr",f[5]="May",f[6]="Jun",f[7]="Jul",f[8]="Aug",f[9]="Sep",f[10]="Oct",f[11]="Nov",f[12]="Dec",document.write('<li class="clearfix">'),1==tagpostthumbnailsx&&document.write('<a href="'+r+'"><img alt="'+i+'" title="'+i+'" class="tagpost_thumb" src="'+n+'"/></a>'),document.write('<a href="'+r+'" title="'+i+'">'+i+"</a><br>"),"content"in m)h=m.content.$t;else if("summary"in m)h=m.summary.$t;else var h="";if(h=h.replace(/<\S[^>]*>/g,""),1==tagpostsummaryx)if(h.length<numcharsx)document.write(""),document.write(h),document.write("");else{document.write("");var w=(h=h.substring(0,numcharsx)).lastIndexOf(" ");h=h.substring(0,w),document.write(h+"..."),document.write("")}var A="",v=0;document.write("<br>"),1==tagpostdatex&&(A=A+x+"-"+f[parseInt(p,10)]+"-"+g,v=1),1==tagpostcommentnumx&&(1==v&&(A+=" | "),"1 Comments"==u&&(u="1 Comment"),"0 Comments"==u&&(u="No Comments"),A+=u=""+u,v=1),1==tagpostmorex&&(1==v&&(A+=" | "),A=A+'<a href="'+r+'" class="url" title="'+i+'">More »</a>',v=1),document.write(A),document.write("</li>"),1==tagpostseparatorx&&e!=numpostsx-1&&document.write("")}document.write("</ul>")}var numpostsx=10,tagpostthumbnailsx=!0,tagpostmorex=!1,tagpostseparatorx=!1,tagpostcommentnumx=!1,tagpostdatex=!1,tagpostsummaryx=!1,numcharsx=0;
//]]>
</script>Step Four: Install the HTML Menu below right below the code </body>
<header id='headerblanter' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<a href='javascript:void' id='showjalantikus' title='Show Navigation'><i class='material-icons'></i></a>
<a href='javascript:void' id='showkacatikus' title='Show Search'><i class='material-icons'></i></a>
<b:section class='header2' id='header2' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Editor) Anzrosone (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvm8E7E7dA7Slg5YOSgxEtyKUcc80OTiv5oQ95zHvVrG1NOKTQnCppFPDLfInfYDchgdG4Ue2LmvHH2MyQjpqWNvaZXmIDgooGuAip0g2vaQ15k23HvGWGiogtGIQM1faPhhaEuOMHdY/s1600/JalanTikus.png</b:widget-setting>
<b:widget-setting name='displayHeight'>61</b:widget-setting>
<b:widget-setting name='sectionWidth'>322</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>298</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "description"'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 itemprop='headline' style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title' itemprop='headline'><b:include name='title'/></p>
<b:else/>
<h1 class='title' itemprop='headline'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title' itemprop='headline'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description' itemprop='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<div id='menu-wrapper'>
<div id='jtheadermenu'>
<li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Pasang Iklan</span></a></li>
<li><a href='#' itemprop='url' title='Hubungi Kami'><span itemprop='name'>Hubungi Kami</span></a></li>
<li><a href='#' itemprop='url' title='Tentang Kami'><span itemprop='name'>Tentang Kami</span></a></li>
<li><a href='#' itemprop='url' title='Kerjasama'><span itemprop='name'>Kerjasama</span></a></li>
</div>
<div id='navigation'>
<ul>
<li><a class='blanter-nav' href='#' itemprop='url' title='Apps'><span itemprop='name'>Apps</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://www.idblanter.com/feeds/posts/default/-/Template?orderby=updated&alt=json-in-script&callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Games'><span itemprop='name'>Games</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://askblanter.blogspot.com/feeds/posts/default/-/Game?orderby=updated&alt=json-in-script&callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Tips & Trik'><span itemprop='name'>Tips & Trik</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://www.idblanter.com/feeds/posts/default/-/Tutorial?orderby=updated&alt=json-in-script&callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Gadget'><span itemprop='name'>Gadget</span></a></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Gokil'><span itemprop='name'>Gokil</span></a></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Tech News'><span itemprop='name'>Tech News</span></a></li>
</ul>
</div>
<div id='menu-kiri'>
<a class='blanter' href='javascript:;' id='showsearch' target='_blank' title='Show Search'><i class='material-icons'></i></a>
<a class='blanter' href='javascript:;' id='showmenu' target='_blank' title='Show More'><i class='material-icons'></i></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Google Plus'><i aria-hidden='true' class='fa fa-google-plus'/></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>
</div>
</div>
<div id='search-blanter' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
<form action='/search' id='bsearchbox' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get'>
<meta content='/search?q={q}' itemprop='target'/>
<input id='searchteks' itemprop='query-input' name='q' placeholder='Cari Tips, Apps dan Games...' required='required' type='text' value=''/>
<button class='bsearchbtn' type='submit'>Cari</button>
</form></div>
</header>Last step: Place the jQuery Show Hide Script above the code </body>
<script type='text/javascript'>
$(document).ready(function(){$("#showsearch,#showkacatikus").click(function(){$("#showsearch,#search-blanter").toggleClass("aktif");});});
$(document).ready(function(){$("#showjalantikus").click(function(){$("#menu-wrapper").toggleClass("aktif");});});
$(document).ready(function(){$("#showmenu").click(function(){$("#jtheadermenu").toggleClass("shows");});});
</script>Save Template. ✅
DEMO
To change the logo, you can change it through Layout
This tutorial uses full code to be entirely similar to Jalan Tikus, there may be some code that already exists on your template, make sure there are no Javascript, CSS or HTML conflicts.
That's all the tutorials that I can share this time, wait for interesting tutorials and templates to be shared on this blog, so don't forget to bookmark the Blanter World website and Subscribe so you don't miss the latest updates from this blog. 😁.
Post a Comment