logo ilmugrafis
Home Tutorials Store Blog Fonts Download Gallery
Google Powered Search
+ Silahkan masukkan kata kunci untuk mencari konten website

ilmugrafis » WEB DESAIN - DREAMWEAVER » Session 1  |  » Session 2

Membuat Drop Down Menu Sederhana di Website

Publish: 7 Juni 2012 | Author & Copyright: Johan | Status: FREE tutorial

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

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
android apk IlmuGrafiscom Apk | rss Berlangganan ilmuGrafis.com via Email


author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ : johan felisitas
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi Resmi dari ilmuGrafis.com
Dapatkan hanya di ILMUGRAFIS STORE
HTML CSS
Website HTML CSS

Video Tutorial Cara Pembuatan Website dengan HTML Fundamental dan CSS Style
PHP 1
Pemrograman PHP

Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP
DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop
webmaster collection
Desain Website Dreamweaver 2

Dalam CD Tutorial ini diajarkan cara membuat website secara lebih detail dari seri sebelumnya


ARTsense Dumetschool
Advertisement
PHOTOSHOP
» Photoshop Dasar
» Photoshop Teks Effect
» Photoshop Photo Efek
» Photoshop Alternatif
» Photoshop Plugins
CORELDRAW
» CorelDRAW Dasar
» CorelDRAW Logo
» CorelDRAW Bebas
» CorelDRAW Tools
BLENDER 3D
» Blender Dasar
PHOTOGRAPHY
» Lightroom
VECTORIZE
» Adobe Illustrator
ANIMATION
» Flash
» Swishmax
3D MODELING
» 3dsMAX
» AutoCAD
» Cinema 4D
VIDEO EDITING
» Adobe Premiere
» After Effect
» Pinnacle
WEB DESIGN
» Dreamweaver
» jQuery
PUBLISHING
» InDesign
» Ms. Paint
FREEWARE
» Gimp
» Inkscape
EXTRA
» News
» Artikel
» Liga Grafis
» Hall Of Fame
» Bursa Kerja
» Jasa Grafis
» Donasi
» Buku Tamu
» Kontak
DMCA.com Protection Status
Protected by Copyscape Duplicate Content Software

Banner IlmuGrafis :
banner ilmugrafis indonesia

kode html di atas bebas dan boleh dipasang di blog/website anda
Peta Situs Term of Use web edukasi - ilmugrafis.com Indonesia
© 2008 - 2014 ilmuGrafis.com | RSS | Subscribe | Design and Development by Random Computer
Hak Cipta Dilindungi Undang Undang