Cara Membuat Menu Dropdown Simpel, Keren dan Mudah
Assalamu'alaikum Wr.Wb, Selamat Malam Para Blogger, bertemu lagi dengan saya dalam Tutorial Membuat Menu Dropdown, sesuai dengan permintaan Teman saya, saya akan menjelaskan bagaimana cara membuat Menu Dropdown atau yang sering kita ketahui Menu Jika kursor Mengarah Pada Satu menu, akan muncul menu lain.
"Iya Bagaimana Cara Bikinnya Gan...?, Ane masih bingung gan..."
Oke Tenang saja, kalian akan menemukan solusinya di dalam tutorial Dunia Programming, semua masalah yang kalian alami akan teratasi di Dalam Blog Dunia Programming.
Yap, Langsung Saja Simak Tutorial Dibawah ini.
Oke berikut Tampilan Menu Dropdown Sederhana Yang sudah saya rancang :
 |
| Tampilan Menu Dropdown Versi Dunia Programming |
Oke, Untuk Membuat menu tersebut yang kita perlukan adalah Script HTML dan CSS, Oke Langkah pertaman yaitu buat Script HTML dengan nama file index.html
Berikut Script HTMLnya :
HTML
<!doctype html>
<html>
<head>
<title>Dunia Programming</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Visi dan Misi</a></li>
<li><a href="#">Struktur Organisasi</a></li>
</ul>
</li>
<li><a href="#">Kontak</a>
<ul>
<li><a href="#">Kritik & Saran</a></li>
<li><a href="#">Keluhan</a></li>
</ul>
</li>
<li><a href="#">Info Buku</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">Question</a></li>
</ul>
<div>
</body>
</html>
<html>
<head>
<title>Dunia Programming</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Visi dan Misi</a></li>
<li><a href="#">Struktur Organisasi</a></li>
</ul>
</li>
<li><a href="#">Kontak</a>
<ul>
<li><a href="#">Kritik & Saran</a></li>
<li><a href="#">Keluhan</a></li>
</ul>
</li>
<li><a href="#">Info Buku</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">Question</a></li>
</ul>
<div>
</body>
</html>
Copy pastekan script diatas pada Notepad++ atau SublimeText. Setelah itu Kita Buat Script CSSnya.
Berikut Script CSSnya :
CSS
body {
background: #000000;
}
#menu {
position: relative;
width: 100%;
height: 40px;
background: #ff0033;
border: 5px solid #000000;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
color: #3300ff;
padding: 10px;
border-right: 1px dashed #000000;
display: block;
text-decoration: none;
font-weight: bold;
}
#menu ul li a:hover {
background: #ffff00;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
position: absolute;
top: 41px;
left: 0;
}
#menu ul li:hover ul li a {
display: block;
background: #ff0000;
color: #ffffff;
width: 130px;
border-left: 1px solid #000000;
}
background: #000000;
}
#menu {
position: relative;
width: 100%;
height: 40px;
background: #ff0033;
border: 5px solid #000000;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
color: #3300ff;
padding: 10px;
border-right: 1px dashed #000000;
display: block;
text-decoration: none;
font-weight: bold;
}
#menu ul li a:hover {
background: #ffff00;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
position: absolute;
top: 41px;
left: 0;
}
#menu ul li:hover ul li a {
display: block;
background: #ff0000;
color: #ffffff;
width: 130px;
border-left: 1px solid #000000;
}
Copy Patekan script CSS diatas, Simpan dengan nama style.css, setelah semuanya selesai dicopy, Simpan Semua script yang sudah kalian buat dalam satu folder, ingat...!!!, Harus satu folder, jika tidak, maka akan terjadi error
Sekian tutorial dari saya,Jika terjadi kesalahan dalam penulisan script, kalian bisa berkomentar pada bawah artikel ini, Sekian Semoga Bermanfaat, Terimakasih.
Belum ada Komentar untuk "Cara Membuat Menu Dropdown Simpel, Keren dan Mudah"
Posting Komentar