Skip to content

Commit 4595382

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #506 from Code-With-Abhishek-Kumar/main
Navigation Bar
2 parents cde4a31 + 989b455 commit 4595382

File tree

3 files changed

+310
-0
lines changed

3 files changed

+310
-0
lines changed

‎Responsive Navigation Bar /index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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+
<!-- Csn Start -->
7+
<script type="module"
8+
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
9+
<script nomodule
10+
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
11+
12+
<link rel="stylesheet"
13+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
14+
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
15+
crossorigin="anonymous" referrerpolicy="no-referrer" />
16+
17+
<!-- Csn End -->
18+
<!-- css start -->
19+
<link rel="stylesheet" href="style.css">
20+
<!-- css end -->
21+
<title>Responsive Navigation Bar </title>
22+
</head>
23+
<body>
24+
<script src="script.js" defer></script>
25+
<nav>
26+
<div class="logo">
27+
<h1>Coder Abhi</h1>
28+
29+
</div>
30+
31+
<ol class="navbar-list">
32+
33+
<li>Home</li>
34+
<li >About </li>
35+
<li>Contact us</li>
36+
<li>Blog</li>
37+
38+
</ol>
39+
40+
<div class="mobile-navbar-btn">
41+
42+
<!-- <ion-icon name="menu-outline" class="mobile-nav-icon"
43+
id="nav-btn"> -->
44+
45+
<i class="fa-solid fa-bars" class="mobile-nav-icon" id="nav-btn"></i>
46+
47+
48+
49+
50+
<!-- <ion-icon name="close-outline" class="mobile-nav-icon"
51+
id="close-nav"> -->
52+
53+
</ion-icon>
54+
55+
</ion-icon>
56+
57+
</div>
58+
59+
</nav>
60+
61+
<section class="sec">
62+
Hero Section
63+
64+
</section>
65+
<hr>
66+
<section class="sec">
67+
Servise Section
68+
</section>
69+
70+
<hr>
71+
<section class="sec">
72+
About me Section
73+
</section>
74+
75+
</body>
76+
</html>

‎Responsive Navigation Bar /script.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
let nav_btn = document.getElementById("nav-btn");
2+
let nav = document.querySelector("nav");
3+
let navlist = document.querySelector('.navbar-list');
4+
5+
6+
// console.log(nav_btn)
7+
8+
9+
10+
11+
12+
13+
14+
// console.log(navlist)
15+
16+
17+
18+
19+
20+
var navopen = 0;
21+
22+
// console.log(navopen);
23+
24+
25+
nav_btn.addEventListener('click', () => {
26+
// open.style.display = none;
27+
// open.style.display = "none";
28+
// nav.style.display = "none";
29+
30+
31+
// nav.style.height = '100%';
32+
// navlist.style.display = "none";
33+
// nav_btn.style.display = "none";
34+
35+
36+
37+
if (navopen == 0) {
38+
nav.style.height = '100vh';
39+
// nav_btn.style.display = "none";
40+
console.log(navopen);
41+
nav_btn.classList.remove("fa-bars");
42+
nav_btn.classList.add("fa-xmark");
43+
44+
45+
navlist.style.display = "flex";
46+
// close_nav.style.display = "none";
47+
48+
// console.log(navlist)
49+
50+
navopen = 1;
51+
52+
53+
54+
55+
}
56+
else {
57+
// nav.classList
58+
nav_btn.classList.add("fa-bars");
59+
nav_btn.classList.remove("fa-xmark");
60+
nav.style.height = 'auto';
61+
navlist.style.display = "none";
62+
63+
// nav_btn.style.display = "block";
64+
// close_nav.style.display = "block";
65+
navopen = 0;
66+
67+
68+
69+
70+
}
71+
72+
73+
74+
75+
76+
77+
})
78+
79+
80+
// music.addEventListener('timeupdate', () => {
81+
// progress = parseInt((music.currentTime / music.duration) * 100);
82+
// myProgressbar.value = progress;
83+
// })

‎Responsive Navigation Bar /style.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
nav{
7+
display: flex;
8+
align-items: center;
9+
height: 7vh;
10+
justify-content: space-between;
11+
background-color: blueviolet;
12+
color: white;
13+
14+
}
15+
16+
.navbar-list{
17+
display: flex;
18+
gap: 18px;
19+
}
20+
21+
.navbar-list> li{
22+
display: inline;
23+
24+
}
25+
26+
.sec{
27+
display: flex;
28+
width: 100vw;
29+
height: 100vh;
30+
background-color: rgb(183, 217, 13);
31+
align-items: center;
32+
justify-content: center;
33+
color: white;
34+
35+
}
36+
37+
.mobile-navbar-btn{
38+
39+
display: none;
40+
gap: 12px;
41+
cursor: pointer;
42+
color: black;
43+
cursor: pointer;
44+
margin: 0px 45px;
45+
46+
47+
}
48+
49+
.navbar-list{
50+
display: flex;
51+
gap: 18px;
52+
}
53+
54+
.navbar-list> li{
55+
display: inline;
56+
font-size: 2rem;
57+
58+
}
59+
60+
61+
62+
.mobile-nav-icon{
63+
font-size: 2em;
64+
line-height: .03125em
65+
66+
67+
68+
69+
}
70+
71+
.mobile-nav-icon[name="close-outline"]{
72+
display: none;
73+
}
74+
75+
@media screen and (max-width:600px) {
76+
77+
.mobile-navbar-btn {
78+
79+
display: flex;
80+
justify-content: right;
81+
position: absolute;
82+
top: 0;
83+
padding: 12px 12px;
84+
85+
width: 100%;
86+
gap: 12px;
87+
background-color: rgb(211, 35, 35);
88+
89+
90+
91+
}
92+
93+
.mobile-navbar-btn > ion-icon {
94+
95+
margin-right: 30px;
96+
border: 2px solid black;
97+
98+
99+
100+
101+
}
102+
103+
.mobile-navbar-btn > i{
104+
padding: 5px;
105+
106+
margin-right: 30px;
107+
border: 2px solid black;
108+
109+
110+
111+
112+
}
113+
114+
115+
.logo{
116+
display: none;
117+
}
118+
119+
120+
nav{
121+
position: absolute;
122+
width: 100%;
123+
/* display: none; */
124+
align-items: center;
125+
justify-content: center;
126+
height: auto;
127+
top: 0;
128+
left: 0;
129+
130+
131+
}
132+
133+
.navbar-list{
134+
135+
display: none;
136+
137+
flex-direction: column;
138+
}
139+
140+
.navbar-list> li{
141+
/* display: none; */
142+
143+
144+
145+
}
146+
147+
148+
149+
150+
151+
}

0 commit comments

Comments
 (0)