Fandratt: Membuat Drop Down Menu Dengan Menggunakan HTML Dan CSS

Membuat Drop Down Menu Dengan Menggunakan HTML Dan CSS

Mungkin anda sudah pernah mendengar tentang Drop Down Menu. Tapi, untuk memastikan bahwa anda mengerti apa yang kita akan pelajari dari tutorial ini, silahkan melihat demonya terlebih dahulu:

Yuph! Itulah yang akan kita pelajari untuk tutorial ini.

Kita membutuhkan 2 files. Satu file untuk HTML. Dan yang satu lagi untuk CSS. Jadi, untuk memudahkan anda, copy dan paste saja codes di bawah ini dan nanti anda coba lihat hasilnya pada web browser anda. Ayo kita mulai!

1. style.css
Buat file baru dengan menggunakan notepad atau notepad++ atau code editor softwares lainnya yang anda suka. Setelah itu, simpan file tersebut sebagai "style.css" atau nama lain yang anda suka. CSS styling sangat penting untuk Drop Down Menu yang kita akan buat. Copy dan paste codes dibawah dan save file tersebut.

style.css:

ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    display: block;
    position: relative;
    float: left;
}

li ul {
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
 border-top: none;
    padding: 5px 15px 5px 15px;
    background-color: #0000FF;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover {
 background-color: #666666;
}

li:hover ul {
    display: block;
    position: absolute;
}

li:hover li {
    float: none;
}

li:hover a { 
 background-color: #666666;
}

li:hover li a:hover {
    background-color: #0000FF;
}

2. index.html
Buat file baru dengan menggunakan notepad atau notepad++ atau code editor softwares lainnya yang anda suka. Setelah itu, simpan file tersebut sebagai "index.html" atau nama lain yang anda suka. Copy dan paste codes dibawah dan save file tersebut.

index.html:

<html>
<head>
<title>HTML-CSS-DropDownMenu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Menu 2 Sub Menu 1</a></li>
            <li><a href="#">Menu 2 Sub Menu 2</a></li>
            <li><a href="#">Menu 2 Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Menu 3 Sub Menu 1</a></li>
            <li><a href="#">Menu 3 Sub Menu 2</a></li>
            <li><a href="#">Menu 3 Sub Menu 3</a></li>
            <li><a href="#">Menu 3 Sub Menu 4</a></li>
            <li><a href="#">Menu 3 Sub Menu 5</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

Mudah, kan? Anda dapat edit codes tersebut sesuai keinginan anda. Simpan files tersebut dan view pada web browser anda. Selamat Mencoba!