Membuat Menu dengan HTML dan CSS

Membuat Menu dengan HTML dan CSS

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat menu dengan HTML dan CSS:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Menu</title>
    <style>
        /* Gaya dasar untuk menu */
        ul.menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        /* Gaya untuk setiap item menu */
        ul.menu li {
            float: left;
        }

        /* Gaya untuk tautan di dalam item menu */
        ul.menu li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* Gaya saat tautan di dalam item menu dihover */
        ul.menu li a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#home">Beranda</a></li>
        <li><a href="#about">Tentang</a></li>
        <li><a href="#services">Layanan</a></li>
        <li><a href="#contact">Kontak</a></li>
    </ul>
</body>
</html>
HTML

Output:

See the Pen Membuat Menu dengan HTML dan CSS by WebbizID (@De-Orchids) on CodePen.

Anda dapat menyalin kode di atas ke dalam file HTML dan menjalankannya di browser untuk melihat hasilnya. Kode tersebut akan menghasilkan menu horizontal dengan tautan yang dapat diklik.

Anda dapat menyesuaikan gaya menu sesuai dengan kebutuhan Anda dengan mengubah properti CSS yang ada dalam kode.

Selamat mencoba!

Artikel Terbaru ⭐