Hamburger Menu

Developer
Mikita
Size
5,077 Kb
Views
6,072
  1. Hamburger Menu Previews
  2. Hamburger Menu HTML Codes
  3. Hamburger Menu CSS Codes
  4. Hamburger Menu JS Codes

How do I make an hamburger menu?

Pure css implementation of the concept: https://dribbble.com/shots/2286361-Hamburger-Menu-Animation. What is a hamburger menu? How do you make a hamburger menu? This script and codes were developed by Mikita on 19 January 2023, Thursday.

Hamburger Menu Previews
IQ Test

Hamburger Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger Menu</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page"> <div class="page__top"> <div class="menu" id="menu"> <input class="menu__trigger menu__trigger_show" id="show-menu" type="radio" name="menu-trigger"/> <input class="menu__trigger menu__trigger_hide" id="hide-menu" type="radio" name="menu-trigger"/> <div class="menu__overlay"></div> <label class="menu__btn" for="show-menu"> <div class="menu__btn-icon"></div> </label> <div class="menu__list"> <label class="menu__list-item" for="hide-menu"><span class="menu__list-text">Home</span></label> <label class="menu__list-item" for="hide-menu"><span class="menu__list-text">About</span></label> <label class="menu__list-item" for="hide-menu"><span class="menu__list-text">Services</span></label> <label class="menu__list-item" for="hide-menu"><span class="menu__list-text">Contact</span></label> </div> </div> </div> <div class="page__content"> <div class="card"> <div class="card__avatar"></div> <div class="card__name"></div> <div class="card__title"></div> <div class="card__description"></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Hamburger Menu - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body { background: #f2e274; font: 14px/1.2 'Open Sans',helvetica, sans-serif;
}
.page { height: 440px; width: 260px; background: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 6px; overflow: hidden; box-shadow: 1px 3px 6px rgba(0, 0, 0, .3);
}
.page__top { height: 56px; margin-bottom: 20px;
}
.menu__trigger { position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0;
}
.menu__trigger_show:checked ~ .menu__btn { -webkit-transition: opacity .1s ease-in-out .5s, -webkit-transform .4s ease-in-out; transition: opacity .1s ease-in-out .5s, -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out, opacity .1s ease-in-out .5s; transition: transform .4s ease-in-out, opacity .1s ease-in-out .5s, -webkit-transform .4s ease-in-out; -webkit-transform: scaleX(25); transform: scaleX(25); opacity: 0;
}
.menu__trigger_show:checked ~ .menu__btn .menu__btn-icon { -webkit-transition: background .3s ease-in-out; transition: background .3s ease-in-out; background: #cbd9ec;
}
.menu__trigger_show:checked ~ .menu__list { -webkit-transition: opacity .1s ease-in-out .4s, box-shadow .4s ease-in-out .5s, border .4s ease-in-out .5s; transition: opacity .1s ease-in-out .4s, box-shadow .4s ease-in-out .5s, border .4s ease-in-out .5s; opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); border-bottom-color: #cbd9ec; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.menu__trigger_show:checked ~ .menu__list .menu__list-item { -webkit-transition: height .5s ease-in-out .5s; transition: height .5s ease-in-out .5s; height: 60px;
}
.menu__trigger_show:checked ~ .menu__list .menu__list-item:nth-child(1) .menu__list-text { -webkit-transition: opacity .15s ease-in-out .8s, -webkit-transform .15s ease-in-out .8s; transition: opacity .15s ease-in-out .8s, -webkit-transform .15s ease-in-out .8s; transition: transform .15s ease-in-out .8s, opacity .15s ease-in-out .8s; transition: transform .15s ease-in-out .8s, opacity .15s ease-in-out .8s, -webkit-transform .15s ease-in-out .8s;
}
.menu__trigger_show:checked ~ .menu__list .menu__list-item:nth-child(2) .menu__list-text { -webkit-transition: opacity .15s ease-in-out .9s, -webkit-transform .15s ease-in-out .9s; transition: opacity .15s ease-in-out .9s, -webkit-transform .15s ease-in-out .9s; transition: transform .15s ease-in-out .9s, opacity .15s ease-in-out .9s; transition: transform .15s ease-in-out .9s, opacity .15s ease-in-out .9s, -webkit-transform .15s ease-in-out .9s;
}
.menu__trigger_show:checked ~ .menu__list .menu__list-item:nth-child(3) .menu__list-text { -webkit-transition: opacity .15s ease-in-out 1s, -webkit-transform .15s ease-in-out 1s; transition: opacity .15s ease-in-out 1s, -webkit-transform .15s ease-in-out 1s; transition: transform .15s ease-in-out 1s, opacity .15s ease-in-out 1s; transition: transform .15s ease-in-out 1s, opacity .15s ease-in-out 1s, -webkit-transform .15s ease-in-out 1s;
}
.menu__trigger_show:checked ~ .menu__list .menu__list-item:nth-child(4) .menu__list-text { -webkit-transition: opacity .15s ease-in-out 1.1s, -webkit-transform .15s ease-in-out 1.1s; transition: opacity .15s ease-in-out 1.1s, -webkit-transform .15s ease-in-out 1.1s; transition: transform .15s ease-in-out 1.1s, opacity .15s ease-in-out 1.1s; transition: transform .15s ease-in-out 1.1s, opacity .15s ease-in-out 1.1s, -webkit-transform .15s ease-in-out 1.1s;
}
.menu__trigger_show:checked ~ .menu__list .menu__list-text { -webkit-transform: translate(20px, -50%); transform: translate(20px, -50%); opacity: 1;
}
.menu__trigger_show:checked ~ .menu__overlay { -webkit-transition: opacity .25s ease-in-out .8s, -webkit-transform .1s ease-in-out .7s; transition: opacity .25s ease-in-out .8s, -webkit-transform .1s ease-in-out .7s; transition: transform .1s ease-in-out .7s, opacity .25s ease-in-out .8s; transition: transform .1s ease-in-out .7s, opacity .25s ease-in-out .8s, -webkit-transform .1s ease-in-out .7s; opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.menu__btn { -webkit-transition: opacity .1s ease-in-out .4s, -webkit-transform .4s ease-in-out .5s; transition: opacity .1s ease-in-out .4s, -webkit-transform .4s ease-in-out .5s; transition: opacity .1s ease-in-out .4s, transform .4s ease-in-out .5s; transition: opacity .1s ease-in-out .4s, transform .4s ease-in-out .5s, -webkit-transform .4s ease-in-out .5s; width: 20px; height: 16px; position: absolute; top: 20px; left: 20px; cursor: pointer; z-index: 10;
}
.menu__btn-icon { -webkit-transition: background .4s ease-in-out .6s; transition: background .4s ease-in-out .6s; position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; background: #8a9db1; z-index: 10;
}
.menu__btn-icon:before, .menu__btn-icon:after { content: ''; width: 100%; height: 100%; background: inherit; position: absolute; left: 0;
}
.menu__btn-icon:before { top: -7px;
}
.menu__btn-icon:after { bottom: -7px;
}
.menu__list { -webkit-transition: border .4s ease-in-out, box-shadow .4s ease-in-out, opacity .1s ease-in-out .5s, -webkit-transform .1s ease-in-out .8s; transition: border .4s ease-in-out, box-shadow .4s ease-in-out, opacity .1s ease-in-out .5s, -webkit-transform .1s ease-in-out .8s; transition: border .4s ease-in-out, box-shadow .4s ease-in-out, opacity .1s ease-in-out .5s, transform .1s ease-in-out .8s; transition: border .4s ease-in-out, box-shadow .4s ease-in-out, opacity .1s ease-in-out .5s, transform .1s ease-in-out .8s, -webkit-transform .1s ease-in-out .8s; position: absolute; opacity: 0; top: 0; left: 0; width: 100%; z-index: 20; padding: 0; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); background: #fff; border-bottom: 2px solid rgba(0, 0, 0, 0); box-shadow: none;
}
.menu__list-item { -webkit-transition: height .5s ease-in-out; transition: height .5s ease-in-out; border-bottom: 2px solid #cbd9ec; height: 7px; display: block; cursor: pointer; position: relative;
}
.menu__list-item:active { background: #364656; color: #fff;
}
.menu__list-item:first-child { height: 22px;
}
.menu__list-item:last-child { border-bottom: none;
}
.menu__list-item:nth-child(4) .menu__list-text { -webkit-transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out; transition: opacity .1s ease-in-out, -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out, opacity .1s ease-in-out; transition: transform .1s ease-in-out, opacity .1s ease-in-out, -webkit-transform .1s ease-in-out;
}
.menu__list-item:nth-child(3) .menu__list-text { -webkit-transition: opacity .1s ease-in-out .1s, -webkit-transform .1s ease-in-out .1s; transition: opacity .1s ease-in-out .1s, -webkit-transform .1s ease-in-out .1s; transition: transform .1s ease-in-out .1s, opacity .1s ease-in-out .1s; transition: transform .1s ease-in-out .1s, opacity .1s ease-in-out .1s, -webkit-transform .1s ease-in-out .1s;
}
.menu__list-item:nth-child(2) .menu__list-text { -webkit-transition: opacity .1s ease-in-out .2s, -webkit-transform .1s ease-in-out .2s; transition: opacity .1s ease-in-out .2s, -webkit-transform .1s ease-in-out .2s; transition: transform .1s ease-in-out .2s, opacity .1s ease-in-out .2s; transition: transform .1s ease-in-out .2s, opacity .1s ease-in-out .2s, -webkit-transform .1s ease-in-out .2s;
}
.menu__list-item:nth-child(1) .menu__list-text { -webkit-transition: opacity .1s ease-in-out .3s, -webkit-transform .1s ease-in-out .3s; transition: opacity .1s ease-in-out .3s, -webkit-transform .1s ease-in-out .3s; transition: transform .1s ease-in-out .3s, opacity .1s ease-in-out .3s; transition: transform .1s ease-in-out .3s, opacity .1s ease-in-out .3s, -webkit-transform .1s ease-in-out .3s;
}
.menu__list-text { position: absolute; top: 50%; left: 0; -webkit-transform: translate(-20px, -50%); transform: translate(-20px, -50%); opacity: 0;
}
.menu__overlay { -webkit-transition: opacity .25s ease-in-out, -webkit-transform .1s ease-in-out .25s; transition: opacity .25s ease-in-out, -webkit-transform .1s ease-in-out .25s; transition: opacity .25s ease-in-out, transform .1s ease-in-out .25s; transition: opacity .25s ease-in-out, transform .1s ease-in-out .25s, -webkit-transform .1s ease-in-out .25s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(138, 157, 177, .3); opacity: 0; -webkit-transform: translate(0, -100%); transform: translate(0, -100%)
}
.card { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px;
}
.card__avatar { background: #e4f3fa; border-radius: 50%; width: 120px; height: 120px; margin-bottom: 10px;
}
.card__name { width: 120px; height: 14px; background: #e4f3fa; margin-bottom: 10px; border-radius: 3px;
}
.card__title { width: 160px; height: 14px; background: #e4f3fa; margin-bottom: 20px; border-radius: 3px;
}
.card__description { background: #e4f3fa; height: 136px; width: 100%; border-radius: 3px;
}

Hamburger Menu - Script Codes JS Codes

/**
Pure css implementation of the concept:
https://dribbble.com/shots/2286361-Hamburger-Menu-Animation
**/
Hamburger Menu - Script Codes
Hamburger Menu - Script Codes
Home Page Home
Developer Mikita
Username MikitaLisavets
Uploaded January 19, 2023
Rating 3
Size 5,077 Kb
Views 6,072
Do you need developer help for Hamburger Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikita (MikitaLisavets) Script Codes
Name
Spin menu
Snap scroll
Note scales
Cards Menu
Loader
Rollers
Target scroll callback
Demon deer
A Pen by Mikita
Graph
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!