Cara membuat sidebar di html

Question

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

Nội dung chính Show

Tombol Menu Burger
Menu Sidebar Desain HTML
Javascript menampilkan sembunyikan menu sidebar

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 https://unpkg.com/ace-css/css/ace.min.css

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


<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.comtitle>
	<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="#">Logoa>
		<nav class="ml-auto">
			<ul class="list-reset m0 h5 caps">
				<li class="inline-block btn p0 mr1">Aboutli>
				<li class="inline-block btn p0">Blogli>
			ul>
		nav>
	header>

	<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">InsertAppsp>

		<hr>

		<ul class="list-reset muted m0">
			<li class="h6 caps mb2">aboutli>
			<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">Aboutspan>
			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">Emailspan>
			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">RSSspan>
			li>
		ul>

		<hr>

		<ul class="list-reset muted m0">
			<li class="h6 caps mb2">Categoriesli>
			<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 Itemspan>
			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 Itemspan>
			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 Itemspan>
			li>
		ul>
	div>


	<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 Menuh1>

		<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.coma>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.coma>. All rights reserved. <a
				class="text-decoration-none navy" href="https://insertapps.com/privacy/">Privacya>p>
	footer>

	
	<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>
	
body>
html>

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

Pertama siapkan tombol klik yang akan memicu tampilan menu sidebar

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

_

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

Kelas burger sekaligus menjadi pengenal untuk skrip 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 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

<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 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

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

0 dengan minus 150px

Properti CSS

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

_1 dengan nilai input

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

2 adalah untuk memindahkan elemen. Dengan memberikan nilai 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 perpindahan suatu elemen

Kemudian siapkan style css lainnya

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

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

Properti 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 bergerak halus dari elemen HTML

Ketiga dan terakhir, script JavaScript yang akan mengeksekusi menu sidebar

<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 buka sembunyikan menu navigasi sidebar

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

Ketiga variabel

<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 untuk memilih HTML DOM

Kemudian tambahkan acara klik

<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 event (click, change, mouseout, dll) yang memanipulasi DOM

Dengan memanfaatkan properti

<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 kelas CSS yang ada di 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 memasukkan class

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

5 ke dalam blok sidebar menu, secara default 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 class

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

5 agar menu sidebar kembali ke posisi semula, tersembunyi

kode html

Cara membuat sidebar di html

Tombol Menu Burger

Menu Sidebar Desain HTML

Javascript menampilkan sembunyikan menu sidebar

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội