Menu Drop Down Sederhana Tanpa JavaScript

kali ini saya akan menjelas kan gimana cara membuat menu drop down sederhana tanpa javascript , terkadang kita mencari gimana cara membuat dropdown kebanyakan menggunakan platform dari javascript , nah kali ni kita cukup menggunkan HTML/CSS only.

sekalipun anda tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML. kalau dinilai dari sisi besar-kecilnya source, maka dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengkasesnya lebih cepat dibandingkan menggunakan javascript.

langsung saja kita mulai
langkah awal kita harus membuat susunan menu .
Buat File Menu.html , kemudian tulis kode dibawah ini .

<link href="style.css" rel="stylesheet"> <ul id="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> </ul> </li> <li><a href="#">Menu 4</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 5</a> <ul class="sub-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> </ul> <!-- tanda # ganti dengan alamat URL yang sobat inginkan -->
maka jika dibuka akan terlihat tampilan seperti ini

kenapa terlihat seperti itu ?, kok tidak dropdown ..? 

iya itu baru tampilan dari susan menu html saja. karena kita belum memasukkan script CSS nya.

langkah selanjutnya kita harus membuat style dari menu tersebut , 

buatlah File dengan nama Style.css , dan di isi dengan style dibawah ini

ul#menu, ul#menu ul.sub-menu { padding:0; margin:0; text-align:center; opacity:.9 } ul#menu li, ul#menu ul.sub-menu li { list-style-type:none; display:inline-block; width:120px } ul#menu li a, ul#menu li ul.sub-menu li a { text-decoration:none; color:#fff; background:#666; padding:5px; display:block } ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover { background:#333 } ul#menu li { position:relative } ul#menu li ul.sub-menu { position: absolute; top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */ display:none } ul#menu li:hover ul.sub-menu { display:block }
maka akan tampil menu seperti contoh demo dibawah ini

• Menu 1
• Menu 2
  • Sub Menu 1
• Menu 3
  • Sub Menu 1
  • Sub Menu 2
• Menu 4
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 5
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4

Teknik Pagging Sederhana

Paging adalah teknik saat menampilkan data kedalam halaman halaman yang berbeda. Teknik ini digunakan jika data yang ada sangat banyak sehingga tidak mungkin tampil dalam satu halaman. Alasan yang lain, dengan paging, loading halaman lebih cepat karena php hanya meminta sebagian data saja. Contoh paging yang anda pakai tiap hari(namun jarang diperhatikan) adalah hasil pencarian Google.

Langkah utama membuat paging halaman di PHP adalah sebagai berikut:
1. Membuat script koneksi
2. Menentukan total data yang akan ditampilkan pada tiap halaman dan menentukan posisi halaman
3. Membuat skrip SQL sesuai dengan posisi halaman yang diminta dan menampilkannya
4. Menampilkan nomor paging di bagian bawah tabel.

1. Membuat script Koneksi

<?php $server="localhost"; $user="root"; //sesuai kan username di data bases $pass=""; //password mysql jika ada $db="data" //nama database dinama tabel data berada mysql_connect('$server','$user','$pass'); mysql_select_db('$db'); ?>

2. Menentukan total data yang akan ditampilkan pada tiap halaman dan menentukan posisi halaman
Script selanjutnya dari langkah 2 sampai langkah empat ada disatu file dengan nama country.php
//2). Menentukan total data yang akan //=== ditampilkan pada tiap halaman dan menentukan posisi halaman //variabel dan kode awal untuk menentukan posisi halaman saat ini //dipakai untuk melimit quiery $batas=10; //satu halaman menampilkan 10 baris $halaman=$_GET['halaman']; $posisi=null; if(empty($halaman)){ $posisi=0; $halaman=1; }else{ $posisi=($halaman-1)* $batas; } //3). melakukan query dan menampilkan data //query data menggunakan limit $posisi dan batas $query="select * from country limit $posisi,$batas "; $result=mysql_query($query) or die(mysql_error()); $no=1; while($rows=mysql_fetch_object($result)){ ?> <tr> <td><?php echo $posisi+$no ?></td> <td><?php echo $rows -> iso;?></td> <td><?php echo $rows -> name;?></td> <td><?php echo $rows -> printable_name;?></td> </tr> <?php $no++; }?> </table> <br> <?php // 4). code untuk Menampilkan nomor paging di bagian bawah tabel. $sql_paging = mysql_query("select iso from country"); $jmldata = mysql_num_rows($sql_paging); $jumlah_halaman = ceil($jmldata / $batas); echo "Halaman :"; for($i = 1; $i <= $jumlah_halaman; $i++) if($i != $halaman) { echo "<a href=country.php?halaman=$i>$i</a>|"; } else { echo "<b>$i</b>|"; } mysql_close();?> <br> Jumlah data :<?php echo $jmldata;?>


Jika anda tertarik mencoba, lihat demonya disini atau silahkan download kodenya disini