CSS : Membuat Dropdown

Halo kawan , pada kali ini saya akan sedikit berbagi tentang pembuatan dropdown dengan CSS.

PENGERTIAN
Dropdown adalah submenu dari menu uama pada navigasi. Dropdown dapat berupa button dan text.

ALAT & BAHAN

PC / Laptop
Sublime text
Browser

Pada kali ini saya akan memberikan contoh dari dropdown text dan dropdown button dengan CSS di dalam html atau inline style. Ok langsung ke contoh pertama.

DROPDOWN TEXT
Dalam dropdown text ini pada sub utama yaitu berupa text. dan yang di turunkan juga berupa text dengan background berwarna. Langusng ke contohnya saja ya kawan :

<!DOCTYPE html>
<html>
<head>
    <title> Dropdown text CSS</title>
    <style type="text/css">
    h1{
        font-family: raleway;
        color: #A52A2A;
        font-style: bold;
        font-size: 50px;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color:     #7FFFD4;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2);
        padding: 12px 16px;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
</head>
<body>
<center>
<h1>Belajar Dropdown text dengan CSS </h1>
<br>
<br>
<div class="dropdown">
<span>Arahkan kursor ke sini! </span>
    <div class="dropdown-content">
        <p> Text muncul </p>
</div>
</div>
</center>
</body>
</html>

Pada saat kursor berada di atas text

DROPDOWN BUTTON
Dropdown button ini dalam menu utamanya yaitu sebuah button yang diturunkan kembali menjadi sub menu. DI bawah ini merupakan contoh dari Dropdwon Button:

<!DOCTYPE html>
<html>
<head>
    <title> Dropdown text CSS</title>
    <style type="text/css">
h1{
        font-family: raleway;
        color: #A52A2A;
        font-style: bold;
        font-size: 50px;
    }

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    font-family: raleway;
    cursor: pointer;
    }

.dropdown {
    position: relative;
    display: inline-block;
    font-family: raleway;
    }

.dropdown-content {
    font-family: raleway;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

    </style>
</head>
<body>
<center>
<h1>Belajar Dropdown Button dengan CSS </h1>
<h3>Arahkan kursor ke Tombol Dopdown di bawah ini ! </h3>
<br>
<br>
<div class="dropdown">
    <button class="dropbtn"> Tombol Dropdown</button>
<div class="dropdown-content">
    <a href="#">Link 1 </a>
    <a href="#">Link 2 </a>
    <a href="#">Link 3 </a>
</div>
</div>

</center>
</body>
</html>

Hasil run saat kursor di atas button

Jadi fungsi dari dropdown ini adalah sebagai penjabaran dari menu utama . Dropdown ini biasamya di gunakan untuk membuat navigasi pada website.