Masih tentang menu di suatu website salah satunya adalah side menu. Side menu adalah menu bantuan unutk mempermudah user memilih konten yang berada di website dengan mudah. Side menu sering kita temukan di kiri atau di kanan suatu halaman website. Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Side Menu Menggunakan Bulma Framework
Pada tutorial kali ini saya akan membuat side menu untuk paket kursus. Langsung saja saya akan memberikan langkah-langkah Cara Membuat Side Menu Menggunakan Bulma Framework:
1. Pertama,
anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.
2. Kedua
anda ketikan kode html 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 58 |
<!DOCTYPE html> <html> <head> <title>Panel Bulma Framework</title> <!--link ke css bulma--> <link rel="stylesheet" type="text/css" href="bulma-0.4.4/css/bulma.css"> <link rel="stylesheet" type="text/css" href="bulma-0.4.4/css/bulma.css.map"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css.map"> <!--link ke font-awesome--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="column"> <div class="columns"> <div class="column is-2"> <aside class="menu"> <p class="menu-label"> Webmaster </p> <ul class="menu-list"> <li><a>Ultimate</a></li> <li><a>Pro</a></li> </ul> <p class="menu-label"> Administration </p> <ul class="menu-list"> <li><a>Graphic Design</a></li> <li> <a class="is-active">Ultimate</a> <ul> <li><a>Photoshop</a></li> <li><a>Illustrator</a></li> <li><a>Indesign</a></li> </ul> </li> </ul> <p class="menu-label"> Transactions </p> <ul class="menu-list"> <li><a>Payments</a></li> <li><a>Transfers</a></li> <li><a>Balance</a></li> </ul> </aside> </div> <div class="column notification is-info"> <h1 class="title">Dumetschool</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </div> </body> </html> |
Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:
Dengan bulma kita dapat dengan mudah membuat side menu tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat side menu pada bulma.
Sekian pembahasan kali ini tentang Cara Membuat Side Menu Menggunakan Bulma Framework. Semoga bermanfaat.