Cara Membuat Sliding Menu Dengan CSS dan HTML

rudypratama.com - Konten website yang terlalu banyak membuat kita membutuhkan ruang yang cukup luas, sehingga terkadang harus mengorbankan menu atau dengan kata lain menyembunyikan menu untuk mendapatkan ruang. Menu yang disembunyikan tentu harus bisa ditampilkan kembali ketika kita membutuhkannya, nah oleh karena itu terciptalah sliding menu atau yang biasa disebut juga dengan istikal drawer menu.

Kita bisa membuat sliding menu atau drawer menu ini dengan css saja, bahkan bisa membuatnya ala-ala material design. Sliding menu yang ingin kita buat adalah menu yang akan muncul atau hilang ketika sebuah tombol berbentuk gambar tiga garis (hamburger menu) di klik. Menu seperti itu sedang jadi tren saat ini.

Membuat struktur HTML

Pertama persiapkan dulu file HTMLnya. Pada file tersebut sertakan file css dari font awesome agar kita bisa menampilkan ikon-ikon yang dibutuhkan, seperti ikon hamburger menu, facebook, twitter dan lainnya.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Kemudian di dalam tag body dan /body, kita buat struktur HTML yang berisi daftar menu dan isi atau konten dari website. Trigger atau pemicu muncul atau menghilangnya menu sebenarnya adalah sebuah checkbox, jadi ketika checkbox terpilih maka menu akan ditampilkan, sedangkan ketika tidak terpilih maka menu akan disembunyikan.

<header>
  <input type="checkbox" id="tag-menu"/>
  <label class="fa fa-bars menu-bar" for="tag-menu"></label>
  <div class="jw-drawer">
    <nav>
      <ul>
        <li><a href="#"><i class="fa fa-facebook"></i>&nbsp;&nbsp;Facebook</a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i>&nbsp;&nbsp;Google Plus</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>&nbsp;&nbsp;Twitter</a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i>&nbsp;&nbsp;LinkedIn</a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i>&nbsp;&nbsp;Pinterest</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="content">
  <h1>rudypratama.com</h1>
  <p>Contoh pembuatan sliding menu / drawer menu dengan CSS, baca tutorialnya <a href="https://www.rudypratama.com/2018/03/cara-membuat-sliding-menu-dengan-css.html">disini</a></p>
</div>

Mempercantik dengan CSS

Agar menu tersebut terlihat lebih cantik dan bisa berfungsi dengan baik maka perlu ditambahkan script CSS. Kita menggunakan CSS animation dengan menambahkan efek slide-in dan slide-out untuk memunculkan dan menyembunyikan menu.

* {
 padding:0;
 margin:0;
}

body {
 font-family:Verdana, Geneva, sans-serif;
 font-size:18px;
 background-color:#FFF
}

header {
 width:100%;
 background-color:#006faa ;
 z-index:1000;
}

.menu-bar {
 color:#FFF;
 font-size:25px;
 cursor:pointer;
 padding:10px 12px;
 margin-left:10px;
 margin-top:5px;
 margin-bottom:5px;
}

.menu-bar:hover {
 background-color:rgba(0, 0, 0, 0.1);
 border-radius:50px;
}

#tag-menu {
 display:none;
}


#tag-menu:checked ~ div.jw-drawer {
 animation: slide-in 0.5s ease;
 animation-fill-mode: forwards;
}

.jw-drawer {
 position:fixed;
 left:-280px;
 background-color:#006faa;
 height:100%;
 z-index:100;
 width:230px;
 animation: slide-out 0.5s ease;
 animation-fill-mode: forwards;
}

.jw-drawer ul li {
 list-style:none;
}

.jw-drawer ul li a {
 padding:10px 20px;
 text-decoration:none;
 display:block;
 color:#FFF;
 border-top:1px solid #059;
}

.jw-drawer ul li a:hover{
 background-color:rgba(0, 0, 0, 0.1);
}

.jw-drawer ul li a i {
 width:50px;
 height:35px;
 text-align:center;
 padding-top:15px;
}

@keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}

@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}


.content{
  padding: 100px 0 0 250px;
}

Script diatas pertama-tama akan menyembunyikan atau menggeser menu sebanyak 280px melewati lebar layar sehingga tidak terlihat, dan akan memunculkannya secara perlahan kedalam halaman selebar 280px ketika menu di klik.

DEMO | DOWNLOAD CODE

Artikel Menarik Lainya Cara Membuat Menu Dropdown Multilevel Cara Membuat Heading HTML Cara Membuat Website Dengan Blogger Tips Belajar Membuat Website Dinamis Cara Buat Website Dengan Wordpress

Itulah trik singkat membuat slide menu untuk mempercantik tampilan website Anda, menu tersebut bisa digunakan di halaman utama website maupun di halaman administrator.(Kamis, 08/03/2018)