Tutorial Membuat Dropdown Menu.pdf - Google Drive

Tutorial Membuat Dropdown Menu (Spry Menu Bar Horizontal) Menggunakan Adobe Dreamweaver Tampilan halaman web yang akan dibuat:

Berikut ini adalah source code dasar dalam tutorial ini: Drop Down Menu Tutorial: Java Web Media Java Web Media

Your web solution

Ini Navigasi Java Web Media, Web Design Company Based in Depok

Or bends with the remover to remove. Admit impediments; love is not love that looks on tempests and is never shaken; let me not to the marriage of true minds. Love alters not with his brief hours and weeks, within his bending sickle's compass come; it is the star to every wand'ring bark. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark or bends with the remover to remove.

That looks on tempests and is never shaken; if this be error and upon me proved, I never writ, nor no man ever loved. But bears it out even to the

edge of doom. Oh, no, it is an ever fixed mark that looks on tempests and is never shaken; which alters when it alteration finds. Whose worth's unknown, although his height be taken.

Web Design by Java Web Media

File CSS (style.css) di simpan dalam folder css body { background-color: #063; margin: 0px; padding: 0px; } form { background-color: #E7E7E7; padding: 20px; border: thin solid #CECECE; border-radius: 5px; } label { font-size: 14px; font-weight: bold; text-transform: capitalize; display: block; } input { padding: 5px 10px; } h1 { padding-bottom: 10px; border-bottom: solid thin #D4D4D4; font-size: 18px; } a, a:visited { text-decoration: none; } a:hover { color: #900; } #wrapper { font-family: Tahoma, Geneva, sans-serif; background-color: #FFF; margin: auto; padding: 20px 30px; height: auto; width: 960px; border-right-width: 5px; border-right-style: solid; border-right-color: #CCC; border-bottom-width: 5px; border-left-width: 5px;

border-bottom-style: solid; border-left-style: solid; border-bottom-color: #CCC; border-left-color: #CCC; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } img { max-width: 900px; padding: 10px; border: solid thin #F9F; background-color: #FFC; height: auto; } .warning { background-color: #FCF; color: #900; padding: 5px 10px; border: solid thin #900; border-radius: 5px; } #header { width: 960px; height: 100px; float: left; font-size: 16px; padding: 10px 0px; margin-bottom: 10px; } #header h1 { font-size: 20px; color: #060; border-bottom: none; } #navigasi { float: left; width: 960px; height: 40px; color: #FFF; background-color: #333; margin-bottom: 10px; } #konten { width: 960px; height: auto; float: left; padding-bottom: 20px; margin-bottom: 10px; border-bottom: solid thin #CCC; } #footer { text-align: center; font-size: 11px; }

Membuat dropdown menu menggunakan Spry Menu Bar Horizontal Langkah selanjutnya adalah bersiap membuat dropdown menu menggunakan fitur Spry Menu Bar Horizontal yang disediakan oleh Dreamweaver (dalam tutorial ini digunakan Dreamweaver CS5.5).

Java Web Media: Web Design Company in Depok 1. Buka file dropdown.php menggunakan Dreamweaver, lalu ubah ke mode Design View (lihat gambar di atas). 2. Seleksi tulisan “Ini Navigasi” yang ada dalam lalu hapus tulisan tersebut. Pastikan kursor Anda masih di dalam area navigasi.

Java Web Media: Web Design Company in Depok 3. Klik menu Insert > Lay Out Objects > Spry Menu Bar 4. Jendela Spry Menu Bar akan keluar, lalu pilih opsi Horizontal lalu klik OK. Otomatis Dreamweaver akan menambahkan menu Spry Menu Bar Horizontal ke dalam halaman web Anda. 5. Jika Anda perhatikan, maka di bagian menu Properties (terletak di bagian bawah Workspace Anda), Dreamweaver langsung menampilkan menu pengaturan spry dropdown yang baru saja Anda buat. 6. Dreamweaver otomatis akan membuat folder SpryAssets di web root Anda yang berisi file-file spry menu bar ini.

Java Web Media: Web Design Company in Depok

Ada beberapa hal yang harus Anda pahami dalam penggunaan Menu Bar Dreamweaver ini, antara lain: • • • •

Parent, adalah induk utama dari menu

Children, adalah anak menu (ini akan menjadi menu drop down) Grand child , adalah sub menu dari menu drop down Text, adalah nama menu yang akan tampil di halaman web

•

• •

Link, adalah alamat website/link yang akan dituju ketika menu diklik. Secara default Dreamweaver akan memberikan link tanda kres/pagar (#). Di sana juga terdapat icon folder yang bisa Anda klik jika linknya adalah file. Title, akan menampilkan pop-up menu Target, adalah arah pembukaan link ketika menu dibuka.

NOTE: Di dalam menu Parent, Children dan Grand children Anda akan melihat ikon plus/tambah (+) dan minus/kurang (-). Tanda plus untuk menambah menu, submenu dan subsubmenu, sebaliknya tanda plus untuk menghapus atau mengurangi. Di sana Anda juga akan melihat ikon ke arah atas (↑) dan ke arah bawah (↓). Berfungsi untuk mengatur posisi menu, apakah di atas atau di bawah. Management dropdown menu dan link Anda telah memahami fungsi dari masing-masing menu, maka langkah selanjutnya adalah mengatur menu tersebut, berikut adalah langkah-langkahnya: 1. Pada menu Parent klik pada menu Item 1, lalu pada menu Text Anda akan melihat tulisan Item 1, ubah tulisan tersebut menjadi Home dan link index.php.

Java Web Media: Web Desin Course in Depok 2. Menu Home memiliki anak/childrean Item 1.1 s/d Item 1.3. Anda tidak membutuhkannya. Klik pada menu Item 1.1 lalu klik ikon minus (-) di atasnya. Hapus ketiga anak/children tersebut dengan mengklik tanda minus.

Java Web Media: Web Desin Course in Depok 3. Lalu pada menu Item 2, ubah teksnya menjadi Products dan link: products.php.

Java Web Media: Web Desin Course in Depok

4. Masih pada parent menu Item 2 yang sudah berubah menjadi Products. Klik pada menu Children, lalu klik ikon plus (+) yang ada di atasnya. Tambahkan menu dan link yang Anda sukai. Dalam contoh ini, submenu/children dari menu Products adalah Web Design dengan link web-design.php, lalu Web Programming dengan link webprog.php dan Graphic Design dengan link graphic.php. 5. Lakukan hal sama pada menu Item 3. Ubah sesuai kemauan Anda

Java Web Media: Web Desin Course in Depok 6. Pada menu Item 4 ubah menjadi Contact Us dengan link contact.php 7. Simpan kembali hasil pekerjaan Anda. Jika jendela Copy Dependent Files muncul, klik OK. 8. Lihat hasil pekerjaan Anda

Java Web Media: Web Desin Course in Depok

Hasil dari dropdown menu yang Anda buat tentu belum memuaskan. Maka langkah selanjutnya adalah mengubah tampilan spry menu bar melalu CSS-nya (disimpan dalam file SpryMenuBarHorizontal.css dalam folder SpryAssets).

Mengubah tampilan Spry Menu Bar

Buka file SpryMenuBarHorizontal.css yang ada dalam folder SpryAssets di web root Anda. Jika Anda menggunakan Dreamweaver CS4 ke atas, maka link file bisa Anda lihat di menu Related Documents.

Java Web Media: Web Desin Course in Depok 1. Arahkan kursor Anda pada kode di skitar baris ke-50 pada class ul.MenuBarHorizontal ul. Lalu pada pengaturan width yang semula bernilai 8.2em, ubah menjadi 12.2em. Lakukan hal yang sama pengaturan width di baris ke-62 (pada class ul.MenuBarHorizontal ul li).

Java Web Media: Web Design Company in Depok 2. Lalu pada baris ke-89 Anda akan melihat pengaturan CSS ini (lihat gambar di atas). Lalu ubah sehingga menjadi seperti gambar di bawah:

Java Web Media: Web Design Company in Depok 3. Simpan kembali hasil pekerjaan Anda. Anda telah berhasil membuat drop down menu menggunakan Dreamweaver.

Sumber : Java Web Media