==Iklan Dipate Disini===
Menu slide ini hanya akan tampil pada versi mobile saja, memasang menu slide ini sangat cocok buat kalian yang mengutamakan mobile friendly karena dengan memasang menu slide ini pada blog kalian itu bisa menjadikan nilai lebih buat blog kalian dan terlihat lebih profesional, dan yang paling penting bisa mempermudah pengunjung untuk mencari informasi yang terdapat di blog kalian. Cara memasangnya pun cukup mudah, jika kalian mau memasang menu slide ini kalian bisa ikuti caranya di bawah ini.
Cara Membuat Menu Slide Navigasi Di Template Viomagz
2. Pilih Tema dan pilih Edit HTML.
3. Cari kode <nav id='cssmenu'> jika sudah ketemu hapus kode tersebut hingga berahrian </nav> dan ganti dengan kode di bawah ini.
<!-- menu navigasi header start -->
<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='https://www.lapakinfo.net/'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ'/>
</svg>Beranda</a></li>
<li><a href='https://www.lapakinfo.net/search/label/Blogger' itemprop='url'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>Blogger</a></li>
<li><a href='https://www.lapakinfo.net/search/label/Adsense'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z'/>
</svg>Adsense</a></li>
<li><a href='https://www.lapakinfo.net/p/contact-us.html'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19C21,20.11 20.1,21 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94ZZ'/>
</svg>Guest Post</a></li>
<li><a href='https://www.lapakinfo.net/search/label/Template'><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</a></li>
</ul>
<!-- menu navigasi header end -->
</nav>
4. Lanjut cari kode .mline1, .mline2, .mline3 { hapus semua kode CSS tersebut lalu ganti dengan kode di bawah ini.
.mline1, .mline2, .mline3 {
position: absolute;
left: 0;
display: block;
height: 2px;
width: 18px;
background: #ffffff;
content: '';
transition: all 0.2s;
}
.mline1 {
top: 1px;
}
.mline2 {
top: 7px;
}
.mline3 {
top: 13px;
}
.button.menu-opened .mline1 {
background: #ffffff;
top: 3px;
border: 0;
width: 13px;
-webkit-transform: rotate(-45deg);
-o-transform: rotate(45deg);
-o-transform: rotate(-45deg);
-o-transform: rotate(45deg);
transform: rotate(-45deg);
}
.button.menu-opened .mline2 {
top: 7px;
left: 2px;
width: 19px;
}
.button.menu-opened .mline3 {
top: 11px;
height: 2px;
width: 13px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: "\f0d7";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin: 0 20px;
color: #555555;
line-height: 42px;
}
#cssmenu .submenu-opened::after {
content: "\f0d8";
}
#cssmenu ul ul .submenu-button::after {
line-height: 36px;
}
#cssmenu ul ul ul li.active a{
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
border-top: none
}
}5. Simpan template kalian dan selesai.
Bagaimana sangat mudah bukan untuk membuat menu slide yang responsive ini, nah untuk hasilnya kalian bisa menekan tombol demo yang ada di atas ( Gunakan mobile anda ). Jika ada pertanyaan silahkan bertanya di kolom komentar di bawah ini. Terimaksih sudah berkunjung.
==Iklan Dipate Disini===