Membuat Menu Scroll ke Samping dengan CSS

Menu Scroll ke Samping

Dalam dunia desain web modern, tampilan menu yang responsif dan elegan menjadi salah satu elemen penting dalam membangun pengalaman pengguna (user experience) yang baik. Salah satu tren yang semakin populer adalah menu scroll ke samping . Menu ini tidak hanya terlihat modern, tetapi juga hemat tempat sehingga sangat cocok untuk perangkat mobile maupun desktop.

Pada artikel ini, kita akan membahas cara membuat menu scroll ke samping menggunakan CSS. Dengan teknik ini, Anda dapat menciptakan navigasi yang responsif, elegan, dan interaktif tanpa harus mengorbankan ruang di halaman web Anda. Mari kita mulai!

Apa Itu Menu Scroll ke Samping?

Menu scroll ke samping adalah jenis navigasi horizontal yang memungkinkan pengguna untuk menggulir (scroll) menu ke arah kiri atau kanan. Menu ini sangat berguna ketika jumlah item menu terlalu banyak untuk ditampilkan sekaligus dalam satu baris, terutama pada layar kecil seperti smartphone atau tablet.

Keunggulan utama dari menu ini adalah:

Responsif : Menyesuaikan diri dengan ukuran layar perangkat.

Elegan : Tampilan animasi yang halus memberikan kesan modern.

Hemat Tempat : Menghemat ruang di halaman web tanpa mengurangi fungsionalitas.

Langkah-Langkah Membuat Menu Scroll ke Samping dengan CSS

Berikut adalah panduan lengkap untuk membuat menu scroll ke samping yang responsif dan elegan:

1. HTML Structure

Pertama-tama, buatlah struktur HTML dasar untuk menu navigasi. Berikut contoh kode HTML:

        
javascript
        

            
        
     
<div class="sidescroll">
  <ul>
    <li><a class="side-home" href="#" title="Home">Home</a></li>
    <li><a class="side-hot" href="#" title="New">Hot News</a></li>
    <li><a class="side-trending" href="#" title="Popular">Trending</a></li>
    <li><a class="sidemenu" href="#" title="Tutorial">Tutorial</a></li>
    <li><a class="sidemenu" href="#" title="Video">Video</a></li>
    <li><a class="sidemenu" href="#" title="HTML5">HTML5</a></li>
    <li><a class="sidemenu" href="#" title="CSS3">CSS3</a></li>
    <li><a class="sidemenu" href="#" title="Javascript">Javascript</a></li>
    <li><a class="sidemenu" href="#" title="Contact">Contact</a></li>
  </ul>
</div>

Penjelasan:

class sidescroll: Area yang berisi daftar menu dan dapat di-scroll.

class side-home, side-hot, side-trending, sidemenu: Setiap item menu yang akan ditampilkan secara horizontal.

2. CSS Styling

Selanjutnya, tambahkan styling CSS untuk membuat menu scroll ke samping. Berikut adalah kode CSS yang dapat digunakan: 

        
css
        

            
        
     
.sidescroll ul {
  background: rgb(183,58,58);
background: linear-gradient(90deg, rgba(183,58,58,1) 0%, rgba(177,163,30,1) 49%, rgba(231,0,255,1) 100%);
  max-width: 100%; /* Lebar maksimal menu */
  overflow-x: auto;
}
.sidescroll {
  color: #fff;
  line-height: 0px;
  overflow: hidden;
}
.sidescroll a {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  line-height: 1.5em;
  display: block;
}
.sidescroll a:hover {
  background-color: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
}
.sidescroll ul, .sidescroll li {
  list-style: none;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
.sidescroll a.side-home:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-opacity='0' d='M6 8l6 -5l6 5v12h-12v-12Z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='1s' dur='0.5s' values='0;1'/%3E%3C/path%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M5 21h14'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.2s' values='16;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='14' stroke-dashoffset='14' d='M5 21v-13M19 21v-13'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.2s' dur='0.2s' values='14;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='28' stroke-dashoffset='28' d='M2 10l10 -8l10 8'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.4s' dur='0.6s' values='28;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");margin-right:5px;display:inline-block;vertical-align:middle}
  .sidescroll a.side-trending:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-opacity='0' d='M12 3l2.35 5.76l6.21 0.46l-4.76 4.02l1.49 6.04l-5.29 -3.28l-5.29 3.28l1.49 -6.04l-4.76 -4.02l6.21 -0.46Z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.5s' dur='0.5s' values='0;1'/%3E%3C/path%3E%3Cpath fill='none' stroke='%23fff' stroke-dasharray='36' stroke-dashoffset='36' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3L9.65 8.76L3.44 9.22L8.2 13.24L6.71 19.28L12 16M12 3L14.35 8.76L20.56 9.22L15.8 13.24L17.29 19.28L12 16'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.5s' values='36;0'/%3E%3Canimate attributeName='d' dur='1.5s' repeatCount='indefinite' values='M12 3L9.65 8.76L3.44 9.22L8.2 13.24L6.71 19.28L12 16M12 3L14.35 8.76L20.56 9.22L15.8 13.24L17.29 19.28L12 16;M12 7L10.82 10.38L7.24 10.45L10.1 12.62L9.06 16.05L12 14M12 7L13.18 10.38L16.76 10.45L13.9 12.62L14.94 16.05L12 14;M12 3L9.65 8.76L3.44 9.22L8.2 13.24L6.71 19.28L12 16M12 3L14.35 8.76L20.56 9.22L15.8 13.24L17.29 19.28L12 16'/%3E%3C/path%3E%3C/svg%3E");margin-right:5px;display:inline-block;vertical-align:middle}
  .sidescroll a.side-hot:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='48' stroke-dashoffset='48' d='M17 9v9c0 1.66 -1.34 3 -3 3h-6c-1.66 0 -3 -1.34 -3 -3v-9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='48;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='14' stroke-dashoffset='14' d='M17 9h3c0.55 0 1 0.45 1 1v3c0 0.55 -0.45 1 -1 1h-3'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.2s' values='14;0'/%3E%3C/path%3E%3Cmask id='lineMdCoffeeLoop0'%3E%3Cpath stroke='%23fff' d='M8 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M16 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4'%3E%3CanimateMotion calcMode='linear' dur='3s' path='M0 0v-8' repeatCount='indefinite'/%3E%3C/path%3E%3C/mask%3E%3Crect width='24' height='0' y='7' fill='%23fff' mask='url(%23lineMdCoffeeLoop0)'%3E%3Canimate fill='freeze' attributeName='y' begin='0.8s' dur='0.6s' values='7;2'/%3E%3Canimate fill='freeze' attributeName='height' begin='0.8s' dur='0.6s' values='0;5'/%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");margin-right:5px;display:inline-block;vertical-align:middle}
  .sidescroll a.sidemenu:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23fff' fill-opacity='0' stroke-dasharray='64' stroke-dashoffset='64' d='M14 5h8c0.55 0 1 0.45 1 1v10c0 0.55 -0.45 1 -1 1h-16c-0.55 0 -1 -0.45 -1 -1v-11Z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.8s' dur='0.5s' values='0;1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='64;0'/%3E%3C/path%3E%3Cpath d='M14 5h-9v0c0 0 0.45 0 1 0h6z' opacity='0'%3E%3Canimate fill='freeze' attributeName='d' begin='0.6s' dur='0.2s' values='M14 5h-9v0c0 0 0.45 0 1 0h6z;M14 5h-9v-1c0 -0.55 0.45 -1 1 -1h6z'/%3E%3Cset fill='freeze' attributeName='opacity' begin='0.6s' to='1'/%3E%3C/path%3E%3Cpath stroke-dasharray='36' stroke-dashoffset='36' d='M19 21h-17c-0.55 0 -1 -0.45 -1 -1v-13'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.3s' dur='0.5s' values='36;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");margin-right:5px;display:inline-block;vertical-align:middle}

3. Menambahkan Responsivitas

Untuk memastikan menu scroll ke samping bekerja dengan baik di berbagai perangkat, tambahkan media query CSS. Contohnya:

        
css
        

            
        
     
@media screen and (max-width: 480px){
  .sidescroll a {
    font-size: 15px;
    padding: 8px 11px;
  }
}
@media screen and (max-width: 360px){
  .sidescroll a {
    font-size: 12px;
    padding: 7px 10px;
  }
}

Media query ini akan menyesuaikan ukuran font dan padding item menu agar lebih nyaman dilihat di perangkat dengan layar kecil.

Kesimpulan

Menu scroll ke samping adalah solusi praktis untuk membuat navigasi yang responsif, elegan, dan hemat tempat. Dengan kombinasi HTML dan CSS yang tepat, Anda dapat menciptakan menu ini tanpa harus menggunakan JavaScript. Selain itu, menu ini sangat cocok untuk website modern yang ingin tampil minimalis namun tetap fungsional.

Jika Anda ingin meningkatkan tampilan website Anda, cobalah menerapkan teknik menu scroll ke samping ini. Dengan penyesuaian yang tepat, menu ini akan memberikan pengalaman pengguna yang lebih baik dan meningkatkan estetika desain web Anda.

Terimakasih semoga tutorial menu responsive scroll horizontal ini bermanfaat