Tutorial Membuat Menu Dropdown dengan Adobe Dreamweaver tanpa Script

1. Buka Program Dreamweaver dengan cara klik Start > Programs > Adobe Dreamweaver12. Pada Menu Insert Pilih Layout > Spry Menu Bar , Jika Menu Insert belum tampil, cara menampilkannya dengan klik Window > Insert Atau dengan tekan tombol pada keyboard Ctrl+F2.23. Dengan Otomatis file akan menyimpan, Cari Folder tempat untuk menyimpan file > rename file/ganti nama file > Save. Contoh : nama foldernya “tutorial” > nama filenya “menu dropdown” > save,lihat gambar dibawah :3

4. Maka akan muncul kotak seperti gambar dibawah ini, ada dua pilihan menu , Horizontal dan Vertical ,biasanya Horizontal digunakan pada bagian sisi atas Website,dan Vertical biasanya digunakan pada bagian sisi samping kiri website.contoh : Vertical > Ok

4

5. Atur nama Item dibagian Properties > Text, Rename Item 1 dengan Home, Item 2 dengan Profil dan Seterusnya, bagian + dan – pada Properties digunakan untuk menambahkan dan menghapus Item yang anda buat.,lihat gambar dibawah.

5

6. Contoh tampilan terlihat Seperti gambar dibawah :

6

7. Agar lebih menarik Font dan Beground kita berikan warna dengan cara pilih menu CSS > CSS Style > All > + SpryMenuBarVertical.css

7

8. Pada bagian + SpryMenuBarVertical.css pilih bagian ul.MenuBarVertical a > atur warna Background-coror contoh warna #996600 > atur warna Color contoh warna #000000

Setelah itu pilih ul. MenuBarVertical a:hover,ul…. > atur warna Background-color contoh warna #996600 > Atur warna Color contoh warna #FFFFFF

Untuk ul.MenuBarVertical a.MenuBarIt…> atur warna Background-color contoh warna #996600 > Atur warna Color contoh warna #FFFFFF

8

9. Tampilan akhir akan terlihat seperti ini :

9

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: