If you are looking for a responsive hamburger mobile menu made by using HTML and CSS only, then this article is for you. In this article I will share with you complete HTML and CSS code to create a hamburger menu.
This code can be used as basic structure of your website and it will eventually save your time. After implementing both of the HTML and CSS codes, your website will look like the following images.
Hamburger Menu on Desktop
This menu will look different on desktop as desktop have enough space to display all items of the menu on header of website. Here is a image below to find out how this menu will look on desktop.
Hamburger Menu on Mobile
On mobile devices, all the menu items on top of header will be wrapped inside of a hamburger menu. When user clicks on this hamburger menu, there will be a animation which will convert his menu into a cross and then it will show a list of all menu items.
After user click on the cross it will show animation of converting into three lines of hamburger menu and hide a list of all menu items. Here is a image below to find out how this hamburger menu will look on mobile device.
The above image shows before and after clicking on the hamburger menu button. This hamburger menu is made by using HTML and CSS only and without using any JavaScript.
Hamburger Menu HTML Code
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Hamburger Menu</title></head><body><header><nav><div class='logo-area'>Ham Menu</div><input class="check" type="checkbox"><div class="ham-menu"><div class="menuline"></div></div><ul class='menulist'><li><a href='#'>Home</a></li><li><a href='#'>About</a></li><li><a href='#'>Contact</a></li><li><a href='#'>Privacy</a></li></ul></nav></header><div class="content-area"><div class="content">Hello World.</div></div></body></html>
Hamburger Menu CSS Code
*{margin: 0;padding: 0;box-sizing: border-box;}.logo-area{color: #ffffff;font-size: 22px;font-weight: bold;margin: 10px;position: absolute;}header{height: 50px;width: 100%;z-index: 2;background: #008bff;position: relative;}.menulist {float: right;list-style: none;margin-right: 10px;position: relative;display: flex;}.menulist li{font-size: 18px;font-weight: bold;position: relative;margin: 10px;}.menulist li a{text-decoration: none;color: #ffffff;}.check{right: 0;height: 40px;width: 40px;position: absolute;margin: 3px 20px 0px 0px;z-index: 3;opacity: 0;}.ham-menu{float: right;height: 40px;width: 40px;margin: 3px 20px 0px 0px;position: relative;display: none;border: 2px solid #ffffff;}.menuline {background: #ffffff;height: 2px;width: 25px;position: relative;margin: auto;display: flex;top: 50%;}.menuline::before {content:'';position: absolute;background: #ffffff;height: 2px;width: 25px;top: -8px;}.menuline::after {content:'';position: absolute;background: #ffffff;height: 2px;width: 25px;top: 8px;}.content-area{height: 1000px;width: 100%;text-align: center;}.content{height: 500px;transform: translateY(50%);font-size: 30px;}@media only screen and (max-width:680px){header{position: fixed;}.menulist{position:fixed;width: 100%;height: 100%;margin-right: 0px;background:#008bff;top: 50px;padding-top: 50px;text-align: center;transition: 0.5s;right: -100%;}.ham-menu{display: block;}.menulist {display: block;margin-right: 0px;}.menulist li a{font-size: 22px;text-align: center;}.check:checked ~ .menulist{right: 0;}.check:checked ~ .ham-menu .menuline{transform: rotate(135deg);transition: 0.3s ease;}.check:checked ~ .ham-menu .menuline::before,.check:checked ~ .ham-menu .menuline::after{top: 0;transform: rotate(90deg);}}
0 Comments