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
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
CSS
@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::before,
.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::before,
.menu:hover::after {
top: -4.3px;
opacity: 1;
transition: 0.2s ease, opacity 0.17s 0.03s ease-in;
}
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::before,
.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::before,
.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);*/
/*}*/