Below are two custom menu toggle icons sometimes called "hamburgers" that you could use to toggle a menu to slide in/out on a web page. The sliding or toggling effect is performed using JavaScript. This is strictly showing you how to create the toggles that would be used to initiate the toggling. The first is an actual hamburger I created using nothing but CSS and gradients. The other is a more standard toggle you may see today created using nothing but CSS.
Hover your mouse over each icon to see the CSS effects.
There are four <div>s that make up the icon. Two <div>s for the top and bottom buns, one for the patty and one for the condiments. Gradients are used to create the "hamburger" effect.
When the mouse is hovered over the toggle, we affect the spreading of the <div>s using the transform property and changing the distance of the two "bun" <div>s on the y-axis using the translateY method.
The "condiments" and "patty" <div>s are kept stationary.
Only three <span>s with their width, height, bottom margin and background color set create the classic stacked three bar look.
When the mouse is hovered over the toggle, we again use the transform property, but this time, we must rotate the top <span> and bottom <span> elements using the rotate method. The top <span>element is rotated 45° and the bottom <span> is rotated -45°.
The middle <span> is visually removed using the transition method on the element opacity. The opacity is then transitioned back when the mouse leaves the hover state.
HTML
<div id="burger" class="toggler" title="Menu Toggle">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
.toggler > div {
height: 4px;
width: 41px;
border-radius: 3px;
transition: transform 0.4s ease-in-out 0s;
}
.toggler > div:first-of-type {
height: 10px;
border-radius: 50% 50% 2% 2%;
background: linear-gradient(to bottom, rgba(235, 184, 127, 0.46) 0%, #df9937 100%);
}
.toggler > div:nth-child(2) {
height: 2px;
background: #bc230f;
background: linear-gradient(to right, #bc230f 0%, #e82412 8%, #337218 20%, #337218 22%, #337218 22%, #e82412 36%, #c9b72c 46%, #c9b72c 52%, #e82412 59%, #337218 72%, #337218 81%, #e82412 87%, #c9b72c 91%, #c9b72c 91%, #bc230f 100%);
}
.toggler > div:nth-child(3) {
background-color: #47200F;
}
.toggler > div:last-of-type {
height: 5px;
border-radius: 0px 0px 3px 3px;
margin-bottom: 0px;
background: #e9bd72;
background: linear-gradient(to bottom, #e9bd72 0%, #b56d25 100%);
}
.toggler:hover > div:first-of-type,
.toggler:focus > div:first-of-type {
transform: translateY(-4px);
}
.toggler:hover > div:last-of-type,
.toggler:focus > div:last-of-type {
transform: translateY(4px);
}
HTML
<div class="toggler hamburger" title="Menu Toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
CSS
.bar {
width: 41px;
height: 4px;
margin-bottom: 4px;
background-color: black;
border-radius: 5px;
display: block;
transition: transform 0.4s linear 0s;
}
.bar:nth-of-type(2) {
opacity: 1;
transition: opacity 0.4s linear 0s;
}
.bar:nth-of-type(3) {
margin-bottom: 0;
}
.hamburger:hover > span:nth-of-type(1),
.hamburger:focus > span:nth-of-type(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger:hover > span:nth-of-type(2),
.hamburger:focus > span:nth-of-type(2) {
opacity: 0;
}
.hamburger:hover > span:nth-of-type(3),
.hamburger:focus > span:nth-of-type(3) {
transform: translateY(-8px) rotate(-45deg);
}