Cara Membuat Menu Responsive dengan HTML dan CSS

Cara Membuat Menu Responsive dengan HTML dan CSS – Pada era digital yang semakin berkembang, memiliki situs web yang responsif sangatlah penting untuk memastikan pengalaman pengguna yang optimal. Salah satu elemen penting dalam desain web responsif adalah menu navigasi yang dapat menyesuaikan diri dengan perangkat yang digunakan oleh pengguna. Dalam artikel ini, riztekno akan membahas langkah-langkah untuk membuat menu responsif menggunakan HTML dan CSS, yang cocok bagi pemula yang ingin mempelajari dasar-dasar desain web.

Alat yang Harus Anda Siapkan

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

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

Cara Membuat Menu Responsive dengan HTML dan CSS

1. Buat Folder Project Menu Responsive

Langkah pertama yang perlu dilakukan adalah membuat folder project baru untuk menyimpan semua file terkait dengan menu responsif yang akan kita buat. Anda dapat memberikan nama folder sesuai dengan preferensi Anda.

2. Buat Folder img

Selanjutnya, di dalam folder project, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan digunakan dalam proyek menu responsif. Download gambar disini untuk di implementasikan dalam project menu responsive.

3. Buat Sebuah File menu_responsive.html

Sekarang, mari kita mulai dengan membuat file HTML untuk menu responsif. Gunakan editor teks favorit Anda dan buatlah file baru dengan nama “menu_responsive.html“. Kemudian, masukkan kerangka dasar HTML sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Responsive</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Menu</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Beranda</a></li>
                    <li><a href="https://riztekno.com/">Menu Utama</a></li>
                    <li><a href="https://riztekno.com/">Promosi</a></li>
                    <li><a href="https://riztekno.com/>Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="landing">
        <div class="container">
            <h2>Selamat Datang di Halaman Website Kami</h2>
            <p>Kunjungi halaman kami selengkapnya untuk melihat menu layanan kami.</p>
            <a href="#" class="btn">Lihat Menu</a>
        </div>
    </section>
    <section class="gallery">
        <div class="container">
            <h2>Galeri Menu Kami</h2>
            <div class="images">
                <img src="img/gambar1.jpg" alt="Menu 1">
                <img src="img/gambar2.jpg" alt="Menu 2">
                <img src="img/gambar3.jpg" alt="Menu 3">
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>&copy; 2024 Menu Responsive. Hak Cipta Dilindungi.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita perlu membuat file CSS untuk menentukan gaya tampilan menu responsif kita. Buatlah file baru dengan nama “style.css” di dalam folder project Anda. Kemudian, tambahkan gaya CSS berikut:

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.container {
    width: 80%;
    margin: auto;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

header nav ul {
    list-style: none;
    text-align: center;
}

header nav ul li {
    display: inline-block;
    margin: 0 20px;
}

header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}

.landing {
    background-image: url('img/landing.jpg');
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.gallery {
    text-align: center;
    padding: 50px 0;
}

.gallery img {
    width: 200px;
    margin: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.btn {
    display: inline-block;
    background-color: #ff6600;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.btn:hover {
    background-color: #cc5500;
}
 

5. Mengubah Tampilan Menu Responsif

Sekarang, saatnya untuk menambahkan gaya CSS untuk membuat menu responsif. Dalam langkah ini Anda dapat merubahnya pada file “style.css” sesuai dengan konten yang Anda inginkan.

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Simpan semua perubahan yang telah Anda buat pada file HTML dan CSS. Kemudian, buka file “menu_responsive.html” di browser web Anda untuk melihat tampilan menu responsif yang telah Anda buat.

Preview hasil

Berikut ini hasil tampilan website jika Anda telah berhasil membuat menu responsive dengan html dan css:

Penutup

Dengan menyelesaikan langkah-langkah di atas, Anda telah berhasil membuat sebuah menu navigasi responsif menggunakan HTML dan CSS. Memiliki kemampuan untuk membuat situs web yang responsif adalah keterampilan yang sangat berharga dalam dunia desain web saat ini. Meskipun demikian, jangan ragu untuk terus bereksperimen dengan kode dan menyesuaikannya sesuai kebutuhan proyek Anda. Selamat mencoba dan semoga berhasil dalam perjalanan Anda menuju menjadi seorang pengembang web yang mahir!