Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0b944dc

Browse files
first commit
0 parents commit 0b944dc

File tree

5 files changed

+165
-0
lines changed

5 files changed

+165
-0
lines changed

‎README.md‎

Lines changed: 22 additions & 0 deletions
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‎

Lines changed: 31 additions & 0 deletions
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‎

Lines changed: 12 additions & 0 deletions
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‎

Lines changed: 100 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /