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
Incoming search terms:
- menu pada jquery ui
- cara buat menu navigasi dengan jquery
- tutorial membuat datepicker dengan cdn
- membuat menu mobile dengan jquery
- jQuery Menu Navigasi
- contoh program untuk menampilkan menu navigasi jquery ui
- cara bikin navigasi menu dengan jquery
- cara membuat datepcker
- cara membuat menu dropdown dengan jquery
- cara membuat menu navigasi dengan jquery
Produk
Toko Kami
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
Diskusi
Tidak Ada Komentar