Cara Membuat Sliding Menu dengan HTML dan CSS

Cara Membuat Sliding Menu dengan HTML dan CSS –Membuat sliding menu menggunakan HTML dan CSS dapat menjadi langkah pertama yang menarik untuk mempelajari dasar-dasar desain web. Saat ini, desain web semakin berkembang dan menjadi lebih dinamis. Salah satu elemen yang sering digunakan dalam desain web modern adalah sliding menu. Sliding menu adalah jenis menu yang muncul atau tersembunyi ketika tombol tertentu ditekan atau saat interaksi tertentu dilakukan. Dalam artikel ini, riztekno akan membahas langkah demi langkah cara membuat sliding menu dengan HTML dan CSS untuk pemula. Dengan mengikuti langkah-langkah sederhana berikut, Anda dapat membuat sliding menu yang interaktif dan estetis untuk proyek Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang Harus Anda Siapkan untuk dapat membuat sliding menu dengan html dan css:

  • Google chrome (Web browser),
  • Perangkat laptop,
  • Sublime text (Text editor code),
  • Niat yang kuat

Cara Membuat Sliding Menu dengan HTML dan CSS

1. Buat Folder Proyek Sliding Menu

Langkah pertama adalah membuat folder proyek yang akan berisi semua file yang Anda butuhkan untuk membuat sliding menu. Misalnya, Anda dapat menamai folder ini “sliding_menu_project“.

2. Buat Folder “img”

Dalam folder proyek Anda, buatlah folder terpisah yang bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang mungkin Anda gunakan dalam sliding menu Anda. Download gambar disini untuk dapat ditambahkan dalam project sliding menu.

3. Buat File HTML: “sliding_menu.html”

Buatlah sebuah file HTML baru di dalam folder proyek Anda dengan nama “sliding_menu.html“. File ini akan menjadi titik awal untuk membuat sliding menu.

Berikut ini file html yang dapat Anda tambahkan untuk membuat menu sliding dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sliding Menu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <nav class="menu">
      <input type="checkbox" id="toggle">
      <label for="toggle" class="toggle-btn">
        <span></span>
      </label>
      <ul>
        <li><a href="https://riztekno.com/">Home</a></li>
        <li><a href="https://riztekno.com/">About</a></li>
        <li><a href="https://riztekno.com/">Services</a></li>
        <li><a href="https://riztekno.com/">Portfolio</a></li>
        <li><a href="https://riztekno.com/">Contact</a></li>
      </ul>
    </nav>
    <div class="content">
      <h1>Welcome to Our Website</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
      <img src="img/menu1.jpg" alt="Landing Image">
    </div>
  </div>
</body>
</html>
 

4. Buat File CSS: “style.css”

Sekarang, buatlah file CSS baru di dalam folder proyek Anda dengan nama “style.css“. File ini akan digunakan untuk mendesain tampilan dari sliding menu Anda.

Artikel Terkait:   Cara Membuat Web Dinamis dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk membuat menu sliding dengan html dan css:

body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  
  .container {
    display: flex;
    height: 100vh;
  }
  
  .menu {
    position: fixed;
    width: 250px;
    height: 100%;
    background-color: #333;
    overflow: hidden;
    transition: width 0.3s ease;
  }
  
  .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .menu ul li {
    padding: 10px;
    border-bottom: 1px solid #555;
  }
  
  .menu ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  .content {
    flex: 1;
    background-color: #f2f2f2;
    padding: 20px;
  }
  
  #toggle {
    display: none;
  }
  
  .toggle-btn {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    display: block;
  }
  
  .toggle-btn span {
    display: block;
    height: 3px;
    width: 30px;
    background-color: #fff;
    margin-bottom: 6px;
  }
  
  #toggle:checked ~ .menu {
    width: 0;
  }
  
  .content h1 {
    margin-top: 0;
    margin-left: 20%;
  }
  
  .content p {
    margin-bottom: 20px;
    margin-left: 20%;
  }
  
  .content img {
    max-width: 50%;
    margin-left: 20%;
  }
 

5. Mengubah Tampilan Sliding Menu

Anda dapat menyesuaikan tampilan sliding menu dengan menambahkan konten dan gaya CSS tambahan sesuai keinginan Anda. Pastikan untuk menjaga struktur HTML dan kelas CSS yang diperlukan agar sliding menu berfungsi dengan baik.

6. Simpan & Lihat Tampilan

Setelah menyelesaikan perubahan, simpan file Anda dan buka “sliding_menu.html” di browser web Anda untuk melihat sliding menu yang telah Anda buat. Pastikan bahwa menu berfungsi sesuai yang Anda harapkan dan sesuaikan desain atau fungsionalitas jika diperlukan.

Preview hasil

Berikut ini preview hasil sliding menu dengan html dan css jika Anda berhasil membuatnya:

Penutup

Membuat sliding menu menggunakan HTML dan CSS dapat menjadi langkah pertama yang menarik untuk mempelajari dasar-dasar desain web. Saat ini, desain web semakin berkembang dan menjadi lebih dinamis. Salah satu elemen yang sering digunakan dalam desain web modern adalah sliding menu. Sliding menu adalah jenis menu yang muncul atau tersembunyi ketika tombol tertentu ditekan atau saat interaksi tertentu dilakukan. Dalam artikel ini, kami telah membahas langkah demi langkah cara membuat sliding menu dengan HTML dan CSS untuk pemula. Dengan mengikuti langkah-langkah sederhana yang disajikan di atas, Anda dapat mulai mengintegrasikan sliding menu ke dalam proyek desain web Anda dengan mudah.

Artikel Terkait:   Cara Membuat Header Website dengan HTML dan CSS

Jika Anda mengikuti langkah-langkah ini dengan seksama, Anda akan memiliki sliding menu yang interaktif dan siap digunakan. Namun, jangan ragu untuk menyesuaikan desain dan fungsionalitas sesuai dengan kebutuhan proyek Anda. Teruslah eksplorasi dan berlatih, karena praktik membuat sempurna dalam dunia desain web. Selamat mencoba!