Pada kesempatan kali ini, Saya akan membagikan tentang
bagaimana Cara Membuat Dropdown menu dengan HTML dan CSS. Menu ini berupa
daftar link yang mana jika kita sorot akan menampilkan menu lagi di bawahnya
(Pull down menu). Untuk pembuatan menu tersebut, ada beberaapa editor HTML /
JavaScript seperti Adobe Dreamweaver, PHP, ataupun yang paling sederhana yaitu
Notepad seperti yang saya gunakan. Untuk lebih jelasnya silahkan lihat
tutorial dibawah ini:
Pertama-tama kita persiapkan dulu aplikasi editor HTML, saya
sendiri menggunakan Notepad biar lebih praktis.
1.
Buka aplikasi Notepad klik Start – Accessories – Notepad
2.
Selanjutnya kita akan membuat style CSS terlebih
dahulu ketikan kode HTML di Bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Dropdown Menu bersama Ajah
Hidayat</title>
<style type="text/css">
body {
background: #eee;
font-size:
0.8em;
}
.utama {
width: 50%;
margin: 50px 25%;
}
.bersih {
clear: both;
}
h1, p {
text-align:
justify;
}
a, a:hover, a:link, a:active {
color: #000;
display: block;
text-decoration:
none;
}
.menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background:
#333;
background:
-moz-linear-gradient(#444, #333);
background:
linear-gradient(#444, #333);
border-radius:
10px;
box-shadow: 0 2px
1px #9c9c9c;
transition: 1s
ease-in-out;
-moz-transition:
1s ease-in-out;
}
.menu li {
float: left;
padding: 0;
position:
relative;
}
.menu a {
float: left;
padding: 10px
20px 7px 20px;
color: #999;
text-transform:
uppercase;
text-decoration:
none;
text-shadow: 0
1px 0 #000;
}
.menu li:hover > a {
color: #eee;
}
.menu li:hover > ul {
display: block;
}
.menu:after {
visibility:
hidden;
display: block;
font-size: 0;
content: "
";
clear: both;
height: 0;
}
.menu ul {
list-style:
none;
margin: 0;
padding: 0;
display: none;
position:
absolute;
top: 35px;
left: 0;
z-index: 9999;
background: #333;
background:
-moz-linear-gradient(#444, #333);
background:
linear-gradient(#444, #333);
border-radius:
10px;
box-shadow: 0
2px 1px #9c9c9c;
}
.menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px
0 #111, 0 2px 0 #777;
}
.menu ul a {
padding: 10px;
height: auto;
display: block;
white-space:
nowrap;
float: none;
text-transform:
none;
}
.menu ul a:hover {
background:
#0186ba;
background:
-moz-linear-gradient(#04acec, #0186ba);
background:
linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child a {
border-radius:
5px 5px 0 0;
}
.menu ul li:first-child a:after {
content: "
";
position:
absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px
solid transparent;
border-right: 5px
solid transparent;
border-bottom:
8px solid #333;
}
.menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
.menu ul li:last-child {
box-shadow: none;
}
.menu ul li:last-child a {
border-radius:
0 0 5px 5px;
}
</style>
</head>
3.
Bagian
style / CSS sudah kita buat, namun jangan dulu di save, karena kita akan
menambahkan bagian <Body> di bawah kode CSS tadi. Selanjutnya
ketikan kode HTML dibawah ini untuk bagian body:
<body>
<article
class="Utama">
<h1>Tutorial
Membuat Dropdown menu bersama Ajah Hidayat</h1>
<ul
class="menu">
<li><a
href="#">BERANDA</a></li>
<li><a
href=#">Layanan</a>
<ul>
<li><a href="#">WEB
DESAIN</a></li>
<li><a href="#">Dekstop
Programing</a></li>
</ul>
</li>
<li><a
href="#">Profile</a></li>
<li><a
href="#">Account</a></li>
<li><a
href="#">Log Out</a></li>
</ul>
<section
class="bersih"> </section>
<p><a
href="http:smapgrinaringgul.sch.id/">Masuk ke halaman
web</a></p>
</article>
</body>
</html>
4.
Semuanya sudah selesai, langkah selanjutnya
tinggal simpan kode tersebut dalam format html dokumen dengan cara klik menu
file pada notepad, kemudian beri nama file “Tutorial-menu.html”. perlu diperhatikan bahwa file notepad
secara default adalah “.txt” maka
anda rubah menjadi “.html” seperti
pada nama file yang saya tandai dengan huruf merah di atas.
5.
Selanjutnya buka file yang telah disimpan tadi
dengan mozilla firefox atau browser lainnya.
Maka hasilnya akan tampak seperti pada
gambar di bawah ini:
Untuk lebih jelasnya silahkan lihat video di bawah ini:
Sekian dari saya, mohon maaf apabila ada
kesalahan. Terima kasih dan sampai jumpa.
Baca juga :
- CARA MEMBUAT KARTUN ANGRY BIRD DENGAN COREL DRAW
- CARA MEMBUAT BLOG MENGGUNAKAN BLOGSPOT
- CARA MEMBUAT UNDANGAN SEDERHANA
- CARA MEMBUAT BROSUR SEDERHANA
- CARA MEMBUAT DROPDOWN MENU MENGUNAKAN HTML
- CARA INSTALASI JARINGAN LAN
- MACAM-MACAM PALLETE PADA ADOBE PHOTOSHOP
- PENGERTIAN INTERNET SERVICE PROVIDER
- PENGERTIAN DAN MACAM-MACAM TOPOLOGI JARINGAN KOMPUTER
