Membangun Menu Interaktif dengan HTML, CSS, dan JavaScript: Panduan Lengkap

samuelpasaribu.com
27 Sep, 2023

Menu interaktif adalah salah satu elemen yang sangat penting dalam dunia desain web. Elemen ini memiliki kemampuan untuk secara signifikan meningkatkan pengalaman pengguna yang mengunjungi sebuah situs web. Dengan adanya menu interaktif, pengguna dapat dengan mudah menjelajahi berbagai bagian situs, membuat navigasi lebih lancar, dan menambah daya tarik visual situs tersebut.

Dalam panduan ini, Saya akan membahas secara rinci cara membuat menu interaktif. Saya akan menggabungkan teknologi-teknologi seperti HTML, CSS, dan JavaScript untuk menciptakan menu yang responsif dan menarik. Masing-masing dari teknologi ini akan berperan penting dalam menghasilkan menu interaktif yang berfungsi dengan baik dan sesuai dengan kebutuhan situs Anda.

Untuk memudahkan pemahaman dan implementasi, Saya akan memberikan langkah-langkah yang terperinci serta kode yang diperlukan untuk membuat menu interaktif. Dengan mengikuti panduan ini, Anda akan memiliki pemahaman yang kuat tentang bagaimana membangun menu interaktif dan dapat mengaplikasikannya dalam proyek desain web Anda sendiri.

Langkah 1: Struktur Dasar HTML

Untuk memulai, mari buat kerangka dasar HTML untuk menu interaktif kita:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="styles.css"> <!-- Ganti dengan URL CSS Anda -->
    <title>Menu Interaktif</title>
</head>
<body>
    <button class="menu">
        <!-- Tombol Menu -->
        <span class="menu-label">Menu</span>
    </button>
    <div class="menu-wrapper is-hidden">
        <!-- Wrapper Menu -->
        <!-- Di sini akan ditampilkan daftar item-menu interaktif -->
    </div>
    <footer>
        <!-- Bagian Informasi Penulis dan Media Sosial -->
        <!-- Anda dapat menambahkan informasi penulis dan tautan media sosial di sini -->
    </footer>
    <script src="script.js"></script> <!-- Ganti dengan URL JavaScript Anda -->
</body>
</html>

Dalam kode HTML di atas, terdapat beberapa elemen yang penting:

  • <button class="menu">: Ini adalah elemen tombol yang akan digunakan untuk memicu menu interaktif.
  • <div class="menu-wrapper is-hidden">: Ini adalah wrapper (pembungkus) untuk item-item menu interaktif. Awalnya, elemen ini memiliki kelas "is-hidden" yang membuatnya tidak terlihat, dan akan ditampilkan secara interaktif saat tombol "Menu" ditekan.
  • <footer>: Ini adalah bagian bawah dari halaman web Anda, yang dapat digunakan untuk menampilkan informasi tentang penulis atau tautan ke media sosial.
  • <script src="script.js"></script>: Ini adalah referensi ke berkas JavaScript eksternal yang akan mengendalikan perilaku menu interaktif. Anda dapat menggantinya dengan URL JavaScript Anda sendiri.

Langkah 2: Desain dengan CSS

Selanjutnya, mari tambahkan gaya dan tampilan menggunakan CSS:

/* Mendefinisikan karakter set UTF-8 untuk mendukung karakter internasional */
@charset "UTF-8";

/* Mengatur kelas CSS 'is-hidden' untuk menyembunyikan elemen */
.is-hidden {
    display: none;
}

/* Gaya dasar untuk elemen 'body' situs web */
body {
    /* Mengisi tinggi dan lebar elemen body seluruh layar (100vh, 100vw) */
    height: 100vh;
    width: 100vw;
    /* Mengatur overflow ke 'hidden' untuk menghindari scrolling */
    overflow: hidden;
    /* Mengatur tampilan elemen body menjadi 'flex' untuk tata letak responsif */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    /* Memberikan latar belakang warna gelap */
    background: #333;
    /* Mengatur jenis font dan warna teks */
    font-family: Helvetica, Arial, Sans-Serif;
    color: #eee;
    /* Mengatur posisi elemen relatif dan margin nol */
    position: relative;
    margin: 0;
}

/* Gaya tombol 'button' untuk menu interaktif */
button {
    /* Menghapus border tombol */
    border: none;
    /* Memberikan latar belakang dan warna teks tombol */
    background: #4343d2;
    color: #eee;
    /* Mengatur margin atas dan padding tombol */
    margin-top: 2rem;
    padding: 10px 20px;
    /* Memberikan sudut bulat pada tombol */
    border-radius: 5px;
    /* Mengatur lebar tombol */
    width: 150px;
    /* Memberikan efek bayangan tipis */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Gaya untuk wrapper menu interaktif */
.menu-wrapper {
    /* Transisi efek selama 1.5 detik saat perubahan tampilan */
    transition: all 1.5s;
    /* Mengatur posisi elemen relatif */
    position: relative;
    /* Memberikan latar belakang dan warna teks pada wrapper menu */
    background: #7d2ae8;
    color: #eee;
    /* Menentukan margin atas pada wrapper */
    margin-top: 15px;
    /* Memberikan sudut bulat pada wrapper */
    border-radius: 4px;
    /* Mengatur z-index untuk menentukan tumpukan lapisan */
    z-index: 999;
}

/* Menambahkan tanda panah segitiga pada wrapper menu */
.menu-wrapper::before {
    content: "รข–²";
    /* Mengatur posisi absolut tanda panah */
    position: absolute;
    top: -13px;
    left: 88px;
    /* Memberikan warna pada tanda panah */
    color: #7d2ae8;
}

/* Gaya elemen menu dalam wrapper */
.item {
    /* Memberikan latar belakang warna pada elemen menu */
    background: #7d2ae8;
    /* Memberikan padding pada elemen menu */
    padding: 1.25rem;
    /* Transisi efek saat hover pada elemen menu */
    transition: all 0.25s;
    /* Memberikan sudut bulat pada elemen menu */
    border-radius: 4px;
}

/* Efek hover pada elemen menu */
.item:hover {
    /* Memperbesar elemen menu saat hover */
    transform: scale(1.03);
    /* Memberikan efek bayangan tipis saat hover */
    box-shadow: 0px 0px 1px 1px #ffebcd;
}

/* Gaya ikon dalam elemen menu */
.item>i {
    /* Memberikan warna pada ikon */
    color: #4343d2;
    /* Memberikan margin kanan pada ikon */
    margin-right: 1.25rem;
}

/* Gaya SVG (Scalable Vector Graphics) */
svg {
    /* Menentukan ukuran SVG */
    width: 24px;
    height: 24px;
    /* Menyusun vertikal SVG */
    vertical-align: middle;
    /* Mengisi SVG dengan warna putih */
    fill: #fff;
}

/* Gaya label menu */
.menu-label {
    /* Menampilkan label menu secara inline */
    display: inline-block;
    /* Menyusun vertikal label menu */
    vertical-align: middle;
}

/* Menyusun secara inline SVG dan label menu dalam elemen menu */
.menu svg,
.menu .menu-label {
    display: inline-block;
    vertical-align: middle;
}

Keterangan di atas menjelaskan setiap bagian dari kode CSS yang Saya terapkan untuk membuat menu interaktif dan penggunaannya dalam desain web.

Langkah 3: Interaktivitas dengan JavaScript

Sekarang Saya akan menambahkan interaktivitas menggunakan JavaScript yang bertujuan untuk mengontrol tampilan elemen menu dengan efek fading saat tombol menu diklik.

Berikut adalah keterangan dari kode JavaScript yang digunakan untuk membuat menu interaktif:


// Mendapatkan referensi tombol menu dan elemen menu-wrapper dari HTML
const btn = document.querySelector('.menu');
const el = document.querySelector('.menu-wrapper');

// Fungsi untuk menghilangkan elemen dengan efek fading (fade out)
function fadeOut(el) {
    // Mengatur opacity elemen menjadi 1
    el.style.opacity = 1;

    // Fungsi rekursif untuk mengurangi opacity secara bertahap hingga 0
    (function fade() {
        if ((el.style.opacity -= 0.1) < 0) {
            // Mengatur elemen display menjadi 'none' ketika opacity mencapai 0
            el.style.display = 'none';
            // Menambahkan kelas 'is-hidden' untuk menyembunyikan elemen
            el.classList.add('is-hidden');
        } else {
            // Melakukan rekursi dengan requestAnimationFrame sampai opacity mencapai 0
            requestAnimationFrame(fade);
        }
    })();
}

// Fungsi untuk menampilkan elemen dengan efek fading (fade in)
function fadeIn(el, display) {
    // Mengecek apakah elemen memiliki kelas 'is-hidden'
    if (el.classList.contains('is-hidden')) {
        // Menghapus kelas 'is-hidden' untuk menampilkan elemen
        el.classList.remove('is-hidden');
    }
    // Mengatur opacity elemen menjadi 0
    el.style.opacity = 0;
    // Mengatur tampilan elemen menjadi 'block' atau sesuai dengan parameter display
    el.style.display = display || 'block';

    // Fungsi rekursif untuk meningkatkan opacity secara bertahap hingga 1
    (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += 0.1) > 1)) {
            // Mengatur opacity elemen sesuai dengan nilai val
            el.style.opacity = val;
            // Melakukan rekursi dengan requestAnimationFrame sampai opacity mencapai 1
            requestAnimationFrame(fade);
        }
    })();
}

// Menambahkan event listener untuk tombol menu (click event)
btn.addEventListener('click', function (e) {
    if (el.classList.contains('is-hidden')) {
        // Jika elemen menu-wrapper memiliki kelas 'is-hidden', maka tampilkan menu
        btn.innerHTML = `
            <svg id="icon-exit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
            <span class="menu-label">Exit</span>
        `;
        // Memanggil fungsi fadeIn untuk menampilkan menu dengan efek fading
        fadeIn(el);
    } else {
        // Jika elemen menu-wrapper tidak memiliki kelas 'is-hidden', maka sembunyikan menu
        btn.innerHTML = `
            <svg id="icon-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
            <span class="menu-label">Menu</span>
        `;
        // Memanggil fungsi fadeOut untuk menyembunyikan menu dengan efek fading
        fadeOut(el);
    }
});

Kode di atas menjelaskan cara mengontrol tampilan elemen menu dengan efek fading saat tombol menu diklik. Ketika tombol "Menu" diklik, menu akan muncul dengan efek fading (fadeIn), dan ketika tombol "Exit" diklik, menu akan menghilang dengan efek fading (fadeOut).

Pada tahap pemasangan kode ini, sangat penting untuk menyesuaikan URL CSS dan JavaScript sesuai dengan kebutuhan proyek Anda. Anda perlu memastikan bahwa URL yang digunakan mengarahkan ke lokasi yang benar di mana file-file CSS dan JavaScript Anda disimpan. Anda juga memiliki opsi untuk menggabungkan CSS dan JavaScript ke dalam satu file jika itu lebih sesuai dengan proyek Anda. Pastikan untuk menyesuaikan setiap URL dengan cermat sehingga kode dapat diakses dan dijalankan dengan lancar di situs web Anda.

Baca juga : Teknik Scroll Otomatis: Menjadikan Konten Lebih Dinamis dan Mudah Diakses

Demo Menu Interaktif

Setelah mengikuti langkah-langkah di atas dan menerapkan kode-kode yang diberikan, sekarang saatnya melihat hasilnya secara langsung. Di bawah ini, Anda akan menemukan demo menu interaktif yang telah Saya buat dengan menggunakan HTML, CSS, dan JavaScript. Silakan interaksikan dengan menu ini untuk melihat bagaimana tampilannya berubah dan bagaimana efeknya bekerja.



Catatan: Anda dapat sepenuhnya menyesuaikan tampilan dan perilaku menu interaktif ini sesuai dengan preferensi Anda. Cobalah untuk mengubah warna, animasi, atau bahkan menambahkan elemen tambahan untuk melihat bagaimana hal itu mempengaruhi pengalaman pengguna.

Sumber Daya Tambahan

  • Font Awesome Icons - Untuk ikon yang menarik
  • CSS Tutorial - Panduan lengkap tentang CSS
  • JavaScript Documentation - Dokumentasi resmi JavaScript

Semoga panduan ini membantu Anda dalam membuat menu interaktif yang menarik dan berguna bagi pengguna situs web Anda!

Kesimpulan

Dengan mengikuti setiap langkah yang telah diuraikan di atas, Anda akan berhasil menciptakan menu interaktif yang siap digunakan pada situs web Anda. Langkah-langkah ini mencakup penerapan teknologi inti web, seperti HTML, CSS, dan JavaScript, yang merupakan fondasi dari hampir semua situs web yang ada. Ketika Anda menguasai cara membuat menu interaktif dengan elemen-elemen ini, Anda membuka pintu untuk menyesuaikan gaya, efek, dan tampilan menu sesuai dengan preferensi dan identitas visual situs Anda.

Tidak hanya itu, memiliki kontrol penuh terhadap menu interaktif Anda juga berarti Anda dapat menghadirkan pengalaman yang benar-benar unik bagi pengunjung situs Anda. Anda dapat memilih efek transisi yang halus, animasi yang menarik, dan bahkan menggabungkan elemen tambahan seperti gambar, ikon, atau teks untuk membuat menu Anda lebih informatif dan menarik. Hal ini akan membantu Anda menonjol di tengah persaingan yang ketat di dunia web.

Selain itu, dengan menu interaktif yang dirancang dengan baik, Anda dapat meningkatkan fungsionalitas situs Anda. Anda bisa menambahkan navigasi yang lebih intuitif, yang membantu pengunjung situs dengan mudah menemukan informasi yang mereka cari. Ini juga dapat meningkatkan retensi pengguna, mengurangi tingkat bounce, dan memberikan kesan positif yang mendalam kepada pengunjung situs Anda.

Jadi, jangan ragu untuk mengikuti panduan ini dan mulai membangun menu interaktif yang memukau untuk situs web Anda. Ini adalah langkah besar dalam meningkatkan tampilan, fungsionalitas, dan daya tarik situs Anda secara keseluruhan.

samuelpasaribu.com

samuelpasaribu.com

samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Next Post Previous Post
No Comment
Add Comment
comment url