Simple Hamburger Menu

Developer
Yang Li
Size
2,099 Kb
Views
4,048
  1. Simple Hamburger Menu Previews
  2. Simple Hamburger Menu HTML Codes
  3. Simple Hamburger Menu CSS Codes
  4. Simple Hamburger Menu JS Codes

How do I make an simple hamburger menu?

What is a simple hamburger menu? How do you make a simple hamburger menu? This script and codes were developed by Yang Li on 13 January 2023, Friday.

Simple Hamburger Menu Previews
IQ Test

Simple Hamburger Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Hamburger Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="menu"> <div class="item one"><a href="">Home</a></div> <div class="item two"><a href="">About</a></div> <div class="item three"><a href="">Projects</a></div> <div class="item four"><a href="">Contact</a></div> <img id="burgerIcon" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" />
</div>
<div id="hamburgerMenu"> <div class="dropdown one"><a href="">Home</a></div> <div class="dropdown two"><a href="">About</a></div> <div class="dropdown three"><a href="">Projects</a></div> <div class="dropdown four"><a href="">Contact</a></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Simple Hamburger Menu - Script Codes CSS Codes

#menu { background-color: lightblue; display: flex; justify-content: flex-end;
}
.item { padding: 10px; font-size: 20px;
}
.item a { text-decoration: none;
}
#hamburgerMenu { background-color: lightblue; text-align: center; display: none
}
.dropdown { width: 100%; border: 1px dotted black; padding: 10px; font-size: 20px;
}
.dropdown a { text-decoration: none;
}
#burgerIcon { width: 30px; height: 30px; padding: 10px; cursor: pointer; display: none; transition: all .2s ease-in-out;
}
#burgerIcon:hover { transform: scale(1.5);
}
.one a { color: red;
}
.three a { color: red;
}
@media screen and (max-width: 600px) { .item { display: none; } #burgerIcon { display: flex; }
}

Simple Hamburger Menu - Script Codes JS Codes

var icon = document.getElementById("burgerIcon");
var dropdownItems = document.getElementById("hamburgerMenu");
icon.onclick = function() { if (dropdownItems.style.display == "none") { dropdownItems.style.display = "block"; } else { dropdownItems.style.display = "none"; }
}
Simple Hamburger Menu - Script Codes
Simple Hamburger Menu - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded January 13, 2023
Rating 3
Size 2,099 Kb
Views 4,048
Do you need developer help for Simple 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!

Yang Li (aussieyang) Script Codes
Name
Battleships Starter
Fellowship of the Ring
Battleships Starter v2
Birthday Party Starter
Responding Boxes
CSS Photoframe
Progress Bar
My Friends Starter
Battleships
Googly Eye
Create amazing web content 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!