cara membuat dropdown menu hover css hover keren animasi css html pemprograman website web source code sintaks css dropdown menu

Halo guys, kali ini admin bakal kasih source code atau sintaks animasi CSS 'dropdown menu', kali ini gak perlu pake Javascript kita cuman bakal pake CSS dan HTML tapi hasilnya keren bangettt.

efek ini biasanya kalian jumpai ketika kursor atau posisi mouse berada di element tertentu pada website dan nanti bakal menampilkan sebuah informasi tambahan yang ada didalam suatu kontener.

Langsung aja supaya kalian gak bingung, admin udah bikin versi sederhananya yang bisa kalian Copas kodenya dan kalian kembangin. hasil yang admin bikin kayak gini :

Source Code HTML :

<div class="container">
        Cara membuat drop Hover byZulfi
        <a class="boxluar">untuk info lebih lanjut
           <div class="boxdalam">
                <p>Hai semua</p>
            </div>
        </a>
    </div>

Source Code CSS :

Kalian bisa simpan CSS nya didalam HTML atau gunakan secara terpisah. inget kalo dipisah jangan lupa dihubungkan, kalau gk dihubungkan ya ibarat lu sama dia yang saling suka, tapi diem-dieman. alias gak akan nyambung. hahaha

.container {
    width: 100%;
    padding: 30px 40%;
    background-color: yellowgreen;
}
.boxdalam {
    position: absolute;
    left: 35%;
    width: 30%;
    padding: 20px;
    background-color: rgb(143, 143, 143);
    display: none;
    border-radius: 20px;
}
.boxluar {
    color   : rgb(240, 240, 240);
    cursor  : pointer;
}
.boxluar p {
    color: rgb(255, 255, 255);
}
.boxluar:hover .boxdalam {
    display: block;
}

Admin harap kalian bisa faham dan bisa kembangin kode diatas jadi lebih keren tentunya. Dukung terus blog ini dan kunjungi artikel lainnya.

Buat kamu yang lagi belajar java script jangan lupa buat baca materi looping dengan javascript ya.

Babaaaaayy

Source Code - Membuat Dropdown Hover CSS & HTML Pemprograman web