Membuat Drop Down Menu Sederhana di Website
Artikel pendidikan - Kategori Pemrograman Website | Diposting pada : 08-11-2014 12:11:58
oleh Administrator
Share this article on

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

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 */

 

wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver,
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>

ini gambarnya
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.

Polling Bulan Ini

Bagaimana menurut Anda tampilan Website Amik Lembah Dempo ini?

Sangat Bagus
Bagus
Cukup Bagus
Kurang Bagus

HASIL
Link Terkait














Statistik Pengunjung
  • Dikunjungi oleh : 56644 user
  • IP address : 54.226.58.177
  • OS : Unknown Platform
  • Browser :
  • Kantor Pusat Administrasi

    AMIK Lembah Dempo Jl. Sidik Adim No 98 Air Laga Pagar Gading, Pagar Alam
    Kode-Pos : 31511
    Telp : 0730-623259
    Fax : 0730-623259
    Email : ldempo@yahoo.com

    Berita Kegiatan

    Direktur AMIK Lembah Dempo Dilantik Menjadi Ketua IAII DPW Sumsel

    23-08-2016 22:10:08 | Kategori Kegiatan | oleh Administrator

    Sabtu (20/8), bertempat di Universitas Bina Dharma Palembang diadakan pelantikan Dewan Pengurus Wilayah (DPW.....

    STIE AMIK LEMBAH DEMPO LANTIK PEJABAT STRUKTURAL, STAFF DAN BEM 2015

    06-02-2015 18:18:33 | Kategori Kegiatan | oleh Administrator

    Rabu (04/02), bertempat di Graha Lembah Dempo, dilaksanakan Acara Pelantikan dan Pengambilan Sumpah Jabatan ke.....

    Berita Kemahasiswaan

    SELAMAT, TIM FUTSAL LEMBAH DEMPO RAIH JUARA III

    29-12-2014 09:06:24 | Kategori Kemahasiswaan | oleh Administrator

    Selamat, satu kata yang pas dilayangkan untuk Tim Futsal Lembah Dempo yang sudah berjuang habis-habisan untuk .....

    OPDIK MAHASISWA BARU BERSAMA ESQ & LEADERSHIP TRAINING

    13-10-2014 09:28:31 | Kategori Kemahasiswaan | oleh Administrator

    Sebagai Perguruan Tinggi Swasta pertama di Pagaralam, STIE AMIK  Lembah Dempo senantias.....

    Berita Akademik

    MAHASISWA PKL AMIK LEMBAH DEMPO MELAKUKAN BAKTI SOSIAL DI PANTI ASUHAN RUMAH BERBAGI

    17-04-2017 08:37:15 | Kategori Akademik | oleh Administrator

    Mahasiwa yang mengikuti Praktek Kerja Lapangan (PKL) Angkatan XV AMIK Lembah Dempo, Kamis (14/4) menggelar pengabdian kepada masyarakat k.....

    Pengabdian Pada Masyarakat : Mahasiswa PKL Angkatan XV Sosialisasikan Pemanfaatan Teknologi Informasi

    17-04-2017 08:37:15 | Kategori Akademik | oleh Administrator

    Sebagai mahasiswa Program Studi Manajemen Informatika AMIK Lembah Dempo yang paham tentang teknologi informasi.....

    Copyright © 2013 AMIK Lembah Dempo
    Jl. Sidik Adim No 98 Air Laga Pagar Gading, Pagar Alam 31511

    Powered By VinNa-Tech