My notes: Membuat Pop-Up Menu

Okei postingan kali ini saya akan menunjukkan cara membuat pop UP menu menggunakan dreamweaver…Postingan ini sengaja saya tulis karena beberapa minggu kemarin banyak yang nanya tentang Pop Up menu di PHP menggunakan editing dreamweaver…

Cukup simple sebenernya bahkan sangat simple…tapi karena terlalu simple jadi banyak yang nanya…

Okei studi kasus. Misalnya saya ingin membuat sebuah Tab menu Info pada sebuah Website Polda, pada Tab menu info tersebut terdiri dari beberapa sub yaitu Informasi, Berita, Kasus Terkemuka, Orang Hilang, DPO, Info Ranmor dan Statistik.

Contoh gambar yaitu seperti ini:

Nah pertama-tama yaitu buka software editing Dreamweaver, lalu buka file Index website yang akan kalian berikan Pop Up menu…

Nah seperti gambar di atas ada beberapa tab menu sepeti Home, Profile, Info, Layanan dan sebagainya…

Disini saya akan menambahkan Pop up menu pada Tab menu Info menjadi seperti ini:

Hal pertama yang di lakukan yaitu:

Kembali ke dreaweaver, klik tab Info yang akan kita beri pop up menu, lalu di pojok kanan menu Dreaweaver pada Tab menu Design klik tab Behaviors lalu klik tanda + di sudut kirinya lalu pilih ‘Show Pop-Up Menu’ seperti gambar berikut:

Setelah itu maka akan tampil menu pilihan seperti ini:

Pada tab menu Contents isikan sub-sub menu yang akan di tambilkan di website kita.

Pada lajur Text, isikan nama sub menu yang akan di tampilkan, lalu isikan Link dari sub menu tersebut pada lajur link, lalu tentukan target tempat di tampilakannya sub menu tersebut, pada gambar di atas saya menampilannya pada target iframe, frame pada website saya.

Setelah itu kita pindah ke tab Appearance, pada tab ini kita akan mengatur font, size, posisi, color dari pop up menu tersebut, perhatikan gambar:

Setelah pengturan di tab ini selesai, kita pindah ke tab selanjutnya yaitu tab Advanced.

Pada tab ini kita melakukan pengaturan lebar garis, warna garis, spasi, lebar cell, tinggi cell dan sebagainya.

Setelah pengaturan pada tab ini selesai, lanjut ke pengaturan akhir yaitu posisi.

Pada tab ini kita akan melakukan pengaturan posisi letak dari pop up menu yang akan di tampilkan di website kita, posisiny juga ada yg bottom, above,left dan right, semua tergantung kita memilih…

Setelah semuanya selesai klik OK…

Lalu CTRL+S pada halaman dreamweaver tempat kita melakukan editing menu pop up, lalu run website kita di browser, dan lihatlah tampilan pop up menu yang telah di bikin tadi, jika ada yang kurang berkenan dari tampilan pop up menu nya, kita juga dapat melakukan editing, yaitu dengan cara, masuk kembali ke dreamweaver, klik tab Info tempat di letakkannya pop up menu,lalu pada tab menu Design di lajur kanan atas, yaitu tab behaviours terdapat dua pilihan events dan action, double klik pilihan kedua seperti pada gambar, maka halaman editing akan tampil.