Get started with hamburgers CDN
MIT licensed
Hamburgers.js: Add hamburger menus with a line of JS, lightweight and easy.
Tags:- css
- hamburger
- hamburgers
- menu
- sass
- scss
Stable version
Copied!
How to start using hamburgers CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.cdnhub.io/hamburgers/1.2.1/hamburgers.min.css">
<style>
.hamburger {
display: inline-block;
width: 32px;
height: 24px;
background: #333;
position: relative;
cursor: pointer;
}
.hamburger input {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hamburger span {
display: block;
width: 25px;
height: 3px;
background: #fff;
position: absolute;
left: 5px;
top: 10px;
transition: all 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
transform-origin: left;
transform: rotate(45deg) translate(3px, 0px);
}
.hamburger span:nth-child(2) {
opacity: 0;
}
.hamburger span:nth-child(3) {
transform-origin: left;
transform: rotate(-45deg) translate(3px, 0px);
}
.hamburger.is-active span:nth-child(2) {
opacity: 1;
}
.hamburger.is-active span:nth-child(1) {
transform: rotate(0deg) translate(0, 0);
}
.hamburger.is-active span:nth-child(3) {
transform: rotate(0deg) translate(0, 0);
}
</style>
</head>
<body>
<nav>
<button class="hamburger" tabindex="0" aria-label="Menu">
<input type="checkbox">
<span></span>
<span></span>
<span></span>
</button>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script src="https://cdn.jsdelivr.net/npm/hamburgers@1.2.1/dist/hamburgers.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
new hamburgers.Hamburger(document.querySelector('.hamburger'));
});
</script>
</body>
</html>
Copied!
Copied!