Membuat Menu Dropdown Vertical Responsive dengan HTML, CSS dan Font Awesome
Menu adalah daftar perintah-perintah yang apabila dijalankan akan menjalankan suatu perintah tertentu dari aplikasi. Menu digunakan sebagai alternatif untuk mempercepat pencarian laman pada suatu website.
Dropdown kegunaannya mirip dengan list box. Drop-down atau drop-down list menyediakan pilihan bagi para penggunanya dengan cara melakukan klik pada pilihan dari sebuah daftar yang disediakan.
Drop down menu adalah navigasi yang banyak digunakan pada website, namun dalam pembuatannya drop down menu selain menggunakan CSS juga sering dibantu dengan Javascript. Pada tutorial ini saya akan menunjukkan pembuatan drop down menu menggunakan CSS tanpa bantuan Javascript sama sekali.
Langsung saja ketikkan pada html anda kemudian simpan dengan format menu.html
<html>
<head>
<title> Menu </title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
<body>
<div id="menu">
<ul>
<li><i class="fa fa-home"></i><a href="#">Menu1</a></li>
<li><i class="fa fa-cog"></i><a href="#">Menu2</a></li>
<li><i class="fa fa-arrow-right"></i><a href="#">Menu3</a>
<ul>
<li><i class="fa fa-archive"></i><a href="#">Sub menu 1</a></li>
<li><i class="fa fa-camera"></i><a href="#">Sub Menu 2</a></li>
<li><i class="fa fa-building-o"></i><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><i class="fa fa-phone"></i><a href="#">Menu4</a></li>
<li><i class="fa fa-envelope-o"></i><a href="#">Menu5</a></li>
</ul>
</div>
</body>
</html>
Untuk file css nya, simpan dengan nama menu.css
*{
margin:0;
padding:0;
}
body{
background-color:whitesmoke;
font-family:open sans;
}
i{
color:white;
margin-left:5px;
margin-right:5px;
line-height: 40px;
}
#menu{
margin:5px;
}
#menu ul{
list-style:none;
width:15%;
background-color:#8b9dc3;
}
#menu ul li{
height:40px;
width:100%;
line-height: 30px;
border-bottom: 1px solid white;
}
#menu ul li a{
text-decoration: none;
color:white;
margin-left: 5px;
}
#menu ul li:hover{
background: black;
}
#menu ul li:hover ul{
display: block;
}
#menu ul li ul{
display: none;
background:#8b9dc3;
width:100%;
position:relative;
left:101%;
bottom:75%;
}
#menu ul li ul li{
}
Jika sudah benar nanti hasilnya akan seperti ini :
Download file
0 komentar: