SEO.Traffic.Blogging dan Modifikasi Template.Review

Membuat DropDown Menu Sederhana di Website

by afrilla adhitya , at 00.18 , has 3 komentar
Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan bagaimana cara membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon web developer maupun web designer yang singgah di website ilmugrafis. Sedikit penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu).

Ok, mari kita mencoba membuatnya:


  • 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)


  • 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"



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


  • 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



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>

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
afrilla adhitya
About
Membuat DropDown Menu Sederhana di Website - written by afrilla adhitya , published at 00.18, categorized as Tutorial Dreamwear . And has 3 komentar
3 komentar Add a comment
mantap gan
apakah ni pke dreamweaver gan...??
Reply Delete
Keren Sobat, kunjungan balik sukses ^.
Reply Delete
@maservin ervin iya btul,thanks sudah berkunjung ke blog saya yang sederhana ini
@rizki'Cahya permana Oke siap sob
Reply Delete

1. Jangan Jadi SILENT READER ya Sob. :)
2. Berkomentarlah sesuai dengan kewajaran dan bersifat membangun (NO SARA, NO PORN*)
3. Tidak Berisi Singgungan Terhadap Pihak Lain
4. Hindari Penggunaan Anchor Link (Link Aktif) seperti < href=namadomain> karena komentarnya tidak akan di moderasi
5. Gunakan Fasilitas Nama/Alamat URL sebagai alternatif Link Anchor
6. Blog ini tidak menggunakan vertifikasi kata demi kenyamanaan anda

Bck
Cancel Reply
Copyright ©2013 Adhit_Megazine|Blog'S
Theme designed by Damzaky - Author By Afrilla Chitra Adhitya
Powered by Blogger