Navbar (atau sistem navigasi) adalah bagian dari antarmuka pengguna grafis yang dimaksudkan untuk membantu pengunjung dalam mengakses informasi. Bar navigasi diimplementasikan di browser file, browser web dan sebagai elemen desain beberapa situs web. Class navbar adalah class yang disediakan oleh bulma untuk membuat navigasi bar yang dimana kita bisa menggunakannya untuk mempermudah user menjelajahi website kita. Pada artikel kali ini saya akan membahas bagaimana Cara Membuat Navbar Menggunakan Bulma Framework.
Ok, langsung saja saya akan memberikan langkah-langkah bagaiman Cara Membuat Navbar 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html> <html> <head> <title>Navbar</title> <!--link ke css bulma--> <link rel="stylesheet" type="text/css" href="bulma-0.5.1/css/bulma.css"> <link rel="stylesheet" type="text/css" href="bulma-0.5.1/css/bulma.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="container"> <nav class="navbar "> <div class="navbar-brand"> <a class="navbar-item" href="https://www.dumetschool.com/"> <img src="https://s-media-cache-ak0.pinimg.com/originals/0f/12/d3/0f12d3c1434644d94682cf11b31e7d39.jpg" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> </a> <div class="navbar-burger burger" data-target="navMenubd-example"> <span></span> <span></span> <span></span> </div> </div> <div id="navMenubd-example" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link is-active" href="/documentation/overview/start/"> Paket Kursus </a> <div class="navbar-dropdown "> <a class="navbar-item " href=""> Web Master </a> <a class="navbar-item " href=""> Web Programming </a> <a class="navbar-item " href=""> Web Design </a> <a class="navbar-item " href=""> Graphic Design </a> <a class="navbar-item " href=""> Digital Marketing </a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link " href="https://www.dumetschool.com/blog"> Blog </a> <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;"> <a class="navbar-item" href="https://www.dumetschool.com/blog/cara-membuat-aplikasi-todolist-vue-js-part-1"> <div class="navbar-content"> <p> <small class="has-text-info">03 Aug 2017</small> </p> <p>Cara Membuat Aplikasi TodoList Vue JS Part 1</p> </div> </a> <a class="navbar-item" href="http://kursuswebdesign.org/fungsi-dari-class-level-pada-bulma-framework/"> <div class="navbar-content"> <p> <small class="has-text-info">04 Aug 2017</small> </p> <p>Fungsi Dari Class Level pada Bulma Framework</p> </div> </a> <a class="navbar-item" href="https://www.dumetschool.com/blog/apa-perbedaan-antara-seo-dengan-serp"> <div class="navbar-content"> <p> <small class="has-text-info">01 Aug 2017</small> </p> <p>Apa Perbedaan Antara SEO dengan SERP?</p> </div> </a> </div> </div> <div class="navbar-item"> <a href=""> About </a> </div> </div> <div class="navbar-end"> <a class="navbar-item is-hidden-desktop-only" href="#" target="_blank"> <span class="icon" style="color: #333;"> <i class="fa fa-facebook"></i> </span> </a> <a class="navbar-item is-hidden-desktop-only" href="#" target="_blank"> <span class="icon" style="color: #55acee;"> <i class="fa fa-instagram"></i> </span> </a> <a class="navbar-item is-hidden-desktop-only" href="#" target="_blank"> <span class="icon" style="color: #55acee;"> <i class="fa fa-twitter"></i> </span> </a> </div> </div> </nav> </div> <section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title"> DUMET School </h1> <h2 class="subtitle"> Website and Digital Marketing Courses </h2> </div> </div> </section> <script src="bulma-0.5.1/docs/_javascript/bulma.js"></script> <script src="bulma-0.5.1/docs/_javascript/main.js"></script> <script src="bulma-0.5.1/docs/_javascript/index.js"></script> </body> </html> |
Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:
dan apabila kita kecilkan layarnya maka tampilannya akan menjadi seperti gambar di bawah ini:
Class navbar adalah class yang memudahkan kita mebuat navigasi bar yang berisi link untuk mempermudah user menjelajahi website kita.
Dengan bulma kita dapat dengan mudah membuat navbar tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat navigasi bar menggunakan class navbar pada bulma.
Sekian pembahasan kali ini tentang Cara Membuat Navbar Menggunakan Bulma Framework. Semoga bermanfaat.