Cara Mudah Membuat Menu Dropdown
Dalam pembuatan menu pada sebuah website ada banyak model, salah satu nya adalah menu Dropdown. Menu dropdown ini adalah menu navigasi yang sangat populer digunakan oleh pembuat web, dalam pembuatan menu dropdown kita dapat menggunakan HTML dan CSS, cara pembuatan nya sangat mudah, pada dasar nya menu dropdown di buat dengan HTML dari tag ordered list atau unordered list, yang kemudian di olah dengan sentuhan CSS sehingga menjadi sangat berbeda dari yang asal nya hanya list. Berikut ini adalah contoh menu dropdown yang akan kita buat :
 |
| Hasil dari tutorial Cara mudah membuat menu dropdown |
Gambar diatas hasil dari tutorial yang kita buat ini, gimana teman-teman tertarik untuk belajar dan membuat nyan.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Menu dengan HTML dan CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="">Konsep Dasar</a></li>
<li>
<a href="">Website Programing</a>
<ul>
<li><a href="">HTML & CSS</a></li>
<li><a href="">Pemograman PHP</a></li>
<li><a href="">Pemograman Javascript</a></li>
</ul>
</li>
<li><a href="">Web Desain</a></li>
<li><a href="">Database</a></li>
<li><a href="">Boosttrap</a></li>
</ul>
</nav>
</body>
</html>
Simpan file html tersebut dengan index.html atau terserah anda dan jalankan pada browser untuk melihat hasil pembuatan list menu tersebut.
 |
| Hasil list HTML sebelum penambahan CSS |
Nah jika dilihat dari hasil pada browser menu tersebut sudah tersedia akan tetapi tampilan nya kurang menarik, untuk mempercatik tampilan dari menu tersebut kita dapat menggunakan CSS.
<style type="text/css">
nav ul{
list-style:none;
width:900px;
height:50px;
}
nav ul a{
text-decoration:none;
}
nav ul li ul{
position: relative;
margin-left: -27%;
padding-top: 16px;
width: 150px;
visibility: hidden;
}
nav ul li:hover ul{
visibility:visible;
}
nav ul li:hover{
background:#16A085;
border-right: 4px solid #b0ca93;
}
nav ul li{
float:left;
width:150px;
height:35px;
background:#075d55;
text-align:center;
padding-top:15px;
}
nav a{
color:#fff;
font-family:sans-serif;
font-size:11pt;
}
</style>
nav ul{
list-style:none;
width:900px;
height:50px;
}
nav ul a{
text-decoration:none;
}
nav ul li ul{
position: relative;
margin-left: -27%;
padding-top: 16px;
width: 150px;
visibility: hidden;
}
nav ul li:hover ul{
visibility:visible;
}
nav ul li:hover{
background:#16A085;
border-right: 4px solid #b0ca93;
}
nav ul li{
float:left;
width:150px;
height:35px;
background:#075d55;
text-align:center;
padding-top:15px;
}
nav a{
color:#fff;
font-family:sans-serif;
font-size:11pt;
}
</style>
Untuk menggabungkan file css diatas kedalam html, kita dapat menggunakan cara Internal Style. Silahkan teman-teman copy code css diatas dan tempatkan pada file html yang telah teman-teman buat, letakkan diantara pembuka tag <head> dan penutup tag </head>, kemudian jalankan pada web browser. Sekian tutorial Cara Mudah Membuat Menu Dropdown ini semoga dapat membantu teman-teman dalam mempelajari dan membuat website.
izin coba gan, ane pengen bikin nmenu kaya gini. makasih udah mau share
ReplyDeleteSangat bermanfaat, saya juga pakai ini
ReplyDelete