Cara Membuat Menu Sederhana Dengan jQuery UI

Halo teman – teman semuanya, selamat datang kembali di website tips dan trik Dumet School. Di artikel sebelumnya kita sudah banyak membahas tentang fungsi – fungsi jQuery dan Jquery UI, nah pada artikel kali ini saya akan memberikan tips dan trik yaitu Cara Membuat Menu Sederhana Dengan jQuery UI. Dimana kita akan membuat menu sederhana dengan menggunakan css yang telah di sediakan jQuery UI CSS dan biasanya kita load library nya atau bisa download pada link di bawah ini

http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css

Di dalam jQuery UI CSS tentunya perlu pengetahuan fungsi class yang ada pada jQuery UI, kemudian di dalam Jquery UI kita juga perlu memberikan library jQuery dan jQuery UI.

http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.10.4/jquery-ui.js

Jika semuanya sudah di load baru kita tinggal menggunakannya saja, di bawah ini screen shoot yang nanti kita akan buat

Baik, kita lanjut pada artikel kali ini tentang Cara Membuat Menu Sederhana Dengan jQuery UI. Teman – teman bisa copy script html nya di bawah ini

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title> <strong>Cara Membuat Menu Sederhana Dengan jQuery UI</strong></title>
   </head>
   <body>
      <ul id="menu">
         <li><a href="#">Spring</a></li>
         <li><a href="#">Hibernate</a></li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Java IO</a></li>
               <li><a href="#">Swing</a></li>
               <li><a href="#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

Kemudian save dengan nama index.html, dan jalankan pada browsernya. Maka hasil sementara seperti gambar di bawah ini

Baru kita tambahkan fungsi jQuery UI nya dengan memanggil id=”menu” dan menambahkan fungsi jQuery UI CSS nya, load terlebih dahulu library nya

Kemudian kita masukkan script jQuery UI CSS nya

<script>
 $(function() {
 var menu = $("#menu") .menu();
 $( "#menu" ) .menu("focus", null, $( "#menu" ) .menu().find( ".ui-menu-item:last" ));
 $(menu).mouseleave(function () {
 menu.menu('collapseAll') ;
 });
 });
 </script>

Jika sudah save dan refres pada browsernya, maka hasilnya seperti gambar di bawah ini

Tampilan masil dengan ukuran 100%, kita rubah lebih kecil saja supaya enak di lihat

<style>
 .ui-menu {
 width: 200px;
 }
 </style>

Jika sudah save dan refresh pada browsernya, maka hasilnya sesuai seperti screen shoot di atas.

Baik, sekian pada tips kali ini tentang Cara Membuat Menu Sederhana Dengan jQuery UI kita berjumpa kembali pada artikel yang akan datang, semoga bermanfaat untuk teman – teman yang baru saja belajar tentang jQuery mungkin bisa di jadikan refrensi untuk pembelajarannya. Terimakasih dan Sampai Jumpa

Cara Membuat Menu Sederhana Dengan jQuery UI

Kategori