logo blog

Membuat Sidebar Navigation Menu Dropdown Responsive

Membuat Sidebar Navigation Menu Dropdown Responsive

responsive sidebar navigation menu

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 ↓

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 TemplateEdit 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 :)


Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Sidebar Navigation Menu Dropdown Responsive. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Sidebar Navigation Menu Dropdown Responsive. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

2 comments

APKPremium0

kalo mau di pindah posisinya ke sebelah kanan gmn mas???

Mas Tamvan

Agan cari kode css di bawah ini, lalu rubah tulisan left Jadi right


.showmenu

.sidenav

.sosmed


Ada 3 Class, Silahkan Cari Satu-satu.

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon