1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8
karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver
CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk
semua dreamweaver
(start >> all program >> Dreamweaver)
2. buat CSS file, caranya. Klik
File >> New >> Tab
General >> Basic Page >> Css
tulis Kode CSS di bawah ini
/* CSS untuk drop down menu dimulai */
ul
{
list-style:none;
padding:0px;
margin:0px
}
ul li
{
display:inline;
float:left;
}
ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
ul li.sublinks
{
display:none;
}
/* CSS drop down menu sederhana end */ |
wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru
anda buat dengan dreamweaver,
save dan beri nama
"dropdown.css"
3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena
jika memilih
format PHP butuh bantuan Sever
untuk mengoprasikannya
caranya mirip css tadi, cuma urutannya
File >> New
>> Basic Page >> Html >> Ok
sekarang panggil css yang kita buat, caranya:
klik browse, lalu ambil "dropdown.css", OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di
halaman html kita.
itu artinya style (CSS) yang kita buat telah masuk ke halaman html
4. Masukkan kode ini ke code html kita. pilih code
<!-- Menu Pertama Dimulai -->
<ul>
<li><a href="#" class="dropdown">Menu
One</a></li>
<li class="sublinks">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</li>
</ul>
<!-- Menu Pertama Selesai -->
<!-- Menu Kedua Dimulai -->
<ul>
<li><a href="#" class="dropdown">Menu
Two</a></li>
<li class="sublinks">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</li>
</ul>
<!-- Menu Kedua Selesai -->
<!-- dan seterusnya --> |
copy dan paste code di atas di bagian antara <body> ....
</body> , bagi yang belum mengerti tag seperti ini lihat tutorial
BELAJAR WEBSITE HTML
4. Tambahkan
JQuery Script, wow apa lagi ini ya?
tenang... lebih jelasnya klik
Pengenalan JQuery Website
tulis codenya, Letakkan di bawah tag
Title
setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery
<script type="text/javascript">
$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script> |
ini gambarnya
Selesai, dan hasilnya kira - kira seperti ini
Gambar:
Drop down menu sederhana
