What is a Hamburger menu?

The Hamburger menu, or the hamburger symbol, is the button in sites and applications that ordinarily opens up into a side menu or navigation drawer. It was made by association originator Norm Cox for the Xerox Star individual workstation in 1981 as a simple manner to impart to clients that the button contained a list of items

Here you can see how we can create hamburger menu Using HTML and CSS


<link rel="stylesheet" href="style.css">
<div class="menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>


@import url(‘https://fonts.googleapis.com/css?family=Josefin+Sans:300’);
body {
background: url(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/escheresque_ste.png’);
.menu {
display: inline-block;
position: absolute;
width: 56px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 62px;
font-family:’Josefin Sans’, sans-serif;
color: #fff;
cursor: pointer;
.menu::after {
position: absolute;
transition: 0.4s ease;
opacity: 0;
pointer-events: none;
.menu:before {
content: “M \00a0 \00a0 \00a0 \00a0 \00a0U”;
top: -60px;
left: -100%;
width: 215px;
.menu:after {
content: “N”;
top: 50px;
left: 96%;
.menu:hover::after {
top: -4.3px;
opacity: 1;
transition: 0.2s ease, opacity 0.17s 0.03s ease-in;

.bar {
width: 80%;
height: 3px;
background: white;
margin: 0 auto 18px;
transition: transform 0.4s ease;

/*.menu:hover .bar {*/
/* transform: rotate(-10deg);*/

Leave a comment