PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE

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

Tony Lea tnylea

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.

share on facebook share on twitter share via email

Comments (0)

loading comments