Membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan 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.
Membuat Drop Down Menu:
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
membuat 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 */
memasukkan css
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:
css oke
klik browse, lalu ambil "dropdown.css", OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.
code css
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
memasukkan jquery
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>
tambahan javascript
Selesai, dan hasilnya kira - kira seperti ini
drop down menu
Gambar: Drop down menu sederhana
Drop
down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disini.
Anda bisa mengganti menu - menu sesuai keinginan anda dengan mengedit
teks "Menu One" atau "Menu Two" dan Sub menu "Link 1" sampai dengan
"Link 5" pada halaman coding HTML, silahkan dikembangkan sesuai
keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop
Down menu ini bisa anda download disini. Terima kasih, semoga
bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya.
Terima kasih, semoga bermanfaat
0 comments:
Post a Comment