Cara Membuat Navbar Menggunakan Bulma Framework

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:

<!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>

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>

</head>

<body>

</a>

</div>

Paket Kursus

</a>

Web Master

</a>

Web Programming

</a>

Web Design

</a>

Graphic Design

</a>

Digital Marketing

</a>

</div>

Blog

</a>

<p>

</p>

<p>Cara Membuat Aplikasi TodoList Vue JS Part 1</p>

</div>

</a>

<p>

</p>

<p>Fungsi Dari Class Level pada Bulma Framework</p>

</div>

</a>

<p>

</p>

<p>Apa Perbedaan Antara SEO dengan SERP?</p>

</div>

</a>

</div>

About

</a>

</div>

</span>

</a>

</span>

</a>

</span>

</a>

</div>

</nav>

</div>

DUMET School

</h1>

Website and Digital Marketing Courses

</h2>

</div>

</section>

</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.

Cara Membuat Navbar Menggunakan Bulma Framework

Submit a Comment Cancel reply

Facebook DUMET School

Categories