Cara membuat Navigasi Side Menu Mobile ala Igniel - Susah Tidur

Cara membuat Navigasi Side Menu Mobile ala Igniel

Apa itu Menu Navigasi?

Menu Navigasi adalah petunjuk posisi dan arah perjalanan. Menu Navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya.

Nah pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang Cara membuat Navigasi Side Menu Mobile ala Igniel.  Kamu belum  sih tahu? tidak hanya mas Sugeng, Arlina, Kompi nama dia  sudah cukup familiar ditelinga para blogger Indonesia lho. Dia pendiri situs Igniel.com, disitusnya yang berisi tutorial blogger dan seputar blogger lainnya. 

Dia juga mahir dalam Web Design, beberapa template yang keren sudah berhasil dia ciptakan. Antara lain  template premium yang lagi banyak digandrungi para blogger yaitu Igniplex. Tidak jarang juga banyak dari mereka yang menginginkan template utama Igniel.com tersebut, tapi sayangnya tidak dijual.

Mulai dari smooth, fast loading, dan mobile friendly dan yang paling unik itu lho Navigasi Menu Mobile nya banyak orang yang menginginkan tuturial tersebut tetapi mbak Igniel tak kunjung kasih tutorial tersebut. Tenang dengan adanya tutorial ini sobat bisa mencobanya sendiri, saya juga suka dengan navigasi ala mbak Igniel ini hihi.

Cara membuat Navigasi Side Menu Mobile

0. Silahkan buka dashboard blogger sobat, masuk tab menu Tema >  Cadangkan/Pulihkan dulu Template sobat > Edit HTML

1. Silahkan cari CSS dibawah ini
.mline1, .mline2, .mline3 {
 position: absolute;
 left: 0;
 display: block;
 height: 3px;
 width: 22px;
 background: $(search.icon.color);
 content:'';
 border-radius: 5px;
 transition: all 0.2s;
}
.mline1 {
 top: 0;
}
.mline2 {
 top: 7px;
}
.mline3 {
 top: 14px;
}
.button.menu-opened .mline1 {
 top: 8px;
 border: 0;
 height: 3px;
 width: 22px;
 background: $(navmenu.font.color);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg)
}
.button.menu-opened .mline2 {
 top: 8px;
 background: $(navmenu.font.color);
 width: 22px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg)
}
.button.menu-opened .mline3 {
        display: none;
        height:0;
    }
kemudian ganti CSS diatas dengan CSS dibawah ini.
.mline1, .mline2, .mline3 {
position: absolute;
left: 0;
display: block;
height: 3px;
width: 22px;
background: $(search.icon.color);
content:'';
border-radius: 5px;
transition: all 0.2s;
display: none;
}
.mline1 {
top: 0;
}
.mline2 {
top: 7px;
}
.mline3 {
top: 14px;
}
.button.menu-opened .mline1 {
top: 8px;
border: 0;
height: 3px;
width: 22px;
background: $(search.icon.color);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.button.menu-opened .mline2 {
top: 8px;
background: $(search.icon.color);
width: 22px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button.menu-opened .mline3 {
display: none;
height:0;}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
cursor: pointer;
}
2. Tambahkan CSS berikut ini tepat diatas ]]></b:skin>
/* NAVIGASI Side Menu by Susah Tidur */
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:48px;background:rgba(0,0,0,0.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all .4s ease-in-out}.darkshadow.open{visibility:visible;opacity:1}
#nav-wrapper{
font-size:13px;
width:265px;
position:fixed;
z-index:5;
top:48px;
overflow:hidden;
left:0;
background:#fff;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s;
bottom:0;
padding-top:15px;
-webkit-transform:translateX(-290px);
-ms-transform:translateX(-290px);
transform:translateX(-290px);
transition: all .5s ease;
}
#nav-wrapper:hover{overflow-y:auto}
#nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
#nav-wrapper.close{display:none}
#nav-wrapper ul{margin:0;padding:0;list-style:none}
#nav-wrapper li{display:block;list-style:none;position:relative}
#nav-wrapper li.first{background:#d0d0d0;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition: all .5s ease;display: none;}
#nav-wrapper>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:12px 0 13px 15px;color:#333333;font-size:13px}#nav-wrapper li a.nav-submenu{padding:10px 15px;padding-bottom:12px;}#nav-wrapper li ul.nav-sub{display:none}#nav-wrapper li li a{display:block;position:relative;padding-left:4em;line-height:40px;color: #657786;}#nav-wrapper a:hover{color:#008080;}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}
#nav-wrapper li.open svg.down{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg)
}
#nav-wrapper svg{height:20px;width:20px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#nav-wrapper>ul>li:not(.colormode)>a>span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1}#nav-wrapper>ul>li>a>span>span.new{background:#e1f5fe;color:#004c88;line-height:normal;margin-left:10px;font-size:8px;padding:3px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}
@media only screen and (max-width:480px){
#nav-wrapper .profile img {
width: 24px;
height: 24px;
margin-right: 15px;
margin-left: 1px;
border-radius: 20px;
}
}
@media screen and (max-width: 600px) {
#nav-wrapper .subs {
display: flex;
margin-left: 24px;
margin-top: 10px;
}
#nav-wrapper .subs a {
font-size: 11px;
margin-right: 10px;
width: auto;
height: auto;
padding: 7px 10px;
margin-top: 0;
background-color: #a1362a;
color: #fff;
border-radius: 20px;
}
#nav-wrapper .subs svg {
width: 12px;
height: 12px;
margin-right: 3px;
margin-top: -1px;
}
#nav-wrapper .subs button {
flex-grow: 1;
margin-top: 0;
width: auto;
height: auto;
padding: 7px 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: #657786;
border-radius: 20px;
border: none;
margin-right: 23px;
color: #fff;
outline: none;
}
#nav-wrapper li.footer a {
font-size: 11px;
font-weight: 400;
color: #657786;
display: inline-block;
padding:0;
}
#nav-wrapper .footer {
display: block;
margin-top: 14px;
margin-left: 24px;
}
#nav-wrapper .footer .social {
display: flex;
margin: 7px 0;
}
#nav-wrapper .footer .credit {
display: block;
color: #657786;
}
#nav-wrapper .footer .developer {
color: #657786;
}
}
@media screen and (max-width: 800px) {
#nav-wrapper .subs {
display: flex;
margin-left: 15px;
margin-top: 10px;
}
#nav-wrapper .subs a {
font-size: 11px;
margin-right: 10px;
width: auto;
height: auto;
padding: 7px 10px;
margin-top: 0;
background-color: #a1362a;
color: #fff;
border-radius: 20px;
}
#nav-wrapper .subs svg {
width: 12px;
height: 12px;
margin-right: 3px;
margin-top: -1px;
}
#nav-wrapper .subs button {
flex-grow: 1;
margin-top: 0;
width: auto;
height: auto;
padding: 7px 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: #657786;
border-radius: 20px;
border: none;
margin-right: 23px;
color: #fff;
outline: none;
}
#nav-wrapper li.footer a {
font-size: 11px;
font-weight: 400;
color: #657786;
display: inline-block;
padding:0;
}
#nav-wrapper .footer {
display: block;
margin-top: 14px;
margin-left: 15px;
}
#nav-wrapper .footer .social {
display: flex;
margin: 7px 0;
}
#nav-wrapper .footer .credit {
display: block;
color: #657786;
}
#nav-wrapper .footer .developer {
color: #657786;
}
}
.kotak9 {
  fill: #fff;
  margin-top: -4px;
  display:none
}

@media screen and (max-width: 800px) {
  .kotak9 {
  fill: #fff;
  margin-top: -4px;
  display: block;
}
} 
3. Cari kode dibawah ini
<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</div>

<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
 <li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

</nav>
Kemudian ganti kode diatas dengan kode dibawah ini.
<div class='darkshadow'/>
<nav id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'><a href='https://susahtidur-zzz.blogspot.com/'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/>
</svg>Beranda</span></a></li>
<li><a class='nav-submenu' href='javascript:;' title='Bahasa Program'><span><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z'>
</path>
</svg>Topik<span class='new'>News</span></span><svg class='down' height='24' viewBox='0 0 24 24' width='24'>
<path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5ZZ'/>
</svg></a>
<ul class='nav-sub'>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ'/>
</svg>Template</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/>
</svg>Kontak</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z'/>
</svg>Tentang</span></a></li>
<li class='subs'>
<a href='https://www.blogger.com/follow-blog.g?blogID=6561990962765498778' rel='nofollow noopener' target='_blank' title='Ikuti Blog'><svg viewBox='0 0 24 24'><path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/></svg><span>FOLLOW</span></a>
</li>
<li class='footer'>
<a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a> - <a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a> - <a href='#' itemprop='url' title='Privacy Policy'><span itemprop='name'>Privacy</span></a>
<span class='social'>
<a class='facebook2' href='https://www.facebook.com/' rel='nofollow noopener' target='_blank' title='Facebook'>
<svg viewBox='0 0 24 24'><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/></svg>
</a>
<a class='instagram' href='https://www.instagram.com/' rel='nofollow noopener' target='_blank' title='Instagram'>
<svg viewBox='0 0 24 24'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/>
</svg>
</a>
<a class='codepen' href='https://codepen.io/' rel='nofollow noopener' target='_blank' title='Codepen'><svg viewBox='0 0 24 24'>
<path d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z'/>
</svg>
</a>
</span>
<span class='credit'>Copyright &#169; 2020</span>
<span class='developer'>Theme by <cite><b><data:blog.title/></b></cite></span>
</li>
</ul>
</nav>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
<svg class='kotak9' viewBox='0 0 24 24'><path d='M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z'/></svg>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/></a></div>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

<!-- menu navigasi header start -->
<ul>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
<!-- menu navigasi header end -->
</nav>
4. Tambahkan Script ini tepat di atas </body>

<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('w f=["\\i\\l\\h\\j","\\q\\i\\s\\s\\n\\h\\F\\n\\g\\o\\o","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k\\G\\L\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\H\\n\\x\\H\\A","\\v\\B\\h\\j\\y\\u\\q\\i\\s\\s\\n\\h","\\k\\h\\B\\i\\t\\h\\F\\n\\g\\o\\o","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k\\G\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\h\\n","\\B\\y\\n\\q\\x\\l\\n\\h","\\v\\j\\g\\t\\u\\o\\y\\I\\B\\h\\j\\y","\\M\\x\\j\\m","\\m\\k\\i\\l\\m\\i\\r\\j","\\i\\j","\\l\\k\\i\\q\\i\\q\\J\\l\\h","\\m\\g\\q\\g","\\j\\h\\N\\q","\\o\\n\\x\\m\\h\\O\\i\\s\\s\\n\\h","\\l\\g\\k\\h\\j\\q","\\o\\n\\x\\m\\h\\P\\l","\\j\\i\\q","\\v\\j\\g\\t\\u\\o\\y\\I","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k","\\k\\h\\g\\m\\J"];$(Q)[f[R]](z(){$(f[4])[f[3]](z(){$(f[2])[f[1]](f[0])});$(f[7])[f[3]](z(){$(f[6])[f[5]](f[0])});w d=z(a,b){p[f[8]]=a||{};p[f[9]]=b||K;w c=p[f[8]][f[11]](f[10]);c[f[13]](f[3],{S:p[f[8]],T:p[f[9]]},p[f[12]])};d[f[14]][f[12]]=z(a){w b=a[f[15]][f[8]];$p=$(p),$E=$p[f[16]]();$E[f[17]]();$p[f[18]]()[f[1]](f[0]);U(!a[f[15]][f[9]]){b[f[11]](f[V])[f[W]]($E)[f[X]]()[f[18]]()[f[5]](f[0])}};w e=Y d($(f[Z]),K)})',62,71,'|||||||||||||||_0x8991|x61|x65|x6F|x6E|x72|x70|x64|x6C|x73|this|x74|x77|x67|x76|x2D|x2E|var|x69|x75|function|x6B|x6D|x23|x68|next|x43|x2C|x63|x62|x79|false|x20|x66|x78|x54|x55|document|23|el|multiple|if|21|20|19|new|22|||||||||'.split('|'),0,{}))
//]]></script>

<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=Nunito:400,500,600,700&display=swap");loadCSS("https://fonts.googleapis.com/css?family=Quicksand:700,500,300&display=swap");loadCSS("https://fonts.googleapis.com/css?family=Poppins&display=swap");loadCSS("https://fonts.googleapis.com/css?family=Raleway&display=swap");loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css");
//]]>
</script>
5. Kemudian  Save 

Cara ini sudah saya terapkan di Template VioMagz 100% berhasil. Jika ada yang mengalami kesulitan silahkan bertanya di kolom komentar
Sudah dulu tutorial tentang Cara Membuat Navigasi Side Menu Mobile ala Igniel. Sekian dan terimakasih.



"Cara membuat Navigasi Side Menu Mobile ala Igniel "
Tampilkan Komentar
Sembunyikan Komentar

5 Komentar untuk "Cara membuat Navigasi Side Menu Mobile ala Igniel "

  1. b;skin maksidnya gimana mas ?

    BalasHapus
    Balasan
    1. maaf baru bls mas, b:skin itu sebuah kode pembukus kode CSS mas. Jadi cari kode tersebut

      Hapus
  2. Gan cara bikin darkmode di navigasinya gimana, sama ubah warna nama komentar pas darkmode

    BalasHapus
    Balasan
    1. tinggal pindah kode pemanggil mode dark nya di dalam navigasinya mas, tapi untuk navigasi ala igniel ini nanti ada 2 tampilan mas

      1. Mobile
      2. Destop

      nah nanti kode pemanggil mode dark nya masukin kedalam 2 tersebut

      Hapus
    2. untuk nama komentar itu dari link, jadi warna link saya biru, jadi ya ngikut nantinya mas

      Hapus

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel