Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Menu Appbar di Metro UI. Hello sahabat dumenity bagaimana nih belajarnya masih semangatkah…? pasti masih semangat yah, harus semangat untuk jadi developer. Pada tutorial kali ini saya akan berbagi ilmu lagi nih masih seputar tentang framework metro UI, kalau sebelumnya saya membahas tentang cara penggunaan grid sistem dalam metro UI pada kali ini saya akan membahas cara membuat menu Appbar pada metro UI.
Oke langsung saja teman – teman buka website metro UI, Kalau sudah teman – teman masuk bagian menu widgets -> menus -> application bar seperti gambar di bawah ini :
kalau sudah silahkan teman – teman cari menu Appbar element, kalau sudah silahkan teman – teman copy paste scriptnya seperti di bawah ini:
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 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html> <head> <link href="css/metro.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <script src="js/jquery-3.1.0.js"></script> <script src="js/metro.js"></script> </head> <body> <div class="container"> <div class="grid"> <div class="row cellsN"> <div class="app-bar"> <a class="app-bar-element" href="...">Home</a> <span class="app-bar-divider"></span> <ul class="app-bar-menu"> <li><a href="">Home</a></li> <li> <a href="" class="dropdown-toggle">Products</a> <ul class="d-menu" data-role="dropdown"> <li><a href="">Windows 10</a></li> <li><a href="">Spartan</a></li> <li><a href="">Outlook</a></li> <li><a href="">Office 2015</a></li> <li class="divider"></li> <li><a href="" class="dropdown-toggle">Other Products</a> <ul class="d-menu" data-role="dropdown"> <li><a href="">Internet Explorer 10</a></li> <li><a href="">Skype</a></li> <li><a href="">Surface</a></li> </ul> </li> </ul> </li> <li><a href="">Support</a></li> <li><a href="">Help</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div class="grid"> <div class="row cells2"> <div class="cell a"> <h4 class="align-center">Kolom Pertama</h4> </div> <div class="cell b"> <h4 class="align-center">Kolom Kedua</h4> </div> </div> </div> </div> </body> </html> |
Oke kalau sudah silahkan teman – teman save dan jalankan pada browsernya , maka hasilnya akan seperti di bawah ini;
Oke teman – teman itulah tadi pembahasan saya tentang Cara Membuat Menu Appbar di Metro UI sangat mudah bukan, semoga bermanfaat.