tutorial dreamweaver _ web desain _ belajar html & css

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/


2/7



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


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


3/7



ul li.sublinks a:hover

{

color:#000000

background:#FFEFC6

font-weight:normal


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-pc


4/7



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-html


5/7



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


6/7



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


7/7



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

tutorial dreamweaver _ web desain _ belajar html & css

Documents