Cara Membuat Menu Dropdown Download Images HTML CSS

Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite dumetschool. Pada kesempatan kali ini kita akan membahas tentang Cara Membuat Menu Dropdown Download Images HTML CSS. Dipembahasan ini untuk syntax sama dengan artikel saya sebelumnya tentang membuat fitur download. Namun berbeda, disini saya akan combine dengan menu dropdown.

Tanpa penjelasan panjang lebar lagi langsung saja ya teman-teman kita mulai pembahasan tentang Cara Membuat Menu Dropdown Download Images HTML CSS. Langkah pertama buatlah sebuah folder terlebih dahulu lalu siapkan file html serta file-file gambar yang teman-teman miliki. Jika sudah maka hasilnya akan menjadi seperti dibawah ini :

Jika sudah mempersiapkan gambar dan file html seperti pada gambar diatas maka langkah berikutnya, teman-teman buka file html nya lalu ketikan kode HTML seperti pada contoh dibawah ini :

 <menu>
		<ul>
			<li><a href="">File Gambar</a>
				<ul>
					<li>
						<p>1. 
							<img src="master1.png" width="50" height="50" alt=""> || 
							<a href="master1.png" download>Download</a>
						</p>
						<hr>
					</li>
					<li><p>2. 
							<img src="master2.png" width="50" height="50" alt=""> ||
							<a href="master2.png" download>Download</a>
						</p>
						<hr>
					</li>
					<li><p>3. 
							<img src="master3.png" width="50" height="50" alt=""> || 
							<a href="master3.png" download>Download</a>
						</p>
						<hr>
					</li>
					<li><p>4. 
							<img src="master4.png" width="50" height="50" alt=""> || 
							<a href="master4.png" download>Download</a>
						</p>
						<hr>
					</li>
				</ul>
			</li>
		</ul>
	</menu>

Jika sudah dengan kode HTML nya, maka langkah berikutnya teman-teman tambahkan style atau kode CSS nya seperti pada contoh dibawah ini :

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

Oke jika sudah kode HTML serta CSS nya, langkah terakhir silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada contoh dibawah ini :

Sangat mudah ya teman-teman, dan diatas adalah tutorial sederhana dalam Cara Membuat Menu Dropdown Download Images HTML CSS. Dan silahkan teman-teman explore lagi lebih dalam untuk fitur downloadnya atau membuatnya seperti dinamis  J.

Oke kalau begitu cukup sampai disini dahulu pembahasan kita kali ini tentang Cara Membuat Menu Dropdown Download Images HTML CSS. Semoga dapat sangat amat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih