Hamburger Menu

Demo

If You Wanna Your Style Be Similar To Our Style You Should Add 'menu.css' File To Your Project.

 File

                <nav class="nav">
	<a href="#" id="brand">Brand</a>
	<label id="lblmenu" for="menu">
		<input type="checkbox" name="menu" id="menu"/>
		<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
			<path d="M0 70l28-28c2-2 2-2 7-2h64"></path>
			<path d="M0 70l28-28c2-2 2-2 7-2h64"></path>
			<path d="M0 50h99"></path>
			<path d="M0 50h99"></path>
			<path d="M0 30l28 28c2 2 2 2 7 2h64"></path>
			<path d="M0 30l28 28c2 2 2 2 7 2h64"></path>
		</svg>
	</label>
	<ul>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</nav>
<div class="menu container">
	<h1>Start Content</h1>
</div>
                
            

 File

                let btnmenu = document.getElementsByTagName("input")[0];
let navbar = document.getElementsByTagName("ul")[0];
btnmenu.addEventListener("click", function () {
	btnmenu.checked
		? navbar.classList.add('open')
		: navbar.classList.remove('open');
});
                
            

Overlay Sidebar Menu

Demo

If You Wanna Your Style Be Similar To Our Style You Should Add 'menu.css' File To Your Project.

 File

                <aside>
	<nav class="sidenav">
		<ul>
			<li>
				<button id="navclose">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<line x1="18" y1="6" x2="6" y2="18"></line>
						<line x1="6" y1="6" x2="18" y2="18"></line>
					</svg>
				</button>
			</li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</nav>
</aside>
<div class="overlay"></div>
<div class="container-fluid" id="main">
	<button id="navopen">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<line x1="3" y1="12" x2="21" y2="12"></line>
			<line x1="3" y1="6" x2="21" y2="6"></line>
			<line x1="3" y1="18" x2="21" y2="18"></line>
		</svg>
	</button>
	<h1>Example</h1>
</div>
                
            

 File

                let closebtn = document.getElementById("navclose");
let openbtn = document.getElementById("navopen");
let sidenav = document.getElementsByClassName("sidenav")[0];
let main = document.getElementById("main");
let overlay = document.getElementsByClassName("overlay")[0];
openbtn.addEventListener("click", function () {
	main.style.marginLeft = "250px";
	sidenav.style.width = "250px";
	overlay.classList.add("overlayed");
});
closebtn.addEventListener("click", function () {
	main.style.marginLeft = "0px";
	sidenav.style.width = "0px";
	overlay.classList.remove("overlayed");
});
                
            

Sidebar Menu

Demo

If You Wanna Your Style Be Similar To Our Style You Should Add 'menu.css' File To Your Project.

 File

                <div class="admin-wrapper">
	<aside>
		<ul class="side-admin">
			<a href="#" id="brand">
				<img src="" alt=""/>
			</a>
			<hr>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</aside>
	<div class="content-wrapper">
		<nav class="admin-nav">
			<button id="menubtn">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<line x1="3" y1="12" x2="21" y2="12"></line>
					<line x1="3" y1="6" x2="21" y2="6"></line>
					<line x1="3" y1="18" x2="21" y2="18"></line>
				</svg>
			</button>
		</nav>
	
		<div class="menu container-fluid">
			<h1>Example</h1>
		</div>
	</div>
</div>
                
            

 File

                let btnmenu = document.querySelector("#menubtn");
let sidebar = document.getElementsByTagName("ul")[0];
let content = document.getElementsByClassName("content-wrapper")[0];
let menutoggle = false;
btnmenu.addEventListener('click', function () {
	menutoggle = !menutoggle;
	if (menutoggle) {
	sidebar.classList.add('sidetoggle');
	content.classList.add('contenttoggle');
	} else {
	sidebar.classList.remove('sidetoggle');
	content.classList.remove('contenttoggle');
	}
});