Membuat Sidebar Navigation Sajian 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 wacana menu navigation bar. Tapi pada sajian 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 dikala di scroll tidak akan ikut tergulung Sticky Fixed sajian ini akan melayang

Jangan khawatir akan menutupi bab postingan blog kalian alasannya ialah sajian ini dapat di buka tutup, Sudah ada Toggle Show Hide dan tentunya responsive

Buat kalian yang ingin melihat-lihat postingan sebelumnya wacana responsive sajian navigation kafe dropdown, dapat 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 wacana sajian kafe ini, kalian dapat mencarinya di kotak pencharian :)
Langsung saja kita menuju ke tutorial menciptakan Off-canvas Slide Push Menu with JavaScript and CSS

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

Sidebar Navigation without jQuery

• Langkah pertama, kalian login dulu ke akun blogger

• Selanjutnya masuk ke sajian Template → Edit HTML

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

• Lalu Copy CSS dibawah ini dan paste sempurna 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 arahan </body>

• Kalo sudah ketemu, masukan HTML dan Script Sidebar Menu Navigation dibawah ini sempurna 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://tutorialcarapintar.blogspot.com/"><i class="fa fa-inbox" aria-hidden="true"></i> Inbox</a></li>  <li><a href="https://tutorialcarapintar.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 arahan dibawah ini sempurna diatas arahan </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 wacana Awesome Bootstrap Sidebar Navigation Responsive ini supaya bermanfaat
Apabila ada yang galau / mau ditanyakan silahkan bertanya di kolom komentar :)