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)