MODUL VIII, WEB 2

PEMBUATAN MENU dengan JAVASCRIPT
  1. TUJUAN
Mahasiswa mampu membuat menu dengan menggunakanjavascript, salah satunya adalah mampu membuat menu pulldown.
  1. PEMBAHASAN
Menu pull down adalah salah satu teknikmembuat menu tersembunyi, menu ini akan muncul disaat dibutuhkan dan menghilangsetelah tidak digunakan, kita tentunya pernah melihat menu yang bila didekatidengan krusor tiba – tiba keluar submenu, tetapi jika krusor kita menjauhsubmenu menghilang.
Pembahasanscript Coba1.html
©        merupakan bagian kepala. Dibagian ini kita bisamenentukan judul dokumen HTML.
©      merupakan kode untuk mengawali javascriptdengan tipe text/javacsript.

©     function jumpto(x) { digunakanuntuk membuat fungsi dengan nama jumpto dengan parameter x, jumpto artinyasetelah diklik maka akan pindah halaman.

©     if (document.form1.jumpmenu.value !=”null”) { digunakan untukmengambil / mengecek form1.jumpmenu bernilai not / bukan null

©        merupakan bagian badan dalam dokumen HTML. 

©      digunakan untuk membuat form dengan manaform1.

©       <select name="jumpmenu"

onChange=”jumpto(document.form1.jumpmenu.options[document.form1.

jumpmenu.options.selectedIndex].value)”>

digunakan untuk membuat menu pull down dengan nama jumpmenu danakan menangani kejadian ketika data disebuah object control mengalami perubahannilai setelah diklik akan pindah halaman dan mengambil form1.jumpmenu denganpilihan indek

©       Jump to…

STMIK AKAKOM

W3Schools

Galeri Foto

My Profile

Digunakan untuk menampilkanpilihan-pilihan yang terdapat dalam daftar pilihan yang ditampilkan oleh tagSELECT yaitu Jump to… STMIK AKAKOM, W3Schools, Galeri Foto dan My Profile

 

Hasiloutput :

 

 

Pembahasan script Coba2.html

©        menandakan bahwakode yang terdapat didalamnya adalah kode HTML sehingga browser akanmenerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.

©        merupakan bagian kepala. Dibagian ini kita bisamenentukan judul dokumen HTML.

©       body{font-family:verdana;}

a {

color:balck;

text-decoration:none;}

Digunakan untuk mengatur font pada browser yaituverdana, dengan warna hitam. text-decoration:none; –> textdekorasi jangan di rubah.

©       a:hover{

background:#49A3FF;

color:yellow;}

a:hover{–> a:hover artinya yaitu ketika mouse beradapada tombol .a akan berubah menjadi seperti yang didefinisikan pada kode ini dan akan mengaturpada saat menu bar disorot, dengan warna background dengan kodewarna #49A3FFketika mouse berada pada tombol a dan warna kuning

©       td.menu a:hover{

background:blue;

color:yellow;

display:block;}

a:hover{–> a:hover artinya yaitu ketika mouse beradapada tombol .a akan berubah menjadi seperti yang didefinisikan pada kode ini dan untuk membuat sebuah sel data dan mengatur saat menupull down disorot dengan warna background biru, warna kuning. display:block;–> kata block artinya di tampilkan di layar monitor.

©       tr.atas {

background:#5970B2;

font-size:80%;}

Digunakan untuk membuat baris dalam tabel dan mengaturbackground dan ukuran font / huruf yaitu 80

©       td.menu{background:aqua;}

table:menu{

background:#5970B2;

font-size:100%;

position:absolute;

visibility:hidden;}

Digunakan untuk membuat sel data dan mengatur warnabackground pada pull down dan ukuran huruf yaitu 100 dengan posisi absolute /semau kita sensiri dan visibility hidden / tersembunyi.

©      merupakan tipe script yaitu teks / javascript.

©     function showmenu(elmnt){ digunakan untuk membuat fungsi dengannama showmenu dengan parameter elmnt. Jadi nanti menu akan dimunculkan.

document.getElementById(elmnt).style.visibility=”visible”;

©       function hidemenu(elmnt) { digunakan untuk membuat fungsi dengan nama showmenudengan parameter elmnt. Jadi nanti menu akan disembunyikan

©       document.getElementById(elmnt).style.visibility=”hidden”; sebuah fungsijavascript yang digunakan untuk mengakses property dan fungsi sebuah tag denganmenunjuk ID-nya yaitu elemnt dan akan disembunyikan.

©       /body> merupakan bagian badan dalam dokumen HTML.  

STMIKAKAKOM YOGYAKARTA

digunakan untuk membuat judul dalam badan dokumendengan nama STMIK AKAKOM YOGYAKARTA

©       


digunakanuntuk membuat garis batas horizontal

©     

digunakan untukmembuat tabel dengan lebar 100 dan garis tepi 0.

©     

digunakan untuk membuat baris dalam tabel dengan namaclass atas dan warna background merah

©      digunakan untuk membuat sel data dan akan menanganikejadian ketika user menggerakkan krusor pada suatu element yaitu pada fungsishowmenu dengan nama id data dan akan menangani kejadian ketika usermenggerakkan krusor menjauhi element menuju kefungsi hidemenu denagn nama idyaitu data dengan lebar 120

©     MasterData
digunakan untuk membuat link yang akan menuju keMaster Data.
digunakan untuk ganti baris / pindah baris.

©     

digunakan untuk membuat tabel dengan nama class menudan nama id data dengan lebar 200.

©     

Mahasiswa

digunakan untuk membuat baris dalamtabel dan membuat sel data dengan nama class menu dan membuat linkmahasiswa.html yang akan menuju ke Mahasiswa.

©     

Dosen

digunakan untuk membuat baris dalamtabel dan membuat sel data dengan nama class menu dan membuat link dosen.htmlyang akan menuju ke Dosen.

©     

digunakan untuk membuat sel data dan akan menanganikejadian ketika user menggerakkan krusor pada suatu element yaitu ke fungsishowmenu dengan id proses dan akan menangani kejadian ketika user menggerakkankrusor menjauhi element menuju ke fungsi hidemenu dengan id utility denganlebar 120.

©       Proses
digunakan untuk membuat link yang akan menuju keProses.
digunakan untuk ganti baris / pindah baris.

©     

digunakan untuk membuat tabel dengan nama class menudan nama id proses dengan lebar 200.

©     

KRSOnline

digunakan untuk membuat baris dalam tabel dan membuatsel data dengan nama class menu dan menuju ke  link krs.php dengan nama KRS Online.

©     

CetakTranskrip

digunakan untuk membuat baris dalam tabel dan membuatsel data dengan nama class menu dan menuju ke link khs.php dengan nama CetakTranskrip.

©       

Yudisium

digunakan untuk membuat baris dalamtabel dan membuat sel data dengan nama class menu dan menuju ke link yudis.php dengannama Yudisium.

©        digunakan untuk membuat sel data dan akan menanganikejadian ketika user menggerakkan krusor pada suatu element yaitu ke fungsishowmenu dengan id utility dan akan menangani kejadian ketika user menggerakkankrusor menjauhi element menuju ke fungsi hidemenu dengan id utility denganlebar 120.

©     Utility
digunakan untuk membuat link yang akan menujukeUtility

©     

digunakan untuk membuat tabel dengan nama class menudan nama id utility dengan lebar 200.

©     

BackupData

digunakan untuk membuat baris dalam tabel dan membuatsel data dengan nama class menu dan menuju kelink backup.php dengan nama BackupData

 

Hasiloutput :

 

 

 

 

Pembahasan script latihan.html

Pembahasan programsama denganscript coba2.html pada praktikum hanya ditambah kode program sebagai berikut :

©       

digunakan untuk membuat sel data dan akan menanganikejadian ketika user menggerakkan krusor pada suatu element yaitu ke fungsishowmenu dengan id kampus dan akan menangani kejadian ketika user menggerakkankrusor menjauhi element menuju ke fungsi hidemenu dengan id kampus dengan lebar120.

©     Kampus
digunakan untuk membuat link yang akan menuju keKampus.
digunakan untuk ganti baris / pindah baris.

©     

digunakan untukmembuat tabel dengan nama class menu dan nama id kampus dengan lebar 200.

©     

<ahref="

http://www.akakom.ac.id“>STMIKAKAKOM digunakan untukmembuat baris dalam tabel dan membuat sel data dengan nama class menu dan menujuke link http://www.akakom.ac.id dengan nama STMIK AKAKOM.

©     

<ahref="

http://www.itb.ac.id“>ITB digunakan untuk membuat baris dalam tabel dan membuatsel data dengan nama class menu dan menuju ke link http://www.itb.ac.id dengan nama ITB.

©       

digunakan untukmembuat sel data dan akan menangani kejadian ketika user menggerakkan krusorpada suatu element yaitu ke fungsi showmenu dengan id berita dan akan menanganikejadian ketika user menggerakkan krusor menjauhi element menuju ke fungsihidemenu dengan id berita dengan lebar 120.

©     Berita
digunakan untukmembuat link yang akan menuju ke Berita.
digunakan untuk gantibaris / pindah baris.

©     

digunakan untuk membuat tabel dengan nama class menu dan nama id beritadengan lebar 200.

©     

<ahref="

http://www.kompas.com“>Kompas digunakan untuk membuat baris dalam tabel dan membuatsel data dengan nama class menu dan menuju ke link http://www.kompas.com dengan nama Kompas.

©     

<ahref="

http://www.detik.com“>Detik digunakan untuk membuat baris dalam tabel dan membuatsel data dengan nama class menu dan menuju ke link http://www.kompas.com dengan nama Kompas.

 

Hasil output :

 

 

C.     TUGAS

body{font-family:arial;}

a{color:black;text-decoration:none;font:bold}

a:hover{color:#606060}

td.menu{background:lightblue}

 

table.nav

{

background:black;

position:relative;

font: bold 80% arial;

top:0px;

left:-135px;

}

var i=-164;

var intHide;

var speed=3;

function showmenu()

{

clearInterval(intHide);

intShow=setInterval(“show()”,10);

}

function hidemenu()

{

clearInterval(intShow);

intHide=setInterval(“hide()”,10);

}

function show()

{

if (i<-8)

  {

  i=i+speed;

  document.getElementById(‘myMenu’).style.left=i;

  }

}

function hide()

{

if (i>-164)

  {

  i=i-speed;

  document.getElementById(‘myMenu’).style.left=i;

  }

}

 onmouseover=”showmenu()” onmouseout=”hidemenu()”>

 

 

Hasil output :
D.    KESIMPULAN
Setelah kita melaksanakan praktikum modul 8 tentangPembuatan Menu dengan Javascript maka kita mampu membuat menu denganmenggunakan javascript, salah satunya adalah mampu membuat menu pulldown
E.     LISTING [terlampir]
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s