Skip to content

Commit c68d6d5

Browse files
Sumandeep-KaurSumandeep-Kaur
committed
added dropdown navbar
1 parent 3866c71 commit c68d6d5

File tree

3 files changed

+86
-68
lines changed

3 files changed

+86
-68
lines changed

‎Navbars/Side_Navbar_02/code/index.html

+16-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,22 @@
88
<title>Navbar Style</title>
99
</head>
1010
<body>
11-
<details class="menuBox">
12-
<summary class="icon"></summary>
13-
<nav class="menu">
14-
<a href="#link">Home</a>
15-
<a href="#link">Services</a>
16-
<a href="#link">Projects</a>
17-
<a href="#link">Contact</a>
18-
<a href="#link">About</a>
19-
</nav>
11+
<div class="navbar">
12+
<div class="icon" id="icon" onclick="openMenu()">
13+
<div class="bar" id="bar1"></div>
14+
<div class="bar" id="bar2"></div>
15+
<div class="bar" id="bar3"></div>
16+
</div>
17+
<ul class="menu" id="menu">
18+
<li><a href="#">Home</a></li>
19+
<li><a href="#">Services</a></li>
20+
<li><a href="#">Projects</a></li>
21+
<li><a href="#">Contact</a></li>
22+
<li><a href="#">About</a></li>
23+
</ul>
2024
</div>
25+
26+
<script src="script.js"></script>
27+
2128
</body>
2229
</html>

‎Navbars/Side_Navbar_02/code/script.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
function openMenu() {
2+
document.getElementById("icon").classList.toggle("change");
3+
document.getElementById("menu").classList.toggle("open");
4+
}

‎Navbars/Side_Navbar_02/code/style.css

+66-59
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,103 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
16
body {
27
background-color: #dcdcdc;
3-
font-family: Arial, Helvetica, sans-serif;
4-
font-size: 20px;
58
}
6-
.menuBox {
7-
margin: 20px;
9+
.navbar {
10+
margin: 30px;
811
}
912
.icon {
10-
writing-mode: vertical-lr;
11-
text-align: center;
12-
padding: 12px 10px;
13-
width: 23px;
14-
height: 17px;
15-
background-color: #dcdcdc;
13+
height: 60px;
14+
width: 60px;
15+
cursor: pointer;
16+
padding: 20px 10px;
1617
border: 2px solid #555555;
1718
border-radius: 4px;
18-
color: #555555;
19-
cursor: pointer;
20-
user-select: none;
21-
outline: none;
22-
transition: transform 200ms ease-in-out 0s;
23-
}
24-
.icon::before,
25-
.icon::after {
26-
position: static;
27-
top: 0;
28-
left: 0;
29-
}
30-
.icon::before {
31-
content: "";
3219
}
33-
.icon::after {
34-
content: "III";
35-
}
36-
.icon:hover {
37-
transform: scale(1.1);
20+
.bar {
21+
height: 5px;
22+
width: 100%;
23+
background: #555555;
24+
border-radius: 10px;
25+
display: block;
26+
transition: .5s ease;
3827
}
39-
.icon::marker {
40-
font-size: 0;
28+
#bar1{
29+
transform: translateY(-8px);
4130
}
42-
.icon::-webkit-details-marker {
43-
display: none;
31+
#bar3 {
32+
transform: translateY(8px);
4433
}
45-
.menuBox[open] .menu {
46-
animation-name: openMenu;
34+
.change #bar1 {
35+
width: 42px;
36+
transform: rotateZ(45deg) translate(2px, 5px);
4737
}
48-
.menuBox[open] .icon::before {
49-
content: "X";
38+
.change #bar2 {
39+
opacity: 0;
5040
}
51-
.menuBox[open] .icon::after {
52-
content: "";
41+
.change #bar3 {
42+
width: 42px;
43+
transform: rotateZ(-45deg) translate(2px, -5px);
5344
}
5445
.menu {
55-
height: 0;
5646
width: fit-content;
5747
border-radius: 5px;
5848
background-color: darkgray;
49+
font-size: 20px;
5950
font-family: monospace;
6051
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
61-
margin-top: 8px;
62-
display: flex;
63-
flex-direction: column;
64-
justify-content: space-between;
65-
overflow: hidden;
66-
animation: openMenu .3s ease-in-out forwards;
67-
}
68-
.menu a {
52+
margin-top: 10px;
53+
animation: openMenu .5s ease-in-out forwards;
54+
transform-origin: top center;
55+
display: none;
56+
}
57+
.menu li {
58+
list-style: none;
59+
display: block;
60+
margin: 10px 20px;
6961
padding: 15px 25px;
70-
margin: 0 15px;
71-
color: rgb(55, 55, 55);
7262
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
73-
text-decoration: none;
7463
text-align: center;
75-
transition: filter 200ms linear 0s;
7664
}
77-
.menu a:nth-of-type(1) {
78-
padding-top: 20px;
65+
.menu li a {
66+
text-decoration: none;
67+
color: rgb(55, 55, 55);
7968
}
80-
.menu a:nth-last-of-type(1) {
69+
.menu li:nth-last-child(1) {
8170
border-bottom: none;
8271
padding-bottom: 20px;
8372
}
84-
.menu a:hover {
73+
.menu li:hover {
8574
transform: scale(1.1);
86-
transition: 0.2s ease-out;
75+
transition: 0.2s ease;
8776
color: rgb(35, 35, 35);
8877
}
78+
.open {
79+
display: block;
80+
}
8981
@keyframes openMenu {
9082
0% {
91-
height: 0;
83+
transform: scaleY(0)
84+
}
85+
80% {
86+
transform: scaleY(1.1)
9287
}
9388
100% {
94-
height: 315px;
89+
transform: scaleY(1)
9590
}
9691
}
92+
93+
94+
95+
96+
97+
98+
99+
100+
101+
102+
103+

0 commit comments

Comments
 (0)