Membuat Menu Responsive Dengan Bootstrap

Untuk membuat menu responsive dengan Bootstrap tidaklah sulit. Anda hanya perlu menambahkan beberapa class sesuai ketentuan Bootstrap sehingga menu yang dibuat akan tampil responsive.

Pada tutorial sebelumnya kita sudah belajar membuat menu responsive menggunakan perintah HTML dan CSS yang ditulis manual. Sekarang mari kita belajar bagaimana cara membuat menu responsive menggunakan framework CSS Bootstrap.

Daftar Isi Tutup

1 Membuat Dokumen HTML Dengan Bootstrap

2 Membuat Struktur Navigation Bar Bootstrap

3 Mengubah Warna Menu Bootstrap

4 Kesimpulan

4.1 Related

Membuat Dokumen HTML Dengan Bootstrap

Langkah pertama, buatlah sebuah file dokumen HTML misal menu.html. Kemudian tambahkan resource bootstrap pada file tersebut agar nantinya kita dapat dengan mudah menuliskan perintah bootstrap.

<!DOCTYPE html>
<html>
   <head>
      <title>Membuat Menu Responsive dengan Bootstrap</title>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>

</body>
</html>

Perhatikan kode diatas, kita menggunakan metode eksternal CSS untuk menggunakan framework bootstrap di dokumen HTML yang telah dibuat.

Membuat Struktur Navigation Bar Bootstrap

Selanjutnya, mari kita buat struktur menu atau navigation bar dengan bootstrap. Tuliskan kode perintah berikut untuk membuat menu navigasi bootstrap, letakkan di dalam tag <body>.

<nav class="navbar navbar-default">
	<div class="container-fluid">
    	<div class="navbar-header">
      		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            	<span class="sr-only">Toggle navigation</span>
              	<span class="icon-bar"></span>
              	<span class="icon-bar"></span>
              	<span class="icon-bar"></span>
            </button>
      		<a class="navbar-brand" href="#">ePlusGo</a>
    	</div>
    	<div id="navbar" class="navbar-collapse collapse">
	      	<ul class="nav navbar-nav">
	        	<li class="active"><a href="#">Home</a></li>
	        	<li><a href="#">About</a></li>
	        	<li><a href="#">Contact</a></li>
	        	<li class="dropdown">
	          		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>
	          		<ul class="dropdown-menu">
	            		<li><a href="#">HTML</a></li>
	            		<li><a href="#">CSS</a></li>
	            		<li><a href="#">jQuery</a></li>
	            		<li role="separator" class="divider"></li>
	            		<li class="dropdown-header">Lainnya</li>
	            		<li><a href="#">Laravel</a></li>
	            		<li><a href="#">Vue JS</a></li>
	          		</ul>
	        	</li>
	      	</ul>
    	</div>
  	</div>
</nav>

Sekarang, bila kita mengakses file menu.html maka akan tampil menu seperti berikut ini.

Tampilan Menu Responsive Dengan Bootstrap di Desktop

Beda lagi jika kita membukanya di perangkat mobile maka tampilannya seperti berikut.

Tampilan Menu Responsive Di Perangkat Mobile

Apabila kode yang Anda tuliskan sudah berhasil tampil seperti diatas. Selamat, Anda telah berhasil membuat menu responsive dengan bootstrap.

Mengubah Warna Menu Bootstrap

Apakah Anda ingin mengubah warna menu navigasi bootstrap sesuai keinginan ?! Bila iya, berikut contoh kode CSS sederhana untuk mengubah warna menu navigasi bootstrap.

.navbar-green {
  background:#2ECD71;
}

.navbar-green a {
  color:#ffffff;
}
.navbar-green .navbar-nav > li > a:hover,
.navbar-green .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-green .navbar-nav > .active > a,
.navbar-green .navbar-nav > .active > a:hover,
.navbar-green .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #ffffff;
}
.navbar-green .navbar-nav > .open > a,
.navbar-green .navbar-nav > .open > a:hover,
.navbar-green .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #ffffff;
}
.navbar-green .navbar-toggle {
    border-color: #ffffff;
}
.navbar-green .navbar-toggle:hover,
.navbar-green .navbar-toggle:focus {
    background-color: #ffffff;
}
.navbar-green .navbar-toggle .icon-bar {
    background-color: #CCC;
}

Pada kode diatas, kita membuat class navbar-green untuk mengubah warna menu bootstrap menjadi hijau. Untuk menggunakannya silakan ganti class navbar-default menjadi navbar-green pada kode menu navbar Anda.