Cara Membuat Menu Navigasi Ala Template SimpleOn

Diposting pada

Cara Membuat Menu Navigasi Ala Template SimpleOn

Menu Navigasi Ala Template SimpleOn – Pada kesempatan kali ini saya ingin berbagi tutorial Cara Membuat Menu Navigasi Ala Template SimpleOn. Pernah kah sobat melihat template simpleon? Bila sobat pernah melihat nya tentu nya tau dong bagaimana bentuk Menu Navigasi di template tersebut.

Nah disini saya akan mencoba membagikan bagaimana Cara Membuat Menu Navigasi tersebut. Yang menurut saya sangat menu navigasi ini sangat simple dan enak untuk di lihat dan pasti nya responsive.

Mungkin langsung saja kita mulai tutorial kali ini yaitu Cara Membuat Menu Navigasi Ala Template SimpleOn. Silahkan sobat ikuti langkah – langkah sebagai berikut.

Menu Navigasi Ala Template SimpleOn

Silahkan sobat copy kode CSS dibawah ini, lalu letakan kode tersebut di bawah kode </style> pada template sobat.

<style type='text/css'>
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}
/* Header image and title CSS */
#header{padding:0;margin:4px auto 0;display:inline-block;position:relative;}
#header h1,#header h2,#header .description{font-family: 'Open Sans', sans-serif;line-height:1.1em;padding:0;margin:0 auto;font-weight:700}
#header h1,#header h2{color:#fff;text-transform:uppercase;font-size:210%;list-style:none;font-weight:700;letter-spacing:-2.5px;margin:5px auto 0}
#header .description{position:absolute;top:-99999px;left:-999999px;z-index:0;height:0;width:0}
#header h1 a,#header h2 a{font-weight:700;color:#fff;position:relative}
#header h1 a:after,#header h2 a:after{content:"";position:absolute;display:block;background:#fff;height:3px;width:0;bottom:0;left:0;transition: all 0.4s ease-in-out;}
#header h1 a:hover,#header h2 a:hover{color:#fff!important}
#header h1 a:hover:after,#header h2 a:hover:after{width:100%;}
#header img,#header-inner img{width:100%;max-width:240px;height:auto;margin:5px auto 0}
/* Header wrapper */
#header-wrapper{
width:100%;height:60px;background:#263238;background:linear-gradient(to right,#263238,#455A64,#607D8B);-webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 6px 0 rgba(0,0,0,.2);margin:0 auto;position:fixed;top:0;left:0;right:0;z-index:99999999;display:block;padding:0;word-wrap: break-word;-moz-box-sizing:border-box;box-sizing:border-box;}
.header-limit{margin:0 auto;width:100%;padding:0;max-width:1280px;position:relative;display:block}
#left-header{float:left;width:270px;display:block;padding:0 20px;-moz-box-sizing:border-box;box-sizing:border-box;}
#right-header{margin:0;padding:0;display:block;position:relative;float:right;width: calc(100% - 270px);}
/* Menu Header */
#menu-wrapper{margin:0 auto;position:relative;display:block;padding:0;word-wrap: break-word;-moz-box-sizing:border-box;box-sizing:border-box;float:right;width:670px}
#nav {}
.navi-header {font-family: 'Open Sans', sans-serif;list-style: none;margin:0;float:right}
.navi-header:before,.navi-header:after {content: " ";display: table;}
.navi-header:after {clear: both;}
.navi-header ul {list-style: none;margin:0 auto;width:12em}
.navi-header a {display:block;padding:0}
.navi-header li {position: relative;margin:0}
.navi-header > li {float: left;}
.navi-header > li > a,.navi-header li.iconcaps,.icon_src_btn .src_msg {font-family: 'Open Sans', sans-serif;display: block;height:60px;line-height:60px;color:#fff;font-weight:700;font-size:13.5px;padding:0 16px;position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out}
.navi-header > li > a:hover{background-color:#455A64;color:#fff}
.navi-header li ul{background:#fff!important;display:block;position:absolute;left:0;z-index:99999;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;box-shadow:0 0 4px rgba(0,0,0,0.1);height:0;overflow:hidden;margin:30px 0 0}
.navi-header li li ul {left:100%;}
.navi-header > li.hover > ul {visibility:visible;opacity:10;height:auto;margin:0}
.navi-header li li.hover ul {visibility:visible;opacity:10;height:auto;margin:0}
.navi-header li li a,#sosmedup ul li a.social_item {display: block;color:#333;font-size:13px;position: relative;z-index:100;border-top:1px solid #eee;line-height:1.2em;padding:13px 20px;text-transform:capitalize;overflow:hidden}
.navi-header li li a:hover,#sosmedup ul li a:hover.social_item {background:#ddd!important;border-color:#ccc}
.navi-header li li li a {background:#fff;z-index:20;color:#333;}
.navi-header li .parent:after {content: "f107";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;padding-left:6px;}
.navi-header li.iconcaps{color:#fff;background:#607D8B;cursor:pointer;}
.iconcaps .smallbutton{display:block}
.navi-header li.iconcaps i{padding-left:10px;font-size:13px}
.toggleMenu {font-family: 'Open Sans', sans-serif;display:none;padding:0;width:125px;text-align:center;height:60px;line-height:60px;color: #fff !important;background:#607D8B;font-size:14px;font-weight:700;position:absolute;top:0;right:0;font-weight:700;z-index:1}
.toggleMenu i{font-weight:400;cursor:pointer;margin:0 0 0 7px}
/* Social Footer */
#sosmedup{display:none;width:150px;position:absolute;right:0;top:60px;z-index:99;background:#fff;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;box-shadow:0 0 4px rgba(0,0,0,0.1);}
#sosmedup ul{margin:0 auto;padding:0;display:block;width:100%;list-style:none}
#sosmedup ul a{color:#333}
#sosmedup ul li{margin:0;padding:0}
#sosmedup ul li.social_btn{display:block;margin:0 auto;padding:0}
#sosmedup ul li a i{width:25px;text-align:left}
#sosmedup ul li a.s_fb i{color:#3F5B9B;}
#sosmedup ul li a.s_tw i{color:#1C97DE;}
#sosmedup ul li a.s_gp i{color:#c24538;}
#sosmedup ul li a.s_ig i{color:#8e605b;}
#sosmedup ul li a.s_yt i{color:#d12b19;}
#sosmedup ul li a.s_le i{color:#306eeb;}
 /* CSS Search Wrapper */
#hide_src_btn{display:none;width:30px;overflow:hidden;float:left}
#show_src_btn{float:left;width: calc(100% - 670px);overflow:hidden;height:60px}
.icon_src_btn{color:#CFD8DC;padding:0;height:60px;line-height:60px;}
.icon_src_btn i{cursor:pointer;font-size:20px}
.icon_src_btn .src_msg{display:inline;color:#fff}
#search-wrapper{background-color:#263238;margin:0 auto;padding:0;display:none;position:absolute;top:0;bottom:0;left:35px;right:0;z-index:100;height:60px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#searchform{color:#fff;width:100%;margin:0 auto;overflow:hidden;position:relative;display:block}
.search-button{clear:both;background:#607D8B;border:none;font-family: 'Open Sans', sans-serif;display: block;height:60px;line-height:60px;width:125px;text-align:center;color:#fff;font-weight:700;font-size:15px;padding:0;position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;cursor:pointer;position:absolute;top:0;right:0;font-weight:700}
.search-button i{font-weight:400;margin:0 0 0 10px}
.search-button:active{border:none;outline:none;padding:0;margin:0}
#search-form{background-color:#37474F;font-family:'Open Sans', sans-serif;width:100%;height:60px;line-height:60px;padding:0 125px 0 0;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:15px;color:#eee;overflow:hidden;}
#search-form:focus{border:none;outline:0;color:#eee}
#searchform:focus{border:none;outline:0;}
#searchform input[type=text]::-webkit-input-placeholder{color:#b9d0e0}
#searchform input[type=text]::-moz-placeholder{color:#b9d0e0}
#searchform input[type=text]:-ms-input-placeholder{color:#b9d0e0}
#searchform input[type=text]:-moz-placeholder{color:#b9d0e0}
/* Responsive */
@media screen and (max-width: 1024px) {
.limited_header{display:block;width:100%;overflow:hidden;height:10px;margin: 0 auto}
.icon_src_btn .src_msg{display:none}}
@media screen and (max-width:768px){
#left-header,#right-header,#show_src_btn,#menu-wrapper{width:100%;max-width:100%;float:none;display:block}
.limited_header{height:170px}
#left-header{padding:0 0 0 10px;position:absolute;top:0;left:0;}
#right-header{float:right;position:relative;}
#header{z-index:10}
#menu-wrapper{padding:60px 0 0}
#search-wrapper{left:0;z-index:100;padding:0 0 0 40px}
#hide_src_btn{position:absolute;top:3px;left:10px;z-index:999}
#show_src_btn{position:absolute;top:0;right:0;z-index:1;width:30px;margin:0 140px 0 0}
#show_src_btn .icon_src_btn{float:right}
.navi-header {float:none}
.navi-header ul {list-style: none;margin:0 auto;width:100%;}
.navi-header > li {float: none;display:block}
.navi-header > li a{background:#37474F;display:block;padding:13px 10px;border-top:1px solid #263238}
.navi-header > li:first-child a,.navi-header li li:first-child a{border:none!important}
.navi-header > li > a {height:auto;line-height:1.2em;}
.navi-header > li.hover > ul,.navi-header li li.hover ul {position:relative;background:#ddd!important;}
.navi-header li li a {background:#ddd;line-height:1.2em;padding:12px 20px;border-color:#ccc}
.navi-header li.iconcaps{height:50px;line-height:50px;padding:0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#sosmedup{background:#ddd;width:100%;position:relative;right:auto;left:auto;top:auto}
#sosmedup ul li a{border-color:#ccc!important}}
@media screen and (max-width:736px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:734px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:684px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:667px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:600px){
#header .description{font-size:15px;font-weight:400}
#hide span.srcbutton{right:30px}
#search input[type=search]{font-size:55px;padding:20px 10px}
.recent-posts-title h2 span,.recent-posts-title h3 span{font-size:24px}}
@media screen and (max-width:480px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}
#header h1,#header h2{font-size:190%}
.toggleMenu,.search-button{width:60px;}
.toggleMenu span,.search-button span{display:none}
#show_src_btn,#search-form{margin:0 75px 0 0}
.search-button i,.toggleMenu i,.search-button{margin:0 auto;font-size:16px!important}
#search{margin:25% auto 0}
#search input[type=search]{font-size:32px}}
@media screen and (max-width:414px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:412px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:385px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}
#header img,#header-inner img{margin:7px auto 0;max-width:200px;}}
@media screen and (max-width:375px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}}
@media screen and (max-width:320px){
.limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}
#header h1,#header h2{font-size:185%}
#header img,#header-inner img{margin:9px auto 0;padding:0;width:180px}}
</style>

Selanjut nya silahkan sobat copy kode HTML Dibawah ini, lalu letakan kode tersebut di bawah kode <body> atau gantikan kode HTML Menu Navigasi yang ada di template sobat dengan kode dibawah ini.

<div class='header-wrapper' id='header-wrapper'>
<div class='header-limit' id='header-limit'>
<div id='left-header'>
<header itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='false' title='COP4S BERITA (Header)' type='Header' version='1'>
      <b:widget-settings>
        <b:widget-setting name='displayUrl'>https://2.bp.blogspot.com/-pL6jDZaqcq4/W1dSQz95WwI/AAAAAAAABYk/InE5uqLLUmkmBEW5HaZrydC5sF-rBL6EwCK4BGAYYCw/s865/20180724_232126.png</b:widget-setting>
        <b:widget-setting name='displayHeight'>62</b:widget-setting>
        <b:widget-setting name='sectionWidth'>790</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'>344</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<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:if cond='data:blog.pageType != "item"'> <b:include name='title'/> <b:else/> <data:blog.pageName/> </b:if></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:if cond='data:blog.pageType != "item"'> <b:include name='title'/> <b:else/> <data:blog.pageName/> </b:if></h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 style='display:none'><data:blog.pageTitle/></h1>
</b:if>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType == "index"'>
<h1 class='title' itemprop='headline name'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h1>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<h1 class='title' itemprop='headline name'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h1>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<h2 class='title' itemprop='name headline'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h2>
<b:else/>
<h2 class='title' itemprop='name headline'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h2>
</b:if>
</b:if>
</b:if>
</div>
<b:include name='description'/>
</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' itemprop='name'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' itemprop='url'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</header>
<div class='clear'/>
</div>

<div class='right-header' id='right-header'>
<div id='show_src_btn'><span class='icon_src_btn' href='javascript:void(0)' onclick='document.getElementById('search-wrapper').style.display='block';document.getElementById('hide_src_btn').style.display='block';document.getElementById('show_src_btn').style.display='none''><i aria-hidden='true' class='fa fa-search'/><span class='src_msg'>Search here and hit enter....</span></span></div>
<div id='hide_src_btn'><span class='icon_src_btn' href='javascript:void(0)' onclick='document.getElementById('search-wrapper').style.display='none';document.getElementById('hide_src_btn').style.display='none';document.getElementById('show_src_btn').style.display='block''><i aria-hidden='true' class='fa fa-reply-all'/></span></div>
<div id='search-wrapper'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='searchform' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://cop4sberita.blogspot.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' itemprop='query-input' name='q' placeholder='Cari artikel....' required='required' type='text'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form></div>
</div>
<div id='menu-wrapper'>
<nav id='nav' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='toggleMenu' href='#'><span>Menu</span><i aria-hidden='true' class='fa fa-align-justify'/></a>
<!-- secondary navigation menu start -->
<ul class='nav navi-header'>
<li><a class='downcaps' href='#' itemprop='url'><span itemprop='name'><i aria-hidden='true' class='fa fa-user-secret'> ME</i></span></a>
<ul>
<li><a href='/p/about.html' itemprop='url' title=''><span itemprop='name'>About</span></a></li>
<li><a href='/p/contact.html' itemprop='url' title=''><span itemprop='name'>Contact</span></a></li>
<li><a href='/p/privacy-policy.html' itemprop='url' title=''><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='/p/disclaimer.html' itemprop='url' title=''><span itemprop='name'>Desclaimer</span></a></li>
<li><a href='/p/tos.html' itemprop='url' title=''><span itemprop='name'>TOS</span></a></li>
<li><a href='/p/sitemap.html' itemprop='url' title=''><span itemprop='name'>Sitemap</span></a></li>
</ul>
</li>
<li><a class='downcaps' href='#' itemprop='url'><span itemprop='name'><i aria-hidden='true' class='fa fa-tags'> KATEGORI</i></span></a>
<ul>
<li><a href='https://cop4sberita.blogspot.com/search/label/TIPS%20BLOGGER?max-results=10' itemprop='url' title=''><span itemprop='name'>TIPS BLOGGER</span></a></li>
<li><a href='https://cop4sberita.blogspot.com/search/label/HTML?max-results=10' itemprop='url' title=''><span itemprop='name'>HTML</span></a></li>
<li><a href='https://cop4sberita.blogspot.com/search/label/ADSENSE?max-results=10' itemprop='url' title=''><span itemprop='name'>ADSENSE</span></a></li>
<li><a href='https://cop4sberita.blogspot.com/search/label/WIDGET?max-results=10' itemprop='url' title=''><span itemprop='name'>WIDGET</span></a></li>
<li><a href='https://cop4sberita.blogspot.com/search/label/SEO?max-results=10' itemprop='url' title=''><span itemprop='name'>SEO</span></a></li>
</ul>
</li>
<li><a href='https://cop4sberita.blogspot.com/search/label/INTERNET%20GRATIS?max-results=10' itemprop='url' rel='nofollow' title=''><span itemprop='name'><i aria-hidden='true' class='fa fa-internet-explorer'> INTERNET GRATIS</i></span></a></li>
<li><a href='https://cop4sberita.blogspot.com/search/label/Template?max-results=10' itemprop='url' rel='nofollow' title=''><span itemprop='name'><i aria-hidden='true' class='fa fa-download'> TEMPLATE</i></span></a></li>
<li class='iconcaps' id='iconcaps'>
<div id='show'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById('sosmedup').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none''><i aria-hidden='true' class='fa fa-cogs'/> TOOLS</span></div>
<div id='hide'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById('sosmedup').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block''><i aria-hidden='true' class='fa fa-cogs'/> TOOLS</span></div>
</li>
</ul></nav>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/Person'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<div id='sosmedup'>
<ul>
<li class='social_btn'><a class='social_item s_fb' href='https://cop4sberita.blogspot.com/p/ads-converter.html' itemprop='sameAs' rel='nofollow' target='_blank' title='Ads Converter'><i aria-hidden='true' class='fa fa-circle-o'/> Ads Converter</a></li>
<li class='social_btn'><a class='social_item s_gp' href='https://cop4sberita.blogspot.com/p/material-design-color-palette.html' itemprop='sameAs' rel='nofollow' target='_blank' title='Color Palette'><i aria-hidden='true' class='fa fa-circle-o'/> Color Palette</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='limited_header'/>

Langkah selanjut nya silahkan sobat copy kode dibawah ini, lalu letakan kode tersebut di atas kode </body>

<script type=’text/javascript’>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(“.nav li a”).each(function(){if($(this).next().length>0){$(this).addClass(“parent”)}});$(“.toggleMenu”).click(function(e){e.preventDefault();$(this).toggleClass(“active”);$(“.nav”).toggle()});adjustMenu()});$(window).bind(“resize orientationchange”,function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(“.toggleMenu”).css(“display”,”inline-block”);if(!$(“.toggleMenu”).hasClass(“active”)){$(“.nav”).hide()}else{$(“.nav”).show()}$(“.nav li”).unbind(“mouseenter mouseleave”);$(“.nav li a.parent”).unbind(“click”).bind(“click”,function(e){e.preventDefault();$(this).parent(“li”).toggleClass(“hover”)})}else if(ww>=768){$(“.toggleMenu”).css(“display”,”none”);$(“.nav”).show();$(“.nav li”).removeClass(“hover”);$(“.nav li a”).unbind(“click”);$(“.nav li”).unbind(“mouseenter mouseleave”).bind(“mouseenter mouseleave”,function(){$(this).toggleClass(“hover”)})}}
//]]>
</script>

Lalu Save template sobat dan cek lihat terlebih dahulu hasil nya.

Bila hasil nya berantakan yang harus sobat lakukan yaitu, menghapus kode style CSS Menu Navigasi, Header dan CSS search yang sebelum nya ada di template sobat, agar tidak terjadi bentrok dengan CSS Menu Navigasi yang baru ini.

Kemungkinan Menu Navigasi Ala Template SimpleOn ini bisa di terapkan di semua template, mungkin agak sedikit di atur lagi ukuran nya agar bisa sesuai dengan template masing – masing.

Bila sobat menggunakan template bikinan arlinadzgn mungkin akan mudah untuk di terapkan, karena saya sendiri pun menggunakan kerangka dari template nya arlinadzgn untuk memasang Menu Navigasi ini.

Untuk contoh nya sobat bisa lihat pada Menu Navigasi yang ada di blog ini (kalau belum berubah). Tampilan nya pun sama persis seperti gambar di atas. Bila menu navigasi ini sudah sukses di terapkan di template sobat, silahkan sobat tinggal edit lagi dari bagian menu navigasi tersebut yang ada nama domain blog ini.

Note: Wajib backup terlebih dahulu template sobat sebelum melakukan tutorial ini.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Menu Navigasi Ala Template SimpleOn. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *