Cara Membuat Sliding Menu di Blogger

Kadang kita melihat banyak button di header pada sebuah website sehingga website tersebut terlihat kurang enak di lihat. Ada baiknya kita meng - hidden button-button tersebut agar website tersebut terlihat menarik. tutorial ini akan memperlihatkan bagaimana cara membuat sebuah tombol yang akan meng hidden tombol-tombol di header.

Membuat struktur HTML

Pertama persiapkan dulu file HTML (index.html)

Pada 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.


<!doctype html>

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="style.css">
    <title>AGENCY.CO.ID</title> *isi dengan title yang di inginkan 
  </head>


  <body>
      
<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> -->
   <li class="nav-item">
                <a class="nav-link active mr-3" href="index.html">HOME</a>
              </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle mr-3" data-toggle="dropdown" href="index.html" role="button" aria-haspopup="true" aria-expanded="false">OUR SERVICE</a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="Outsourcing.html">Outsourcing Hire Right</a>
                  <a class="dropdown-item" href="Verification.html">Verification Trustworthy</a>
                  <a class="dropdown-item" href="Businees.html">Business Process Reliable</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link mr-3" href="vision.html">VISION AND MISSION</a>
              </li>
              <li class="nav-item">
                <a class="nav-link  mr-3" href="about.html">ABOUT US</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mr-3" href="contact.html">CONTACT</a>
              </li>
      </ul>
    </nav>
  </div>
        <a class="navbar-brand" href="index.html">
          <h5 class="text-white h3 font-weight-bold">AGENCY <span>.CO.ID</span></h5>
          <span class="text-muted"></span>
        </a>
</header>

<div class="content">
  *isi dari halaman website yang di inginkan
</div>

Terlihat di script di atas <link rel="stylesheet" href="style.css"> Di ketahui bahwa script tersebut terhubung ke style.css, maka kita harus membuat style.css agar tombol tersebut dapat berfungsi dengan baik. Berikut script nya


* {
 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 / menggeser menu sebanyak 280px melewati lebar layar sehingga tidak terlihat, dan akan memunculkannya secara perlahan kedalam halaman selebar 280px ketika menu di klik.

Segitu dulu tutorial kali ini. Jika ada pertanyaan, mari berjumpa pada kolom komentar di bawah. Semoga bermanfaat!.

Cara Membuat Sliding Menu di Blogger

Comments