Lompat ke konten Lompat ke sidebar Lompat ke footer

Menciptakan Menu Navigasi Dropdown Dengan Css

Membuat Menu Navigasi Dropdown Dengan CSS Membuat Menu Navigasi Dropdown Dengan CSS

Entah kenapa aku ingin menciptakan panduan ihwal edit template, menghiasblog, dan hal-hal lainnya yang berhubungan dengan penampilan antar paras atau user interface. Tetapi yang membuat sukar itu alasannya struktur setiap orang pasti berbeda-beda. Belum tentu juga yang saya tulis pada postingan ini akan berhasil 100% di template masing-masing.

Memang panduan mirip ini banyak beredar di mesin telusur google, namun supaya masih ada yang membutuhkannya.

Cara Membuat Menu Navigasi Dropdown CSS Tanpa Javascript

Menu dropdown akan muncul dikala kita menyorot menu khususnya dan ini mampu dikerjakan hanya menggunakan CSS tanpa javascript. Pasti anggun kan? sebab dengan penggunaan Javascript yang terlampau banyak akan membuat kecepatan loading blog menyusut atau lemot.

1. Kode CSS

Tambahkan kode ini sebelum .

/* Style tombol utama by */ .dropbtn      background-color: #2196f3;     color: white;     padding: 16px;     font-size: 16px;     border: none;     cursor: pointer;   /* Warna background dari tombol utama */ .dropdown:hover .dropbtn      background-color: #006947;   /* Isi dari 
- Memposisikan isi konten dropdown position: relative; display: inline-block; /* Isi konten dropdown (disembunyikan) */ .dropdown-content display: none; position: absolute; background-color: #2f303f; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; /* Link di dalam hidangan dropdown */ .dropdown-content a color:#fff; padding: 12px 16px; text-decoration: none; display: block; /* Warna link */ .dropdown-content a:hover background-color:#008c5f; color: #fff !important; /* Tampilkan isi konten dopdown ketika disorot */ .dropdown:hover .dropdown-content display: block;

2. Kode HTML

HTML adalah instruksi untuk menciptakan menu navigasi dropdown basic. Anda mampu meniadakan atau menambah Menu dan SubMenu. Kode ini mesti disimpan sehabis .

 

Demo/Preview

Anda mampu menyaksikan  Demo/Preview di codepen yang sudah saya sediakan di bawah ini. Bagaimana cara membuat dropdown bertingkat? Itu mampu kalian ulik sendiri.
Mudah sekali bukan? Pada dasarnya Anda harus menyesuaikan sendiri dengan template yang digunakan. Semoga berkhasiat.