Tutorial membuat sidebar menu yang responsive
Ilustrasi tutorial sidebar menu

Tutorial membuat sidebar menu yang responsive

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

Alat dan Bahan

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

HTML Sidenav menu
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 <!-- ######## START FOCUS CODE HERE -->.

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

Tombol Menu Burger

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.

HTML Design Sidebar Menu

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 transform: translate(-150%, 0px); sebanyak minus 150px.

CSS property transform: dengan nilai inputan translate() adalah untuk memindahkan sebuah element. Dengan memberikan niai pada parameter x dan y dapat menentukan jarak pemindahan suatu element.

Kemudian siapkan satu style css lagi #sidenav.active yang berfungsi untuk mentransmisikan element sidebar yang sebelumnya tersembunyi menjadi tampil di layar.

Property CSS transition: ; berfungsi untuk membuat efek animasi perpindahan suatu elemen HTML secara smoth (halus).

Javascript show hide sidebar menu

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 let burger = ... ;, let close = ... ; dan let sidenav = ... ; berisi nilai document.querySelector('.burger') khusus menyeleksi HTML DOM.

Kemudian tambahkan event click addEventListener('click', function() { ... });.

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

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

Kode sidenav.classList.add('active'); berfungsi untuk meng-insert class active ke dalam block sidebar menu, defaultnya class active kosong.

Baris kode terakhir sidenav.classList.remove('active'); berfungsi untuk menghapus kembali class active sehingga sidebar menu kembali ke posisi semula, hidden.

Demo

Comment

comments powered by Disqus