Membuat Menu Fullwidth dengan Bootstrap 4

14/07/2018    Maykhel David    425     Website

Cara mudah membuat menu fullwidth dengan bootstrap 4 – Pernahkah kalian membuat sebuah struktur menu full width? Bagaimana cara kalian membuatnya? Apakah dengan cara manual? Dengan memberikan margin atau width dengan sama rata agar terlihat full width, tentu saja bias, namun bagaimana jika jumlah menunya bertambah atau berkurang? Pastinya kalian akan repot mengatur ulang menu tersebut.

Tahukah kalian bahwa pada bootstrap 4 juga ada fitur untuk membuat menu menjadi full width atau mengisi satu baris menu secara full tanpa mengatur ulang css meskipun menu nya berkurang atau bertambah. Ingin tahu caranya? Sekarang kita coba dahulu membuat struktur dasar bootstrap seperti biasa.

Disini saya menggunakan CDN bootstrap yang tentunya harus online.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  </body>
</html>

Jika sudah kalian copy struktur basic temlate diatas, kita akan coba membuat struktur menu full width dengan baris kode dibawah ini

<div class="nav-scroller py-1 mb-2">
        <nav class="nav d-flex justify-content-between">
          <a class="p-2 text-muted" href="#">Indonesia</a>
          <a class="p-2 text-muted" href="#">U.S.</a>
          <a class="p-2 text-muted" href="#">Technology</a>
          <a class="p-2 text-muted" href="#">Design</a>
          <a class="p-2 text-muted" href="#">Culture</a>
          <a class="p-2 text-muted" href="#">Business</a>
          <a class="p-2 text-muted" href="#">Politics</a>
          <a class="p-2 text-muted" href="#">Opinion</a>
          <a class="p-2 text-muted" href="#">Science</a>
          <a class="p-2 text-muted" href="#">Health</a>
          <a class="p-2 text-muted" href="#">Style</a>
          <a class="p-2 text-muted" href="#">Travel</a>
        </nav>
      </div>

Pada struktur diatas kita melihat 12 daftar menu, yang bila kita hapus beberapa menu ataupun menambahkannya, kita akan tetap melihat menu tersebut tetap tertata rapi tanpa mengatur ulang margin atau padding. Kekurangan dari menu seperti ini adalah tidak responsive. Jadi kalian bias menggunakan opsi 2 buah menu, untuk mobile device dan untuk desktop. Demikian tutorial kali ini yang membahas tentang cara membuat menu fullwidth. Semoga bermanfaat

 

Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More