MODUL VIII, WEB 2

PEMBUATAN MENU dengan JAVASCRIPT
  1. TUJUAN
Mahasiswa mampu membuat menu dengan menggunakan javascript, salah satunya adalah mampu membuat menu pulldown.
  1. PEMBAHASAN
Menu pull down adalah salah satu teknik membuat menu tersembunyi, menu ini akan muncul disaat dibutuhkan dan menghilang setelah tidak digunakan, kita tentunya pernah melihat menu yang bila didekati dengan krusor tiba – tiba keluar submenu, tetapi jika krusor kita menjauh submenu menghilang.
Pembahasan script Coba1.html
©        merupakan bagian kepala. Dibagian ini kita bisa menentukan judul dokumen HTML.
©      merupakan kode untuk mengawali javascript dengan tipe text/javacsript.

©      function jumpto(x) { digunakan untuk membuat fungsi dengan nama jumpto dengan parameter x, jumpto artinya setelah diklik maka akan pindah halaman.

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

©        merupakan bagian badan dalam dokumen HTML. 

©      digunakan untuk membuat form dengan mana form1.

©        <select name="jumpmenu"

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

jumpmenu.options.selectedIndex].value)”>

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

©        Jump to…

STMIK AKAKOM

W3Schools

Galeri Foto

My Profile

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

 

Hasil output :

 

 

Pembahasan script Coba2.html

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

©        merupakan bagian kepala. Dibagian ini kita bisa menentukan judul dokumen HTML.

©        body{font-family:verdana;}

a {

color:balck;

text-decoration:none;}

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

©        a:hover{

background:#49A3FF;

color:yellow;}

a:hover{ –> a:hover artinya yaitu ketika mouse berada pada tombol .a akan berubah menjadi seperti yang di definisikan pada kode ini dan akan mengatur pada saat menu bar disorot, dengan warna background dengan kode warna #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 berada pada tombol .a akan berubah menjadi seperti yang di definisikan pada kode ini dan untuk membuat sebuah sel data dan mengatur saat menu pull 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 mengatur background 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 warna background 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 dengan nama showmenu dengan parameter elmnt. Jadi nanti menu akan dimunculkan.

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

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

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

©        /body> merupakan bagian badan dalam dokumen HTML.  

STMIK AKAKOM YOGYAKARTA

digunakan untuk membuat judul dalam badan dokumen dengan nama STMIK AKAKOM YOGYAKARTA

©       


digunakan untuk membuat garis batas horizontal

©     

digunakan untuk membuat tabel dengan lebar 100 dan garis tepi 0.

©     

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

©     

digunakan untuk membuat sel data dan akan menangani kejadian ketika user menggerakkan krusor pada suatu element yaitu pada fungsi showmenu dengan nama id data dan akan menangani kejadian ketika user menggerakkan krusor menjauhi element menuju kefungsi hidemenu denagn nama id yaitu data dengan lebar 120

©      Master Data
digunakan untuk membuat link yang akan menuju ke Master Data.
digunakan untuk ganti baris / pindah baris.

©     

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

©     

Mahasiswa

digunakan untuk membuat baris dalam tabel dan membuat sel data dengan nama class menu dan membuat link mahasiswa.html yang akan menuju ke Mahasiswa.

©     

Dosen

digunakan untuk membuat baris dalam tabel dan membuat sel data dengan nama class menu dan membuat link dosen.html yang akan menuju ke Dosen.

©     

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

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

©     

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

©     

KRS Online

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

©     

Cetak Transkrip

digunakan untuk membuat baris dalam tabel dan membuat sel data dengan nama class menu dan menuju ke link khs.php dengan nama Cetak Transkrip.

©       

Yudisium

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

©       

digunakan untuk membuat sel data dan akan menangani kejadian ketika user menggerakkan krusor pada suatu element yaitu ke fungsi showmenu dengan id utility dan akan menangani kejadian ketika user menggerakkan krusor menjauhi element menuju ke fungsi hidemenu dengan id utility dengan lebar 120.

©      Utility
digunakan untuk membuat link yang akan menuju keUtility

©     

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

©     

Backup Data

digunakan untuk membuat baris dalam tabel dan membuat sel data dengan nama class menu dan menuju kelink backup.php dengan nama Backup Data

 

Hasil output :

 

 

 

 

Pembahasan script latihan.html

Pembahasan program sama dengan script coba2.html pada praktikum hanya ditambah kode program sebagai berikut :

©       

digunakan untuk membuat sel data dan akan menangani kejadian ketika user menggerakkan krusor pada suatu element yaitu ke fungsi showmenu dengan id kampus dan akan menangani kejadian ketika user menggerakkan krusor menjauhi element menuju ke fungsi hidemenu dengan id kampus dengan lebar 120.

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

©     

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

©     

<a href="

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

©     

<ahref="

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

©       

digunakan untuk membuat sel data dan akan menangani kejadian ketika user menggerakkan krusor pada suatu element yaitu ke fungsi showmenu dengan id berita dan akan menangani kejadian ketika user menggerakkan krusor menjauhi element menuju ke fungsi hidemenu dengan id berita dengan lebar 120.

©      Berita
digunakan untuk membuat link yang akan menuju ke Berita.
digunakan untuk ganti baris / pindah baris.

©     

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

©     

<a href="

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

©     

<a href="

http://www.detik.com“>Detik digunakan untuk membuat baris dalam tabel dan membuat sel 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 tentang Pembuatan Menu dengan Javascript maka kita mampu membuat menu dengan menggunakan 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