JQuery UI Part 7 : Membuat Menu Navigasi Dengan JQuery UI
Membuat Menu Navigasi Dengan JQuery UI – Terima kasih sebelumnya sudah mampir dan masih meneruskan membaca tutorial jquery UI yang berpart-part di www.malasngoding.com ini. kebetulan tutorial jquery ui nya sudah sampai pada part 7 yang membahas cara membuat menu navigasi dengan jquery ui. jadi di tutorial ini sesuai dengan judul nya yaitu membuat menu navigasi dengan jquery ui maka saya akan membahas sebuah widget yang terdapat pada jquery ui. yaitu widget menu. widget menu pada jquery ui ini adalah widget yang berupa menu navigasi. di mana nanti kita bisa menggunakan widget menu navigasi jquery ui ini sebagai menu navigation pada website atau aplikasi berbasis website yang teman-teman buat.
Baca Juga :
- JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI
- JQuery UI Part 5 : Membuat Form Autocomplete Dengan JQuery UI
Membuat Menu Navigasi Dengan JQuery UI
Cara membuat navigation menu dengan jquery ui caranya sangat mudah. pertama kita buat dulu kerangka dari menu navigasi nya dengan menggunakan element list HTML. kemudian baru memberikan fungsi menu() pada element list tersebut. berikut ini adalah contoh menu navigasi jquery ui.
menu.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 7 : Membuat Menu Navigasi Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Menu Navigasi Dengan JQuery UI | www.malasngoding.com</h1> <ul id="menu"> <li class="ui-state-disabled">Tutorial</li> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>PHP Framework <ul> <li>CodeIgniter</li> <li>Yii</li> <li>Laravel</li> </ul> </li> <li>Ionic</li> <li>Javascript Library <ul> <li>JQuery <ul> <li>JQuery</li> <li>JQuery UI</li> <li>JQuery Mobile</li> </ul> </li> </ul> </li> </ul> </body> <script type="text/javascript"> $(document).ready(function(){ $( "#menu" ).menu(); }); </script> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 |
body{ font-family: sans-serif; } h1{ text-align: center; } .ui-menu { width: 200px; } |
dan jalankan pada browser maka menu navigasi pun jadi.
membuat menu navigasi dengan jquery ui
dapat di perhatikan pada contoh di atas. pertama kita buat rangka menu nya dulu dengan list HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ul id="menu"> <li class="ui-state-disabled">Tutorial</li> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>PHP Framework <ul> <li>CodeIgniter</li> <li>Yii</li> <li>Laravel</li> </ul> </li> <li>Ionic</li> <li>Javascript Library <ul> <li>JQuery <ul> <li>JQuery</li> <li>JQuery UI</li> <li>JQuery Mobile</li> </ul> </li> </ul> </li> </ul> |
pada list ini kita beri id ataua class terserah teman-teman asalkan nanti di sesuaikan. di sini saya memberikan id dengan nama menu. dan terakhit untuk membuat menu navigasi dengan jquery ui kita hanya tinggal menambahkan fungsi menu untuk membuat navigation menu dengan jquery ui.
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $( "#menu" ).menu(); }); </script> |
See the Pen membuat menu navigasi dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0
Tutorial Menarik Lainnya
JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI
JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI
JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI
JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI
