Hamburger Menu
DemoIf 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
DemoIf 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
DemoIf 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');
}
});