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 sajian navigation kafetaria. 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 hidangan 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 wacana responsive sajian navigation bar dropdown, bisa lihat di link ini ↓

Tutorial Blogger Lainnya :

dan masih banyak lagi postingan tentang menu bar ini, kalian bisa 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 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"> .showmenufont-size:25px;cursor:pointer;position:fixed;z-index:999;top:5%;left:2% /*Main Nav*/ .sidenavheight: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 .closebtnposition:absolute;top:9px;left:0;padding:7px 0 0 10px;line-height:1 .sidenav .closebtn acolor:white;font-size:25px;line-height:0 /*From Search*/ #searchingposition:absolute;top:0;right:5px;padding:8px 8px 0 0 #searching formmargin:0;padding:0 #searching form inputborder:0;border-radius:3px;padding:5px 8px;width:60%;float:right;opacity:0.5 #searching form input:focuswidth:90% #searching form:aftercontent:"\f002";font-family:FontAwesome;position:absolute;right:8px;padding:5px;color:#44443380 /*Author*/ .author-profilewidth:100%;max-width:250px;position:relative .background imgwidth:100%;height:100% .author-avatar,.author-titletext-align:center;margin:0 auto;position:absolute .author-avatarwidth:100%;height:70px;bottom:70px .author-avatar imgwidth:100%;max-width:70px;height:auto .author-titlebottom:40px;color:#fafafa;width:100% @media screen and (max-width:230px)#searchingright:0#searching form:aftercontent:''#searching form inputwidth:80%.author-avatarbottom:20px.author-avatar imgmax-width:50px.author-titlebottom:15px /*Main Menu*/ .sidenav ul.hidanganmargin:0;padding:0;font-size:15px @media screen and (max-width:250px).sidenav ul.sajianfont-size:12px .sidenav ul.sajian li ipadding-right:5px .sidenav ul.menu li apadding:8px 8px 8px 15px;text-decoration:none;color:#716e6e;display:block;transition:0.3s;background:#fafafa /*Submenu*/ .sidenav ul.sajian li ul.submenudisplay:none;margin:0;padding:0 .sidenav ul.menu li ul.submenu li abackground:#4d5151;color:#bbb;padding-left:35px .sidenav a:hover,.offcanvas a:focuscolor:#f1f1f1 /*Social Media*/ .sosmedposition: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 acolor:#3b5999 .sosmed span.twitter acolor:#55acee .sosmed span.google acolor:#dd4b39 .sosmed span.hidesosmed acolor:#de2fd6 </style>

Selanjutnya kalian cari kode </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="sajian">  <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 perihal Awesome Bootstrap Sidebar Navigation Responsive ini semoga bermanfaat
Apabila ada yang resah / mau ditanyakan silahkan bertanya di kolom komentar :)

Prabu Jagat Pandito

Search This Blog