Dropdown Menu merupakan menu yang bila kita sorot dengan mouse
maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak
sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website
sampai menghemat space/ruang di websitenya karena
dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website
kita.
Ok, mari kita mencoba membuatnya:
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)
(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
{
list-style:none;
padding:0px;
margin:0px
}
ul li
{
display:inline;
float:left;
}
{
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;
}
{
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;
}
{
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;
}
{
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;
}
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
ul li.sublinks
{
display:none;
}
{
display:none;
}
/* CSS drop down menu sederhana end
*/
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:
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 -->
<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 -->
<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>
4. Tambahkan JQuery Script, wow apa lagi ini
ya? tenang... lebih jelasnya klik Penjelasan jQuery
tulis codenya, Letakkan di bawah tag Title
setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery
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();
$('.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>
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 di bawah ini
Cukup sekian semoga bermanfaat
No comments:
Post a Comment