Cara membuat sidebar di html

Tutorial sederhana untuk membuat sidebar menu responsif dengan vanilla JavaScript menggunakan fungsi add/remove classList tanpa menggunakan library jQuery

Alat dan bahan

Untuk alat pengkodean, silakan gunakan editor favorit Anda, Visual Code, Brackets atau Sublime text editor

Menu Sidenav HTML

Bahan untuk membuat navigasi side menu

Pertama, siapkan template HTML dasar yang sudah berisi menu sidebar

Dalam tutorial ini, kami menggunakan framework CSS Basscss yang merupakan paket lengkap //unpkg.com/ace-css/css/ace.min.css

Berikut adalah isi file template HTML dasar untuk membuat menu nav sidebar sederhana

	
	
	HTML Template Simple Sidebar Menu → by InsertApps.com
	
	
		/*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
		}
	


	
		
			
			
			
		
		Logo
		
			
				About
				Blog
			
		
	

	
		
			
			
		

		
			
				
					
					
					
					
					
				
			
		
		InsertApps

		

		
			about
			
				
					
					
				
				About
			
			
				
					
				
				Email
			
			
				
					
					
					
				
				RSS
			
		

		

		
			Categories
			
				
					
					
					
				
				Category Item
			
			
				
					
					
					
				
				Category Item
			
			
				
					
					
					
				
				Category Item
			
		
	


	
		

		HTML Template Simple Sidebar Menu

		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.

		Image source by Freebiespic.com

	

	
		Copyright ©2020 → InsertApps.com. All rights reserved. Privacy
	

	
	
		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'];
		}];
	
	

Wow…. 😱 Kode dasarnya sangat panjang

Yups.. Biar gak bingung, lihat Demo rendering kode HTML di atas. 😎

Yang perlu diperhatikan hanya pada jalur eksisting

Selebihnya hanyalah template HTML biasa dengan sentuhan desain yang cukup rapi dan enak dipandang

Tombol Menu Burger

Pertama siapkan tombol klik yang akan memicu tampilan menu sidebar

_

Penjelasan lengkap kode tombol burger silahkan baca tutorial singkat Cara membuat icon menu hamburger website sederhana

Kelas burger sekaligus menjadi pengenal untuk skrip JavaScript

Menu Sidebar Desain HTML

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

	...
	...
	...

Apapun model desain sidebar nav yang anda buat, pastikan elemen blok sidenav ditandai dengan salah satu unique id atau bisa juga dengan memanggil salah satu unique class

Dalam tutorial ini, id unik. id="sidenav"

Mengapa Anda memerlukan id unik atau salah satu kelas unik?

Id unik ini akan dieksekusi oleh javascript untuk tujuan memanipulasi objek elemen HTML

Desain tiga elemen blok menu sidebar setidaknya memiliki gaya berikut

	#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];
	}

Penjelasan gaya CSS

Kelas gaya blok dengan id #sidenav { }_ akan merender blok elemen sidebar yang memanjang secara vertikal di sepanjang layar browser

Sidebar menu ini disembunyikan melalui fungsi

0 dengan minus 150px

Properti CSS

_1 dengan nilai input

2 adalah untuk memindahkan elemen. Dengan memberikan nilai pada parameter

3 dan

4 dapat menentukan jarak perpindahan suatu elemen

Kemudian siapkan style css lainnya

_5 yang berfungsi untuk mengirimkan elemen sidebar yang sebelumnya tersembunyi untuk muncul di layar

Properti CSS

_6 berfungsi untuk membuat efek animasi bergerak halus dari elemen HTML

Javascript menampilkan sembunyikan menu sidebar

Ketiga dan terakhir, script JavaScript yang akan mengeksekusi menu sidebar

	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'];
	}];

Penjelasan kode vanilla JavaScript buka sembunyikan menu navigasi sidebar

Siapkan tiga variabel untuk memanggil elemen HTML apa pun yang akan dieksekusi oleh JavaScript

Ketiga variabel

_7,

8 dan

9 berisi nilai

	...
	...
	...

0 khusus untuk memilih HTML DOM

Kemudian tambahkan acara klik

	...
	...
	...

_1

Perintah

	...
	...
	...

_2 adalah salah satu method-function-JavaScript yang berfungsi untuk membuat event [click, change, mouseout, dll] yang memanipulasi DOM

Dengan memanfaatkan properti

	...
	...
	...

_3 JavaScript, sangat berguna untuk menambah, menghapus, dan beralih dari kelas CSS yang ada di elemen HTML

Kode

	...
	...
	...

_4 berfungsi untuk memasukkan class

	...
	...
	...

5 ke dalam blok sidebar menu, secara default class

	...
	...
	...

5 kosong

Baris kode terakhir

	...
	...
	...

7 berfungsi untuk menghapus class

	...
	...
	...

5 agar menu sidebar kembali ke posisi semula, tersembunyi