Skip to content

Commit 0b944dc

Browse files
wonderakweiwonderakwei
committed
first commit
0 parents  commit 0b944dc

File tree

5 files changed

+165
-0
lines changed

5 files changed

+165
-0
lines changed

‎README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Hamburger Menu Project
2+
3+
## Overview
4+
This project is a simple and responsive hamburger menu designed for modern web applications. The menu is implemented using HTML, CSS, and JavaScript, and it provides a sleek and user-friendly navigation experience.
5+
6+
## Features
7+
- **Responsive Design**: The menu adjusts its size and layout for different screen widths, ensuring a consistent experience across devices.
8+
- **Hamburger Icon Toggle**: The menu can be opened and closed by clicking on the hamburger icon.
9+
- **Smooth Animations**: The menu slides in and out smoothly, enhancing the overall user experience.
10+
- **Accessible Navigation**: The project includes basic accessibility features, like aria labels, to improve usability for screen readers.
11+
12+
## Preview
13+
14+
![Preview](preview.png)
15+
16+
*This image shows how the hamburger menu appears on screen.*
17+
18+
## Structure
19+
- `index.html`: The main HTML file containing the structure of the menu and the navigation links.
20+
- `style.css`: The CSS file that styles the menu, including its responsive design and animations.
21+
- `script.js`: The JavaScript file responsible for toggling the menu's visibility and handling interactions.
22+

‎index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="author" content="Wonder Akwei">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Hamburger Menu</title>
9+
</head>
10+
<body>
11+
<header>
12+
<div class="wrapper">
13+
<div class="menu-toggle">
14+
<div class="menulogo"></div>
15+
<div class="menulogo"></div>
16+
<div class="menulogo"></div>
17+
</div>
18+
</div>
19+
<nav class="menu">
20+
<ul>
21+
<li><a href="#">Home</a></li>
22+
<li><a href="#">Contact</a></li>
23+
<li><a href="#">About Us</a></li>
24+
<li><a href="#">Downloads</a></li>
25+
<li><a href="#">Developers</a></li>
26+
</ul>
27+
</nav>
28+
</header>
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎preview.png

8.38 KB
Loading

‎script.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const menuToggle = document.querySelector('.menu-toggle');
2+
const menu = document.querySelector('.menu');
3+
4+
menuToggle.addEventListener('click', function() {
5+
menu.classList.toggle('showmenu');
6+
});
7+
8+
document.addEventListener('click', function(event) {
9+
if (!menu.contains(event.target) && !menuToggle.contains(event.target)) {
10+
menu.classList.remove('showmenu');
11+
}
12+
});

‎style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* Reset and Base Styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
9+
/* Body Styling */
10+
body {
11+
background-color: darkblue;
12+
color: white;
13+
font-size: 16px;
14+
}
15+
16+
/* Wrapper Styling */
17+
.wrapper {
18+
width: 90%;
19+
margin: 0 auto;
20+
}
21+
22+
/* Menu Toggle Styling */
23+
.menu-toggle {
24+
float: right;
25+
height: 30px;
26+
width: 40px;
27+
margin-top: 20px;
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: space-between;
31+
align-items: center;
32+
cursor: pointer;
33+
}
34+
35+
/* Hamburger Menu Icon */
36+
.menulogo {
37+
background-color: snow;
38+
height: 4px;
39+
width: 30px;
40+
border-radius: 2px;
41+
}
42+
43+
/* Navigation Menu */
44+
.menu {
45+
background-color: slateblue;
46+
width: 75%;
47+
height: 100vh;
48+
padding: 50px;
49+
position: fixed;
50+
top: 0;
51+
left: -100%;
52+
transition: left 0.5s ease-in-out;
53+
}
54+
55+
.menu.showmenu {
56+
left: 0;
57+
}
58+
59+
.menu ul {
60+
list-style-type: none;
61+
}
62+
63+
.menu li {
64+
border-bottom: 1px solid rgb(130, 117, 218);
65+
padding: 20px 0;
66+
text-align: center;
67+
}
68+
69+
.menu li:last-child {
70+
border-bottom: none;
71+
}
72+
73+
.menu li a {
74+
color: snow;
75+
text-decoration: none;
76+
font-size: 20px;
77+
display: block;
78+
transition: color 0.3s ease-in-out;
79+
}
80+
81+
.menu li a:hover {
82+
color: lightgray;
83+
}
84+
85+
/* Media Queries for Responsiveness */
86+
@media screen and (min-width: 1000px) {
87+
.menu {
88+
width: 500px;
89+
}
90+
}
91+
92+
@media screen and (max-width: 600px) {
93+
.menu {
94+
width: 80%;
95+
}
96+
97+
.menu li a {
98+
font-size: 16px;
99+
}
100+
}

0 commit comments

Comments
 (0)