Membuat Menu Navigasi Sisi Meluncur untuk Desain Responsif

Indonesian (Bahasa Indonesia) translation by Anissa Anwar (you can also view the original English article)

Dalam tutorial ini, Anda akan membuat menu navigasi sisi yang bisa diperluas dengan JavaScript dan CSS. Produk akhir akan muncul seperti gambar di bawah ini:

Markup

Untuk mulai, mari kita menambahkan beberapa markup untuk menu sisi kita:

  <div id="sideNavigation" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Features</a>
    <a href="#">Contact Us</a>
  </div>

  <nav class="topnav">
    <a href="#" onclick="openNav()">
      <svg width="30" height="30" id="icoOpen">
          <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
          <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
          <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
      </svg>
    </a>
  </nav>
  
  <div id="main">
  <!-- Add all your websites page content here  -->
  </div>

Di sini Anda dapat melihat kita membuat sisi menu div dengan class sidenav. Selanjutnya kita menambahkan bilah navigasi atas sebenarnya melalui <nav>tag, dan kita menggunakan SVG untuk icon menu sisi.

Atribut icon dari onclick dan tombol menutup akan memicu beberapa JavaScript, yang kita akan menambahkan berikutnya.

Ingat untuk memasukkan semua konten website Anda dalam wadah div id = "main" sehingga itu akan meluncur di sebelah kanan.

JavaScript

Selanjutnya, mari kita menambahkan JavaScript untuk membuat fungsi openNav dan closeNav.

<script>
function openNav() {
    document.getElementById("sideNavigation").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("sideNavigation").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
</script>

CSS

Akhirnya, kita akan perlu untuk memberi gaya halaman kita dengan beberapa CSS menu sisi dan link kita:

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
    overflow:hidden;
    width:100%;
}
body {
  overflow-x: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

a svg{
  transition:all .5s ease;

  &:hover{
    #transform:rotate(180deg);
  }
}

#ico{
  display: none;
}

.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);

  #transition: all 0.5s ease;

  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;

    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }

    &:hover{
      background: #555;
    }
  }
}

Catatan: body {overflow-x: hidden;} diperlukan untuk memastikan scroll horizontal tidak muncul saat menggunakan ini dengan CSS yang ada.

Anda sekarang dapat melihat pada menu Anda dan mencobanya di browser Anda.

Menggunakan jQuery

Jika Anda ingin membuat menu sisi JavaScript menggunakan jQuery, Anda dapat melakukan ini dengan mengganti JavaScript yang saya berikan tadi sebelumnya dengan bagian berikut:

$('.topnav a').click(function(){
  $('#sideNavigation').style.width = "250px";
  $("#main").style.marginLeft = "250px";
});

$('.closebtn').click(function(){
  $('#sideNavigation').style.width = "0";
  $("#main").style.marginLeft = "0";
});

Menghapus Slide

Untuk membuat menu muncul tanpa animasi slide, cukup hanya membuat perubahan properti CSS transition, seperti ditunjukkan pada formulir singkat di bawah ini:

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

Ini akan membuat perubahan yang muncul seketika tanpa ada penundaan yang ditentukan dalam transition. Standar yang kita gunakan adalah 0.5s.

Kesimpulan

Membuat menu sisi hanya dibutuhkan beberapa baris kode dan tidak perlu menggunakan banyak sumber daya. Juga, jika jQuery sudah pada halaman untuk tugas-tugas lain, pekerjaan dapat dibuat dengan sedikit lebih baris kode dan disesuaikan lebih lanjut.

Membuat kode responsif untuk bekerja dengan resolusi layar perangkat yang berbeda adalah hanya hal memodifikasi CSS dengan menambahkan media query untuk kasus-kasus tertentu.

Untuk mengambil ini lebih lanjut, Anda mungkin ingin memberi menu Anda gaya dengan kerangka CSS seperti Bootstrap atau Bulma.