Membuat Sidebar Navigation Menu Dropdown Responsive

Responsive Sidebar Navigation with CSS and JavaScript

Tutorial Cara Membuat Simple Off-canvas Side Navigation With Pure JavaScript, kali ini mas tamvan akan share lagi postingan tentang menu navigation bar. Tapi pada menu ini letaknya bukan di atas header atau di bawahnya..

Side Menu Navigation ini kita akan letakan di samping kanan / kiri blog kita, dengan tampilan full height dan ketika di scroll tidak akan ikut tergulung Sticky Fixed menu ini akan melayang

Jangan khawatir akan menutupi bagian postingan blog kalian karena menu ini bisa di buka tutup, Sudah ada Toggle Show Hide dan tentunya responsive

Buat kalian yang ingin melihat-lihat postingan sebelumnya tentang responsive menu navigation bar dropdown, bisa lihat di link ini ↓

Tutorial Blogger Lainnya :

• Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS

• Manipulasi Klik Kanan Dengan Menampilkan Menu Navigation

• Mega Menu Navigation Bar Dropdown Plus Thumbnail

dan masih banyak lagi postingan tentang menu bar ini, kalian bisa mencarinya di kotak pencharian :)
Langsung saja kita menuju ke tutorial membuat Off-canvas Slide Push Menu with JavaScript and CSS

Kalo kalian ingin melihat penampakan dari menu ini, bisa kunjungi link Demo Tampilan Side Nav Drop Down Responsive

Sidebar Navigation without jQuery

• Langkah pertama, kalian login dulu ke akun blogger

• Selanjutnya masuk ke menu Template → Edit HTML

• Kalo sudah masuk Edit HTML, kalian cari kode </head>

• Lalu Copy CSS dibawah ini dan paste tepat di atasnya

<style type="text/css">
.showmenu{font-size:25px;cursor:pointer;position:fixed;z-index:999;top:5%;left:2%}
/*Main Nav*/
.sidenav{height:100%;width:100%;position:fixed;z-index:9999;top:0;left:0;background-color:#fafafa;overflow-x:hidden;transition:0.5s;max-width:250px;display:none}
/*Close Menu*/
.sidenav .closebtn{position:absolute;top:9px;left:0;padding:7px 0 0 10px;line-height:1}
.sidenav .closebtn a{color:white;font-size:25px;line-height:0}
/*From Search*/
#searching{position:absolute;top:0;right:5px;padding:8px 8px 0 0}
#searching form{margin:0;padding:0}
#searching form input{border:0;border-radius:3px;padding:5px 8px;width:60%;float:right;opacity:0.5}
#searching form input:focus{width:90%}
#searching form:after{content:"\f002";font-family:FontAwesome;position:absolute;right:8px;padding:5px;color:#44443380}
/*Author*/
.author-profile{width:100%;max-width:250px;position:relative}
.background img{width:100%;height:100%}
.author-avatar,.author-title{text-align:center;margin:0 auto;position:absolute}
.author-avatar{width:100%;height:70px;bottom:70px}
.author-avatar img{width:100%;max-width:70px;height:auto}
.author-title{bottom:40px;color:#fafafa;width:100%}
@media screen and (max-width:230px){#searching{right:0}#searching form:after{content:''}#searching form input{width:80%}.author-avatar{bottom:20px}.author-avatar img{max-width:50px}.author-title{bottom:15px}}
/*Main Menu*/
.sidenav ul.menu{margin:0;padding:0;font-size:15px}
@media screen and (max-width:250px){.sidenav ul.menu{font-size:12px}}
.sidenav ul.menu li i{padding-right:5px}
.sidenav ul.menu li a{padding:8px 8px 8px 15px;text-decoration:none;color:#716e6e;display:block;transition:0.3s;background:#fafafa}
/*Submenu*/
.sidenav ul.menu li ul.submenu{display:none;margin:0;padding:0}
.sidenav ul.menu li ul.submenu li a{background:#4d5151;color:#bbb;padding-left:35px}
.sidenav a:hover,.offcanvas a:focus{color:#f1f1f1}
/*Social Media*/
.sosmed{position:fixed;width:100%;text-align:center;padding:10px 0;background:white;font-size:25px;max-width:250px;bottom:0;left:0;border-top:2px solid #9c9999}
.sosmed span.facebook a{color:#3b5999}
.sosmed span.twitter a{color:#55acee}
.sosmed span.google a{color:#dd4b39}
.sosmed span.hidesosmed a{color:#de2fd6}
</style>

• Selanjutnya kalian cari kode </body>

• Kalo sudah ketemu, masukan HTML dan Script Sidebar Menu Navigation dibawah ini tepat diatasnya

<div id="MsTamvanSideNav" class="sidenav">
<div class="author-profile">
  <div class="background"><img src="http://i.imgur.com/BcXH1BB.jpg"/></div>
  <div class="author-avatar"><img src="http://i.imgur.com/jl2oRgY.png"/></div>
<span class="author-title">Teja Sukmana</span>
</div>
<div id="searching">
<form action="/search" method="get">
  <input name="q" placeholder="Cari artikel..." type="text" title="Search Content"/>
</form>
</div>
<span class="closebtn"><a href="javascript:void(0)" onclick="closeSideNav()" title="Close Menu">&#x2715;</a></span>
<ul class="menu">
 <li><a href="https://mastamvan.blogspot.com"><i class="fa fa-inbox" aria-hidden="true"></i> Inbox</a></li>
 <li><a href="https://mastamvan.blogspot.com"><i class="fa fa-paper-plane" aria-hidden="true"></i> Outbox</a></li>
 <li><a id="submenu-1" href="javascript:void(0)" onclick="showresponddiv(this.id)"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Submenu1</a>
 <ul id="opensubmenu-1" class="submenu" style="display: block;">
 <li><a href="#">Submenu1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>
 <li><a href="#"><i class="fa fa-camera" aria-hidden="true"></i> Camera</a></li>
 <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i> Picture</a></li>
 <li><a href="#"><i class="fa fa-video-camera" aria-hidden="true"></i> Video</a></li>
 <li><a id="submenu-2" href="javascript:void(0)" onclick="showresponddiv(this.id)"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Submenu2</a>
 <ul id="opensubmenu-2" class="submenu">
 <li><a href="#">Submenu1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>
 <li><a href="#"><i class="fa fa-bug" aria-hidden="true"></i> Bug</a></li>
</ul>
<div class="sosmed" id="hidesosmed">
 <span class="facebook"><a href="https://facebook.com/tejasukmana99" title="Facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></span>
 <span class="twitter"><a href="https://twitter.com/teja_7x" title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></span>
 <span class="google"><a href="#Google" title="Google"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></span>
 <span class="hidesosmed"><a href="javascript:void(0)" onclick="document.getElementById('hidesosmed').style.display='none';return false;" title="Close Social Media">&#x2715;</a></span>
</div>
</div>
<span class='showmenu' onclick="OpenSideNav()" title="Open Menu">&#9776;</span>

<script type="text/javascript">
//<![CDATA[
function OpenSideNav(){document.getElementById("MsTamvanSideNav").style.display="block"}function closeSideNav(){document.getElementById("MsTamvanSideNav").style.display="none"}function showresponddiv(e){var n=e.replace("submenu-","opensubmenu-"),t=document.getElementById(n);current&&current!=t&&(current.style.display="none"),"none"==t.style.display?(t.style.display="block",current=t):t.style.display="none"}var current=null;
//]]>
</script>

• Kalo Sudah Tinggal Save Dan Lihat Hasilnya
Untuk Pengaturan Nama Menu Dan Link mungkin kalian sudah paham / baca di sini Tutorial Cara Edit Menu Navigation Bar Di Blogger
Jika Iconya Tidak tampil, Kalian tambahkan kode dibawah ini tepat diatas kode </head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

Kalo kalian ingin mengganti iconnya, silahkan pilih iconnya di link Icon Font Awesome

• Selesai gan

Cukup sekian tutorial tentang Awesome Bootstrap Sidebar Navigation Responsive ini semoga bermanfaat
Apabila ada yang bingung / mau ditanyakan silahkan bertanya di kolom komentar :)