Upload
ahmad-ashari
View
219
Download
0
Embed Size (px)
Citation preview
7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
1/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
Home Tutorials Fonts iStore Contact Search
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 Dreamweaverkali ini saya akan mencoba memberikan penjelasanbagaimana 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 Menumerupakan 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
caraini bisa diaplikasikan untuk semua dreamweaver
(start >> all program >> Dreamweaver)
2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >> Css
tulis Kode CSS di bawah ini
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
FOTOGRAFI
Lightroom
VECTOR
Adobe I llustrator
ANIMASI
Flash
Swishmax
3D MODELING
3dsMAX
AutoCAD
Cinema 4D
VIDEO EDITING
Adobe P remiere
After E ffect
Pinnacle
WEB DESIGN
Dreamweaver
jQuery
PUBLISHING
InDesign
Ms. Paint
FREEWARE
Gimp
Inkscape
http://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/flash.phphttp://www.ilmugrafis.com/ex-illuistrator_vector.phphttp://www.ilmugrafis.com/lightroom.phphttp://www.ilmugrafis.com/anggota.php?page=johanhttp://www.ilmugrafis.com/dreamweaver.php?page=membuat-drop-down-menu-sederhana-websitehttp://www.ilmugrafis.com/freeware-inkscape.phphttp://www.ilmugrafis.com/gimp.phphttp://www.ilmugrafis.com/microsoft_paint.phphttp://www.ilmugrafis.com/indesign.phphttp://www.ilmugrafis.com/web-jquery.phphttp://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/pinnacle.phphttp://www.ilmugrafis.com/after-effect.phphttp://www.ilmugrafis.com/adobe-premiere.phphttp://www.ilmugrafis.com/cinema4d.phphttp://www.ilmugrafis.com/autocad.phphttp://www.ilmugrafis.com/3dmax-studio.phphttp://www.ilmugrafis.com/swishmax.phphttp://www.ilmugrafis.com/flash.phphttp://www.ilmugrafis.com/ex-illuistrator_vector.phphttp://www.ilmugrafis.com/lightroom.phphttp://www.ilmugrafis.com/blender-dasar.phphttp://www.ilmugrafis.com/coreldraw_download_tools.phphttp://www.ilmugrafis.com/coreldraw_free.phphttp://www.ilmugrafis.com/coreldraw_logo.phphttp://www.ilmugrafis.com/coreldraw_dasar.phphttp://www.ilmugrafis.com/photoshop_download_tools.phphttp://www.ilmugrafis.com/photoshop_alternatif.phphttp://www.ilmugrafis.com/photoshop_foto.phphttp://www.ilmugrafis.com/photoshop_teks.phphttp://www.ilmugrafis.com/photoshop_dasar.phphttp://www.ilmugrafis.com/http://www.ilmugrafis.com/dreamweaver.php?page=membuat-drop-down-menu-sederhana-websitehttp://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/anggota.php?page=johanhttp://www.ilmugrafis.com/dreamweaver.php?page=membuat-drop-down-menu-sederhana-websitehttp://www.ilmugrafis.com/dreamweaver2.phphttp://www.ilmugrafis.com/dreamweaver1.phphttp://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/index.phphttp://www.ilmugrafis.com/kontak.phphttp://www.ilmugrafis.net/http://www.ilmugrafis.com/fonts.phphttp://www.ilmugrafis.com/tutorial.phphttp://www.ilmugrafis.com/7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
2/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
/* 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:nonedisplay: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
}
ARTS
News
Artikel
Gallery
Jasa Desain
Donasi
FRIENDS
Photoshop Desain
http://photoshopdesain.com/http://www.ilmugrafis.com/donation.phphttp://www.ilmugrafis.com/services-jasa-desain.phphttp://www.ilmugrafis.com/gallery.phphttp://www.ilmugrafis.com/artikel.phphttp://www.ilmugrafis.com/news.php7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
3/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
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"
3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilih format
PHP butuh bantuan Severuntuk mengoprasikannya
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 One
http://www.ilmugrafis.com/dreamweaver.php?page=membuat-server-local-laptop-pc7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
4/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
Link 1
Link 2
Link 3
Link 4
Link 5
Menu Two
Link 1
Link 2
Link 3
Link 4
Link 5
copy dan paste code di atas di bagian antara .... , 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
tulis codenya, Letakkan di bawah tag Title
setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery
$(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',
http://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-websitehttp://www.ilmugrafis.com/dreamweaver.php?page=belajar-membuat-website-basic-html7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
5/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
left: $(this).offset().left + 'px',
zIndex:1000
})
submenu.stop().slideDown(300)
submenu.mouseleave(function(){
$(this).slideUp(300)
})
})
})
ini gambarnya
Selesai, dan hasilnya kira - kira seperti ini
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 menuini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran
maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat
Share the URL of this Tutorial in IM, Email or post in forums
http://www.mediafire.com/?u2i6df7q8qrxcijhttp://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/dreamweaver10-contoh-dropdown-menu.html7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
6/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
Share URL http://www.ilmugrafis.com/dreamweaver.php?page=membuatdropdownmenusederhanawebsite
* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
Launcher Web Ilmugrafis
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 felis itas
Facebook : facebook.com/tomuramasterEmail : johan.felisitas[at]gmail[dot]com
Rekomendasi Resmi dari ilmuGrafis.com
Dapatkan hanya di ILMUGRAFIS STORE
Website HTML CSS
Video Tutorial Cara Pembuatan Website dengan
HTML Fundamental dan CSS Style
Pemrograman PHP
Video Tutorial Cara Membuat dan Memprogram
Website Dinamis dengan PHP
Desain Website Dreamweaver
CD Tutorial ini berisi tips dan trik desain website
dengan Dreamweaver dan Photoshop
Desain Website Dreamweaver 2
Dalam CD Tutorial ini diajarkan cara membuat
website secara lebih detail dari seri sebelumnya
http://www.ilmugrafis.net/dvd-webmaster.phphttp://www.ilmugrafis.net/index.php?page=video-tutorial-webdesain-dreamweaverhttp://www.ilmugrafis.net/index.php?page=video-tutorial-php-web-programminghttp://www.ilmugrafis.net/index.php?page=video-tutorial-xhtml-csshttp://www.ilmugrafis.net/http://www.facebook.com/tomuramasterhttps://profiles.google.com/116086853072235757263https://twitter.com/johanfelisitashttp://www.ilmugrafis.org/ilmugrafis-launcher.php7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS
7/7
20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS
http://www.i lm ugr afi s.com /dr eam weaver.php?page= mem buat- dr op- dow n- menu- seder hana- websi te
[adv.] Supported by
DumetSchool.com
Peta Situs | Term of Use web edukasi - ilmugrafis.c om Indones
Copyright 2016 ilmuGrafis, All Rights Reserved. | RSS| Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
http://extremetracking.com/open?login=igrafis9http://www.dmca.com/Protection/Status.aspx?ID=af30df46-48ae-437d-9dfa-fc7099dcf682http://feeds.feedburner.com/ilmugrafisindonesiahttp://www.ilmugrafis.com/rss.xmlhttp://www.ilmugrafis.com/services.php?page=term-of-use-ilmugrafishttp://www.ilmugrafis.com/services.php?page=sitemap-ilmugrafishttp://www.dumetschool.com/