Cara Membuat Menu Dropdown Download Images HTML CSS

Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite Source Code Aplikasi. Di kesempatan kali ini kita akan membahas mengenai Cara Membangun Fitur Dropdown Unduh Images HTML CSS. Dipembahasan ini bagi syntax sama dengan artikel saya sebelumnya mengenai membangun fitur download. Namun berbeda, disini saya akan combine dengan fitur dropdown.

Tanpa penjelasan panjang lebar lagi seketika saja ya teman-teman kita mulai pembahasan mengenai Cara Membangun Fitur Dropdown Unduh Images HTML CSS. Langkah pertama-tama buatlah sebuah folder terlebih dahulu lalu siapkan file html serta file-file gambar yang teman-teman miliki. Jikalau telah karenanya hasilnya akan menjadi seperti dibawah ini :

Jikalau telah mempersiapkan gambar dan file html seperti di gambar diatas karenanya langkah berikutnya, teman-teman buka file html nya lalu ketikan kode HTML seperti di contoh dibawah ini :

 <fitur>
<ul>
<li><a href=>File Gambar</a>
<ul>
<li>
<p>1. 
<img src=master1.png width=50 height=50 alt= bertemu lagi dengan saya Rizal dan masih diwebsite Source Code Aplikasi Cara Membangun Fitur Dropdown Unduh Images HTML CSS> || 
<a href=master1.png unduh>Unduh</a>
</p>
<hr>
</li>
<li><p>2. 
<img src=master2.png width=50 height=50 alt= bertemu lagi dengan saya Rizal dan masih diwebsite Source Code Aplikasi Cara Membangun Fitur Dropdown Unduh Images HTML CSS> ||
<a href=master2.png unduh>Unduh</a>
</p>
<hr>
</li>
<li><p>3. 
<img src=master3.png width=50 height=50 alt= bertemu lagi dengan saya Rizal dan masih diwebsite Source Code Aplikasi Cara Membangun Fitur Dropdown Unduh Images HTML CSS> || 
<a href=master3.png unduh>Unduh</a>
</p>
<hr>
</li>
<li><p>4. 
<img src=master4.png width=50 height=50 alt= bertemu lagi dengan saya Rizal dan masih diwebsite Source Code Aplikasi Cara Membangun Fitur Dropdown Unduh Images HTML CSS> || 
<a href=master4.png unduh>Unduh</a>
</p>
<hr>
</li>
</ul>
</li>
</ul>
</fitur>

Jikalau telah dengan kode HTML nya, karenanya langkah berikutnya teman-teman tambahkan style atau kode CSS nya seperti di contoh dibawah ini :

*{margin:0; padding: 0}
fitur{margin:20px auto;width: 600px;height:50px;}
fitur ul{list-style:none;}
fitur ul li{float: left;width: 20%;line-height: 50px;text-align:center;position: relative;top:0;left: 0}
fitur ul li a{background:#34495e;color:white;display: block;text-decoration: none;}
fitur ul li a:hover{background:#95a5a6;}
fitur ul ul {display: none;margin-top: 2px;}
fitur ul li:hover ul {display: block;}
fitur ul ul li {width: 160px;background: lightgreen;}
fitur ul ul li p {background: grey;}
fitur ul ul li a{display: inline;background: none;}
fitur ul ul li a:hover {background:none;color:#c0392b;}
fitur ul ul li img{position: relative;top: 15px;}

Oke jikalau telah kode HTML serta CSS nya, langkah terakhir silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Jikalau benar karenanya hasilnya akan menjadi seperti di contoh dibawah ini :

Betul-betul gampang ya teman-teman, dan diatas yakni panduan sederhana pada Cara Membangun Fitur Dropdown Unduh Images HTML CSS. Dan silahkan teman-teman explore lagi lebih pada bagi fitur downloadnya atau membuatnya seperti dinamis  J.

Oke kalau demikian itu lumayan hingga disini dahulu pembahasan kita kali ini mengenai Cara Membangun Fitur Dropdown Unduh Images HTML CSS. Semoga dapat benar-benar amat bermanfaat dan hingga bertemu dipembahasan berikutnya.

Terimakasih

Sumber https://kursuswebsite.org