Cara Membuat Menu Vertikal dengan HTML dan CSS

Cara Membuat Menu Vertikal dengan HTML dan CSS – Membuat tampilan website yang menarik dan mudah dinavigasi merupakan salah satu kunci penting dalam pengembangan web. Salah satu elemen yang penting dalam desain web adalah menu navigasi. Menu navigasi yang baik akan membantu pengguna untuk menemukan konten dengan lebih mudah dan cepat.

Dalam tutorial ini, riztekno akan mempelajari cara membuat menu navigasi vertikal menggunakan HTML dan CSS. Anda tidak perlu memiliki pengalaman yang mendalam dalam pemrograman web untuk mengikuti tutorial ini. Kami akan membahas langkah-langkahnya secara rinci dan mudah dipahami, sehingga cocok untuk pemula yang ingin belajar tentang pengembangan web.

Alat yang Harus disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat menu vertikal dengan html dan css:

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

Cara Membuat Menu Vertikal dengan HTML dan CSS

1. Buat Folder Project Menu Vertikal

Langkah pertama adalah membuat folder khusus untuk proyek menu vertikal Anda. Ini akan membantu Anda menjaga file terorganisir dan mudah diakses.

2. Buat Folder “img”

Di dalam folder proyek Anda, buat folder tambahan bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan dalam menu vertikal Anda. Download gambar disini untuk menerapkannya dalam menu vertikal.

3. Buat Sebuah File menu_vertikal.html

Buat file HTML baru dengan nama “menu_vertikal.html“. Ini akan menjadi file utama tempat Anda akan menulis kode HTML untuk menu vertikal Anda. Gunakan editor teks favorit Anda untuk membuat file ini.

Berikut ini file html yang harus Anda tambahkan untuk membuat menu vertikal 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>Menu Vertikal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>Menu</h2>
            <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/">Contact</a></li>
            </ul>
        </div>
        <div class="content">
            <h2>Welcome to Our Website</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
            <img src="img/gambar1.jpg" alt="Gambar" class="gambar">
        </div>
    </div>
</body>
</html>
 

4. Buat File style.css

Setelah membuat file HTML, selanjutnya buatlah file CSS terpisah dengan nama “style.css“. File CSS ini akan digunakan untuk menyesuaikan tampilan menu vertikal Anda.

Artikel Terkait:   Cara Membuat Halaman Login Website dengan HTML dan CSS

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

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

.container {
    display: flex;
}

.sidebar {
    background-color: #333;
    color: #fff;
    width: 200px;
    padding: 20px;
}

.sidebar h2 {
    text-align: center;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    padding: 10px 0;
}

.sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.sidebar ul li a:hover {
    color: #f2f2f2;
}

.content {
    flex: 1;
    padding: 20px;
}

.content h2 {
    color: #333;
}

.content p {
    color: #666;
}

.gambar {
    display: block;
    margin: 20px auto;
    max-width: 100%;
}
 

5. Mengubah Tampilan Menu Vertikal

Untuk dapat mengubah tampilan menu vertikal Anda dapat merubahnya dengan menggunakan file “style.css“. Anda bisa mengubahnya dengan mengedit style sidebar, gambar, dan container.

6. Simpan & Lihat Tampilan

Setelah menyelesaikan langkah-langkah di atas, simpan file Anda dan buka “menu_vertikal.html” menggunakan browser web Anda. Anda sekarang akan melihat menu vertikal yang sederhana tetapi elegan!

Preview hasil

Berikut ini preview hasil nantinya jika Anda berhasil membuat Menu vertikal dengan menggunakan html dan css:

Penutup

Dengan mengikuti panduan ini, Anda telah berhasil membuat menu vertikal menggunakan HTML dan CSS. Jangan ragu untuk bereksperimen dengan gaya dan struktur untuk menciptakan menu vertikal yang sesuai dengan kebutuhan dan preferensi desain Anda.

Dengan memahami dasar-dasar ini, Anda dapat membangun tampilan web yang menarik dan responsif untuk proyek-proyek Anda selanjutnya. Semoga panduan ini bermanfaat bagi Anda yang sedang mempelajari pemrograman web!