Membuat menu sidebar dengan bootstrap

Question

Tutorial simple membuat sidebar menu yang responsive dengan vanilla JavaScript memanfaatkan fungsi classList add/remove tampa menggunakan library jQuery.

Table of Contents Show

Tombol Menu Burger
HTML Design Sidebar Menu
Javascript show hide sidebar menu

Alat dan Bahan

Untuk alat coding silahkan menggunakan editor favorit kalian, boleh Visual Code, Brackets atau Sublime text editor.

HTML Sidenav menu

Bahan untuk membuat side menu navigation

Terlebih dahulu persiapkan template HTML dasar yang sudah berisi sidebar menu.

Dalam tutorial ini, kami menggunakan CSS framework Basscss yang full packet https://unpkg.com/ace-css/css/ace.min.css.

Berikut isi file template HTML dasar untuk membuat sidebar nav menu yang sederhana saja.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML Template Simple Sidebar Menu → by InsertApps.com</title>
	<link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css">
	<style>
		/*Additional Style */

		/* ######## START FOCUS CSS CODE HERE */
		#sidenav {
			max-height: 100vh;
			height: 100vh;
			max-width: 70vw;
			min-width: 300px;
			overflow-x: hidden;
			overflow-y: auto;
			transition: all .3s ease-in-out;
			transform: translate(-150%, 0px);
			-webkit-transform: translate(-150%, 0px);
			/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
			-ms-transform: translate(-150%, 0px);
		}

		#sidenav.active {
			transition: all .3s ease-in-out;
			transform: translate(0%, 0px);
			-webkit-transform: translate(0%, 0px);
			-ms-transform: translate(0%, 0px);
			box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
		}

		/* ######## END FOCUS CSS CODE HERE */

		.burger {
			height: 16px
		}
		.burger span {
			display: block;
			width: 20px;
			height: 2px;
			border-radius: 3px;
		}
		.pointer {
			cursor: pointer;
		}
		.close {
			width: 23px;
			height: 23px;
		}
		.cross {
			height: 23px;
			width: 2px;
			border-radius: 3px;
		}
		.cross.left {
			transform: rotate(45deg);
		}
		.cross.right {
			transform: rotate(-45deg);
		}
		.align-middle {
			vertical-align: middle
		}
	</style>
</head>
<body>
	<header class="bg-blue px2 py1 m0 flex items-center white">
		<div class="burger pointer flex flex-column justify-between mr2">
			<span class="bg-white"></span>
			<span class="bg-white"></span>
			<span class="bg-white"></span>
		</div>
		<a class="white caps text-decoration-none h3 bold" href="#">Logo</a>
		<nav class="ml-auto">
			<ul class="list-reset m0 h5 caps">
				<li class="inline-block btn p0 mr1">About</li>
				<li class="inline-block btn p0">Blog</li>
			</ul>
		</nav>
	</header>
<!-- ######## START FOCUS SIDEBAR CODE HERE -->
	<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
		<div class="close flex items-center justify-center relative pointer mb2 right">
			<div class="absolute cross bg-gray left"></div>
			<div class="absolute cross bg-gray right"></div>
		</div>

		<div class="bg-blue circle mb2 flex items-center justify-center white" style="width: 68px;height: 68px">
			<svg aria-hidden="true" class="block" width="36" role="img" xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 22 20">
				<g fill="currentColor">
					<path d="M15,0.7L12.6,0c-0.1,0-0.2,0-0.2,0.1l-0.7,2.4c0,0.1,0,0.2,0.1,0.2l2.4,0.7c0.1,0,0.2,0,0.2-0.1l0.7-2.4
                    C15.1,0.8,15.1,0.7,15,0.7z"></path>
					<path d="M13.8,4.8l-2.4-0.7c-0.1,0-0.2,0-0.2,0.1L6.9,19.1c0,0.1,0,0.2,0.1,0.2L9.4,20c0.1,0,0.2,0,0.2-0.1L13.9,5
                    C14,4.9,13.9,4.8,13.8,4.8z"></path>
					<path d="M4.9,11.1l-0.8-0.8l-0.3-0.3l0.3-0.3l0.6-0.6l2.4-2.4c0.1-0.1,0.1-0.4,0-0.5L5.7,4.7c-0.1-0.1-0.4-0.1-0.5,0L0.1,9.8
                    C0,10,0,10.2,0.1,10.4l5.1,5.1c0.1,0.1,0.4,0.1,0.5,0L7.2,14c0.1-0.1,0.1-0.4,0-0.5L4.9,11.1z"></path>
					<path d="M17.1,9.1l0.8,0.8l0.3,0.3l-0.3,0.3L17.2,11l-2.4,2.4c-0.1,0.1-0.1,0.4,0,0.5l1.5,1.5c0.1,0.1,0.4,0.1,0.5,0l5.1-5.1
                    c0.1-0.1,0.1-0.4,0-0.5l-5.1-5.1c-0.1-0.1-0.4-0.1-0.5,0l-1.5,1.5c-0.1,0.1-0.1,0.4,0,0.5L17.1,9.1z">
					</path>
				</g>
			</svg>
		</div>
		<p class="m0 muted bold">InsertApps</p>

		<hr>

		<ul class="list-reset muted m0">
			<li class="h6 caps mb2">about</li>
			<li class="pointer mb2">
				<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
					fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
					<path fill-rule="evenodd"
						d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
				</svg>
				<span class="align-middle">About</span>
			</li>
			<li class="pointer mb2">
				<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
					fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z" />
				</svg>
				<span class="align-middle">Email</span>
			</li>
			<li class="pointer mb2">
				<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
					fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
					<path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
					<path fill-rule="evenodd"
						d="M2.5 3.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z" />
				</svg>
				<span class="align-middle">RSS</span>
			</li>
		</ul>

		<hr>

		<ul class="list-reset muted m0">
			<li class="h6 caps mb2">Categories</li>
			<li class="pointer mb2">
				<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
					fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
					<path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z" />
					<path fill-rule="evenodd"
						d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
				</svg>
				<span class="align-middle">Category Item</span>
			</li>
			<li class="pointer mb2">
				<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
					fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
					<path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z" />
					<path fill-rule="evenodd"
						d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
				</svg>
				<span class="align-middle">Category Item</span>
			</li>
			<li class="pointer mb2">
				<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
					fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
					<path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z" />
					<path fill-rule="evenodd"
						d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
				</svg>
				<span class="align-middle">Category Item</span>
			</li>
		</ul>
	</div>
<!-- ######## END FOCUS SIDEBAR CODE HERE -->

	<main class="max-width-4 mx-auto bg-white p2" style="min-height: 100vh">
		<img class="fit block" src="https://freebiespic.com/images/2017/01/IMG_9916_Asia-child-smile-in-the-garden.jpg"
			alt="Red ros flower">

		<h1>HTML Template Simple Sidebar Menu</h1>

		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores, deleniti molestias consectetur iure
			consequuntur quisquam hic culpa voluptatibus sint quos reprehenderit. Fugiat distinctio dolorem rerum ipsa
			quisquam quam, atque enim.</p>

		<p>Image source by <a href="https://freebiespic.com/photos/wireless-keyboard-image/">Freebiespic.com</a></p>

	</main>

	<footer class="px2 py3 bg-silver navy center">
		<p class="muted">Copyright ©2020 → <a class="text-decoration-none navy"
				href="https://insertapps.com/">InsertApps.com</a>. All rights reserved. <a
				class="text-decoration-none navy" href="https://insertapps.com/privacy/">Privacy</a></p>
	</footer>

	<!-- ######## START FOCUS JS CODE HERE -->
	<script>
		let burger = document.querySelector('.burger');
		let close = document.querySelector('.close');
		let sidenav = document.querySelector('#sidenav');

		// Burger click function
		burger.addEventListener('click', function () {
			sidenav.classList.add('active');
		});
		// Close click function
		close.addEventListener('click', function () {
			sidenav.classList.remove('active');
		});
	</script>
	<!-- ######## /END FOCUS JS CODE HERE -->
</body>
</html>

Wow…. 😱 Code dasarnya saja panjang sekali!

Yups… Biar tidak bingung, lihat Demo hasil render kode HTML yang di atas. 😎

Yang perlu di perhatikan hanya pada baris yang ada .

Selebihnya hanya template HTML biasa dengan sentuhan desain yang lumayan rapi dan enak dilihat.

Pertama siapkan sebuah tombol click yang akan men-trigger tampilan sidebar menu.

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

Penjelasan lengkap untuk kode tombol burger, silahkan baca tutorial singkat Cara simpel membuat icon menu hamburger website.

Class burger sekaligus menjadi identifier untuk script JavaScript.

Kedua mari fokus pada potongan kode HTML yang membentuk desain menu sidebar.

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

Apapun model desain sidebar nav yang kalian bentuk, pastikan elemen blok sidenav ditandai dengan salah satu id unik atau boleh juga memanggil salah satu class yang unik.

Di tutorial ini, id uniknya: id="sidenav"

Mengapa perlu id unik atau salah satu class yang unik?

Id unik ini yang akan dieksekusi oleh javascript untuk tujuan manipulasi object element HTML.

Ketiga desain element blok menu sidebar setidaknya memiliki style seperti berikut:

<style>
	#sidenav {
		max-height: 100vh;
		height: 100vh;
		max-width: 70vw;
		min-width: 300px;
		overflow-x: hidden;
		overflow-y: auto;
		/* Default hide effect*/
		transition: all .3s ease-in-out;
		transform: translate(-150%, 0px);
	}

	#sidenav.active {
		/* Reactivate hide effect*/
		transition: all .3s ease-in-out;
		transform: translate(0%, 0px);
		
		/* Effect shadow for sidebar*/
		box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
	}
</style>

Penjelasan style CSS:

Blok style class dengan id #sidenav { } akan merender sebuah balok element sidebar secara vertikal memanjang ke kebawah sepanjang layar browser.

Sidebar menu ini disembunyikan lewat fungsi

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

0 sebanyak minus 150px.

CSS property

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

1 dengan nilai inputan

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

2 adalah untuk memindahkan sebuah element. Dengan memberikan niai pada parameter

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

3 dan

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

4 dapat menentukan jarak pemindahan suatu element.

Kemudian siapkan satu style css lagi

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

5 yang berfungsi untuk mentransmisikan element sidebar yang sebelumnya tersembunyi menjadi tampil di layar.

Property CSS

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

6 berfungsi untuk membuat efek animasi perpindahan suatu elemen HTML secara smoth (halus).

Ketiga dan yang terakhir, script JavaScript yang akan mengeksekusi sidebar menu.

<script>
	let burger = document.querySelector('.burger');
	let close = document.querySelector('.close');
	let sidenav = document.querySelector('#sidenav');

	// Burger click function
	burger.addEventListener('click', function () {
		sidenav.classList.add('active');
	});

	// Close click function
	close.addEventListener('click', function () {
		sidenav.classList.remove('active');
	});
</script>

Penjelasan kode vanilla JavaScript open hide sidebar navigation menu:

Siapkan tiga variabel untuk memanggil element HTML mana saja yang akan di eksekusi oleh JavaScript.

Tiga variable tersebut

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

7,

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

8 dan

<div class="burger pointer">
	<span class="bg-white"></span>
	<span class="bg-white"></span>
	<span class="bg-white"></span>
</div>

9 berisi nilai

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

0 khusus menyeleksi HTML DOM.

Kemudian tambahkan event click

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

1.

Perintah

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

2 adalah salah satu method–function–JavaScript yang berfungsi untuk membuat suatu event (click, change, mouseout, dll) yang memanipulasi DOM.

Dengan memanfaatkan property

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

3 JavaScript, sangat berguna untuk menambah, menghapus dan beralih dari class-class CSS yang ada pada suatu elemen HTML.

Kode

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

4 berfungsi untuk meng-insert class

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

5 ke dalam block sidebar menu, defaultnya class

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

5 kosong.

Baris kode terakhir

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

7 berfungsi untuk menghapus kembali class

<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

5 sehingga sidebar menu kembali ke posisi semula, hidden.

kode bootstrap

Membuat menu sidebar dengan bootstrap

Tombol Menu Burger

HTML Design Sidebar Menu

Javascript show hide sidebar menu

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social