Sorry, this video is only available to Pro accounts.
Upgrade your account to get access to all content.
CSS Hamburgers
Created on March 22nd, 2016
Using this CSS library you can easily add awesome CSS Hamburger buttons to your pages. It's as simple as including the CSS and a little bit of Javascript and you are good to go.
Demo Page: https://jonsuh.com/hamburgers/
Github Page: https://github.com/jonsuh/hamburgers
Here is the code the file we used in the video.
index.html
<!DOCTYPE html>
<html>
<head>
<title>HAMBURGER</title>
<link rel="stylesheet" type="text/css" href="hamburgers.min.css">
</head>
<body>
<button class="hamburger hamburger--elastic" style="outline:none" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<script>
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
</script>
</body>
</html>
Don't forget to download the CSS file from the links above and include it in your project folder.
Comments (0)