Hallo sahabat, bagaimana kabar kalian semoga dalam keadaan sehat dan tetap semangat ya. Dalam kesempatan ini saya akan membahas tentang Toggle Menu Sidebar. Menu Sidebar merupakan menu yang berada pada bagian sisi kanan atau sisi kiri halaman website. Menu Sidebar tentu harus bisa ditampilkan atau di sembunyikan. Jadi menu sidebar perlu adanya button toggle sebagai control menyembunyikan atau menampilkan bagian menu. Yuk langsung saja ikuti cara membuatnya:

<div id="wrapmenu" onclick="togglemenu()">
		<div class="btn-menu">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">Product</a></li>
			<li><a href="">Event</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Help</a></li>
		</ul>
	</div>

Kedua, menambahakn code style CSS agar tampilan menu sidebar semakin menarik seperti code dibawah ini:

body{margin:0;padding:0;}
		#wrapmenu{position: fixed;width: 30%;height: 100%;background: #262626;left:-30%;}
		#wrapmenu ul{margin:0;padding:0;}
		#wrapmenu ul li{font-size: 16px;border-bottom: solid grey;text-align: center;padding:30px;list-style: none;text-transform: uppercase;}
		#wrapmenu ul li:hover{background: aqua}
		#wrapmenu ul li a{text-decoration: none;color: #ffffff}
		.btn-menu{position: absolute;left:105%;top:15px;}
		.btn-menu span{display: block;background:#000000;width: 30px;height: 5px;margin:3px; }
		#wrapmenu.active{left:0;}

Sealnjutnya yaitu tinggal menambahkan code dari Javascript untuk membuat fungsi dari toggle, silahkan ketik script berikut:

function togglemenu(){
			document.getElementById('wrapmenu').classList.toggle('active')
		}

Baiklah jika sudah tinggal simpan lalu jalankan pada browser masing-masing maka akan terloihat seperti dibawah ini:

cara membuat-toggle-menu-sidebar-dengan-javascript-edi-230420 

Demikian yang bisa disampaikan dalam artikel ini tentang Cara Membuat Toggle Menu Sidebar Dengan Javascript. Semoga bermanfaat dan sampai jumpa dilain kesempatan.

terima kasih.

WhatsApp chat