Hamburger Menu With Only CSS or Some JavaScript

OLD (UTC)

  1. page.date => Sat Apr 02 2022 20:34:05 GMT+0530 (India Standard Time)
  2. dateToISO => 2022-04-02T15:04:05.212
  3. dateToFormat('yyyy-LL-dd') => 2022-04-02

NEW (IST)

  1. page.date => Tue Dec 02 2025 17:50:40 GMT+0000 (Coordinated Universal Time)
  2. dateToISO => 2025-12-02T23:20:40.788
  3. dateToFormat('yyyy-LL-dd') => 2025-12-02

When new developers think of making a navigation menu, they imagine a horizontal links inside <header> element for desktop and a hamburger menu as the go to solution for mobile, thought they don't. They are not friendly for mobile friendly navigation neither in past present or future on which we will discuse later.
But as a beginner web developer, you have to know how to create an intractive element and/or how to animate it. In this article you will learn some lesser known CSS selectors and properties to create a hamburger menu with best practices and some very basic concepts of vanilla JavaScript to make it acceceble for screen readers.

Here are some key features that we want in our hamburger menu:

  • Responsive to look good on majority of mobile devices
  • Accessible for screen readers & keyboard users
  • Non janky smooth animation
  • Prevent <body> from scrolling when the menu is open

Prerequisites & Discalimer

You will only need basic understanding of html and css to create the hamburger & menu and little "bytes" of JavaScript to make it accecible.

About the Hamburger Menu

Creating menu structure

The structure of the menu includes a <header> element with a <nav> element inside it to make screen reader read then as a navigation area. Then a <nav> element with a logo (optional), a <button> element to toggle the menu and a <ul> element to hold the menu items.

Our HTML will look like below, BTW this is just the initial structure of the hamburger menu, we will add some more elements and attributes to improve accessibility later.

<header id="site-header">
	<nav>

		<a id="logo" href="/" title="Company Home">
			<img src="/logo.png" alt="Company Logo">
		</a>

		<button id="ham-btn"></button>
		<ul id="menu">
			<li><a href="/">Home</a></li>
			<li><a href="/categories/">Categories</a></li>
			<li><a href="/tags/">Tags</a></li>
			<li><a href="/blog/">Blog</a></li>
		</ul>

	</nav>
</header>

---

Styling it with CSS

  • First reset and normalize our css.

    * {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

  • <header> should be full width & <nav> should be used as max-width wrapper to keep everything in center on larger screens.

    #site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #fff;
	box-shadow: 0 0 20px #3232321a;
	font-size: 20px;
	overflow: hidden;
	z-index: 2;
}