Membuat Sidebar Menu Responsive Sticky Fixed Dilengkapi Toggle Show Hide

Dari judulnya yang sok english, teman-teman blogger pasti sudah tau arah dan tujuan dari postinganku kali ini. Ya, Tips membuat Menu Blog yang ditempatkan di sisi halaman blog dengan tampilan yang responsive dan menjadi tetap pada titik tertentu alias tidak bergerak saat halaman discroll.

Dengan tampilan full height di sisi kiri atau kanan blog, tentunya dipikiran kita langsung terbayang fitur "Modal Popup" yang biasanya sangat mengganggu atau menutupi bagian postingan halaman blog. Jangan khawatir, menu ini tidak akan menutupi halaman blog karena dilengkapi dengan Toggle Show Hide yang responsive.

Sidebar menu ini sudah yang paling komplit menurutku, alasannya karena :

1. Tampilan menu blog memiliki background yang dapat dimodifikasi sesuai keinginan. Custom Background dan custom foto Profil.
2. Dapat menampung highlight menu yang banyak dan didukung Font Awesome Icons;
3. Ready menu dropdown untuk penggunaan sub menu dari menu utamanya;
4. Tampilan full height yang dapat disesuaikan dengan tampilan antarmuka blog;
5. Tampilan sticky, menempel pada posisi yang kita kehendaki, yang dapat diletakkan disisi kiri atau kanan blog
6. Tampilan fixed, tetap berada di posisi yang sama saat menggulir halaman;
7. Ready toggle Show Hide, memungkinkan kita dapat menutup dan membuka menu blog sesuai kebutuhan;
8. Dilengkapi tombol search;
9. Dilengkapi link media sosial facebook, twitter dan youtube yang bisa show hide;

Komplit dan keren ya? yang masih bingung seperti apa penampakan dari menu keren ini, silakan klik tombol Demo berikut:




Membuatnya cukup mudah, hanya membutuhkan CSS dan HTML dengan script yang simple, dengan langkah-langkah sebagai berikut:

1. Login ke akun blogger;
2. Masuk ke menu Template >> Edit HTML, Jangan lupa lakukan back up template terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan;
3. Cari kode </head>;
4. Lalu Copy CSS dibawah ini dan paste tepat di atas kode </head>;
   
   

   /* CSS of ifNavbar */
   <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.youtube a{color:#dd4b39}
   .sosmed span.hidesosmed a{color:#de2fd6}
   </style>
   

   
   
5. Selanjutnya cari kode </body>;
6. Paste kode HTML dan Script berikut tepat diatas kode </body>;
   
   

   
   <div id="ifSideNav" class="sidenav">
   <div class="author-profile">
     <div class="background"><img src="#URL-BACKGROUND"/></div>
     <div class="author-avatar"><img src="#URL-FOTO-PROFIL"/></div>
   <span class="author-title">Nama Blog</span>
   </div>
   <div id="searching">
   <form action="/search" method="get">
     <input name="q" placeholder="Cari Info..." 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="#LINK"><i class="fa fa-home" aria-hidden="true"></i> Beranda</a></li>
         <li><a href="#LINK"><i class="fa fa-user" aria-hidden="true"></i> About</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> Sub Menu</a>
           <ul id="opensubmenu-1" class="submenu" style="display: block;">
             <li><a href="#LINK">Submenu1</a></li>
             <li><a href="#LINK">Submenu2</a></li>
             <li><a href="#LINK">Submenu3</a></li>
           </ul>
         </li>
         <li><a href="#LINK"><i class="fa fa-list" aria-hidden="true"></i> Artikel</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> Sub Menu 2</a>
           <ul id="opensubmenu-2" class="submenu">
             <li><a href="#LINK">Submenu1</a></li>
             <li><a href="#LINK">Submenu2</a></li>
             <li><a href="#LINK">Submenu3</a></li>
           </ul>
         </li>
         <li><a href="#LINK"><i class="fa fa-phone" aria-hidden="true"></i> Kontak</a></li>
       </ul>
   <div class="sosmed" id="hidesosmed">
    <span class="facebook"><a href="#LINK-FACEBOOK" title="Facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></span>
    <span class="twitter"><a href="#LINK-TWITTER" title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></span>
    <span class="youtube"><a href="#LINK-YOUTUBE" title="Youtube"><i class="fa fa-youtube-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("ifSideNav").style.display="block"}function closeSideNav(){document.getElementById("ifSideNav").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>
   



7. Simpan template dan lihat hasilnya.

Catatan :

• Untuk Pengaturan Nama Menu Dan Link silakan sesuaikan kode yang bertanda: #URL-BACKGROUND, #URL-FOTO-PROFIL, #LINK, dll sesuai keinginan;
• Jika Icon tidak tampil, maka 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"/>
  



• Jika ingin mengganti icon, silahkan pilih icon di laman Icon Font Awesome;
• Selesai.

Semoga bermanfaat.