Skip to content

Commit 248eb8d

Browse files
Shreekant-04Shreekant-04
committed
hamburger menu created
1 parent 99bd0b7 commit 248eb8d

File tree

3 files changed

+111
-0
lines changed

3 files changed

+111
-0
lines changed

‎Hamburger Menu/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
<title>Hamburger Menu</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9+
</head>
10+
<body>
11+
<input type="checkbox" name="menu" id="menu-btn" />
12+
<label for="menu-btn" class="menu">
13+
<span class="h1"></span>
14+
<span class="h2"></span>
15+
<span class="h3"></span>
16+
</label>
17+
<ul class="list">
18+
<li><a href="" class="link">Home</a></li>
19+
<li><a href="" class="link">About</a></li>
20+
<li><a href="" class="link">Service</a></li>
21+
<li><a href="" class="link"> Contact</a></li>
22+
</ul>
23+
</body>
24+
</html>

‎Hamburger Menu/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
body {
7+
height: 100vh;
8+
width: 100vw;
9+
background-color: aqua;
10+
overflow-x: hidden;
11+
background-color: black;
12+
}
13+
.list {
14+
height: 50vh;
15+
width: 20vw;
16+
background-color: #fff;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
gap: 5%;
22+
padding-top: 5%;
23+
list-style: none;
24+
position: fixed;
25+
top: 0;
26+
left: -20%;
27+
transition: 0.5s;
28+
}
29+
.list a {
30+
font-size: 2vw;
31+
text-decoration: none;
32+
color: black;
33+
}
34+
.links {
35+
margin-top: 20%;
36+
}
37+
#menu-btn {
38+
display: none;
39+
}
40+
.menu {
41+
width: 8vmin;
42+
height: 8vmin;
43+
margin: 15px;
44+
z-index: 999;
45+
position: fixed;
46+
top: 0;
47+
left: 0;
48+
display: flex;
49+
justify-content: center;
50+
flex-direction: column;
51+
align-items: center;
52+
justify-content: center;
53+
cursor: pointer;
54+
transition: 0.75s;
55+
}
56+
.menu span {
57+
display: block;
58+
margin-bottom: 5px;
59+
border-radius: 20px;
60+
background-color: #fff;
61+
height: 1vmin;
62+
width: 5vmin;
63+
transition: 0.75s;
64+
}
65+
#menu-btn:checked ~ .list {
66+
left: 0;
67+
}
68+
#menu-btn:checked ~ label span:first-child {
69+
transform: rotate(45deg) scale(1.1);
70+
transform-origin: 0% 0%;
71+
background-color: black;
72+
}
73+
74+
#menu-btn:checked ~ label span:nth-child(3) {
75+
transform: rotate(-45deg) scale(1.1);
76+
transform-origin: 0% 100%;
77+
background-color: black;
78+
}
79+
80+
#menu-btn:checked ~ label span:nth-child(2) {
81+
opacity: 0;
82+
transform: scaleX(0);
83+
transform-origin: 0;
84+
}
85+
#menu-btn:checked ~ .menu {
86+
transform: translateX(210px);
87+
}

‎README.md‎

404 Bytes

0 commit comments

Comments
 (0)