Cara Membuat Sliding Menu / Drawer Menu Samping Kanan dengan CSS

Kali ini saya bagikan tentang slide menu yang ditempatkan di bagian samping halaman Web/Blog yang merupakan bagian dari header.

Tampilan slide ini cukup simpel untuk menghiasi bagian sisi samping dengan penambahan sedikit efek blink pada bagain menu utama dan juga pada bagian submenu.

Penempatan sliding menu ini memang sedikit perlu kejelian khusus karena kalau langsung ditempatkan pada template yang anda pakai, maka akan banyak perubahan yang tidak dinginkan.

Saya hanya membagikan sebuah contoh yang harus di modifikasi ulang untuk ditempatkan pada template blog anda.

Contoh penulisan CSS/style seperti dibawah ini.

* {

 padding:0;

 margin:0;

}



body {

 font-family:Calibri, Geneva, sans-serif;

 font-size:18px;

 background-color:#FFF

}



header {

 width:100%;

 background-color:#FF1744 ;

 z-index:1000;

}



.menu-bar {

 color:#FFF;

 font-size:25px;

 cursor:pointer;

 padding:10px 12px;

 margin-left:1290px;

 margin-top:5px;

  margin-bottom:5px;

  -webkit-animation:flash 1s linear 1s infinite normal;

  animation:flash 1s linear 0.5s infinite normal}

  @-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}

}

  @keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}

}



.menu-bar:hover {

  background-color:rgba(0, 0, 0, 0.2);

 border-radius:0 10px;

  -webkit-animation:non

}



#tag-menu {

 display:none;

}



#tag-menu:checked ~ div.slide-menu {

 animation: slide-in 0.3s ease;

 animation-fill-mode: forwards;

}



.slide-menu {

 position:fixed;

 right:-280px;

 background-color:#FF1744;

 height:100%;

 z-index:100;

 width:230px;

 animation: slide-out 0.3s ease;

 animation-fill-mode: forwards;

}



.slide-menu ul li {

 list-style:none;

}



.slide-menu ul li a {

 padding:10px 20px;

 text-decoration:none;

 display:block;

 color:#FFF;

 border-top:1px solid #d00028;

}



.slide-menu ul li a:hover{

 background-color:rgba(0, 0, 0, 0.2);

 -webkit-animation:flash 1s linear 1s infinite normal;

  animation:flash 1s linear 0.3s infinite normal}

  @-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}

}

  @keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

}



.slide-menu ul li a i {

 width:50px;

 height:35px;

 text-align:center;

 padding-top:15px;

}



@keyframes slide-in {

 from {right: -280px;}

 to {right: 0;}

}



@keyframes slide-out {

 from {right: 0;}

 to {right: -280px;}

}



.content{

  padding: 100px 0 0 250px;

}

Pada teks box 1290 bisa disesuaikan dengan penempatan widget.

Contoh penulisan HTML seperti dibawah ini.

<header>

  <input type="checkbox" id="tag-menu"/>

  <label class="fa fa-coffee menu-bar" for="tag-menu"></label>

  <div class="slide-menu">

    <nav>

      <ul>

        <li><a href="xxx"><i class="fa fa-windows "></i>&nbsp;&nbsp;Windows</a></li>

        <li><a href="xxx"><i class="fa fa-android"></i>&nbsp;&nbsp;Android</a></li>

        <li><a href="xxx"><i class="fa fa-apple"></i>&nbsp;&nbsp;Apple</a></li>

        <li><a href="xxx"><i class="fa fa-chrome"></i>&nbsp;&nbsp;Chrome</a></li>

        <li><a href="xxx"><i class="fa fa-firefox"></i>&nbsp;&nbsp;Fire Fox</a></li>

      </ul>

    </nav>

  </div>

</header>



<div class="content">

  <h1>skindezign.com</h1>

  <p>Cara Membuat Sliding Menu / Drawer Menu Samping Kanan dengan CSS, tutorial lengkapnya <a href="https://www.skindezign.com/2018/08/cara-membuat-sliding-menu-drawer-menu.html">disini</a></p>

</div>

Pada teks box xxx ganti dengan link yang sesuai.

Cara membuat sliding menu diatas sudah cukup, mudah-mudahan bisa di modifikasi dan ditempatkan dengan baik sehingga menghasilkan tampilan yang lebih menarik, hehe....

Result

Kritik, keluhan dan juga saran dari anda saya tunggu, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.