Skip to content

Commit 83f7bac

Browse files
Merge pull request #527 from Yashop181/navbar
Color Changing and Responsive Navbar Added
2 parents cf6c353 + c7992b8 commit 83f7bac

File tree

10 files changed

+435
-0
lines changed

10 files changed

+435
-0
lines changed

navbar/About.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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>Responsive Navbar</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h1>ABout page</h1>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<!-- Your content here -->
31+
<h1>ABout page</h1>
32+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
33+
<!-- Your content here -->
34+
<h1>ABout page</h1>
35+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
36+
<!-- Your content here -->
37+
<h1>ABout page</h1>
38+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
39+
<!-- Your content here -->
40+
<h1>ABout page</h1>
41+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
42+
<!-- Your content here -->
43+
<h1>ABout page</h1>
44+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
45+
<!-- Your content here -->
46+
<h1>ABout page</h1>
47+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
48+
<!-- Your content here -->
49+
<h1>ABout page</h1>
50+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
51+
<!-- Your content here -->
52+
<h1>ABout page</h1>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<!-- Your content here -->
55+
<h1>ABout page</h1>
56+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
57+
<!-- Your content here -->
58+
<h1>ABout page</h1>
59+
60+
<!-- Your content here -->
61+
</div>
62+
<script src="script.js"></script>
63+
</body>
64+
</html>

navbar/Screenshot (1092).png

104 KB
Loading

navbar/Screenshot (1093).png

115 KB
Loading

navbar/Screenshot (1094).png

80.4 KB
Loading

navbar/contact.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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>Responsive Navbar</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h1>Contact page</h1>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<h1>Contact page</h1>
31+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
32+
<h1>Contact page</h1>
33+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
34+
<h1>Contact page</h1>
35+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
36+
<h1>Contact page</h1>
37+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
38+
<h1>Contact page</h1>
39+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
40+
<h1>Contact page</h1>
41+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
42+
<h1>Contact page</h1>
43+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
44+
<h1>Contact page</h1>
45+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
46+
<h1>Contact page</h1>
47+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
48+
<h1>Contact page</h1>
49+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
50+
<h1>Contact page</h1>
51+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
52+
<h1>Contact page</h1>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<h1>Contact page</h1>
55+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
56+
<h1>Contact page</h1>
57+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
58+
<h1>Contact page</h1>
59+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
60+
61+
<!-- Your content here -->
62+
</div>
63+
<script src="script.js"></script>
64+
</body>
65+
</html>

navbar/index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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>Responsive Navbar</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h2>Welcome to my website!</h2>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<!-- Your content here -->
31+
<h2>Welcome to my website!</h2>
32+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
33+
<!-- Your content here -->
34+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
35+
<!-- Your content here -->
36+
<h2>Welcome to my website!</h2>
37+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
38+
<!-- Your content here -->
39+
<h2>Welcome to my website!</h2>
40+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
41+
<!-- Your content here -->
42+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
43+
<!-- Your content here -->
44+
<h2>Welcome to my website!</h2>
45+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
46+
<!-- Your content here -->
47+
<h2>Welcome to my website!</h2>
48+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
49+
<!-- Your content here -->
50+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
51+
<!-- Your content here -->
52+
<h2>Welcome to my website!</h2>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<!-- Your content here -->
55+
<h2>Welcome to my website!</h2>
56+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
57+
<!-- Your content here -->
58+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
59+
<!-- Your content here -->
60+
<h2>Welcome to my website!</h2>
61+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
62+
<!-- Your content here -->
63+
<h2>Welcome to my website!</h2>
64+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
65+
<!-- Your content here -->
66+
67+
<!-- Your content here -->
68+
</div>
69+
<script src="script.js"></script>
70+
</body>
71+
</html>

navbar/readme.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Dynamic Navbar Project
2+
3+
### Description
4+
5+
This project features a dynamic and responsive navbar that changes its background color upon scrolling. The navbar is built using HTML, CSS, and JavaScript, providing a seamless and engaging user experience. The responsiveness ensures that the navbar adapts to different screen sizes, making it suitable for both desktop and mobile views.
6+
7+
### Features
8+
9+
- Background color change on scroll
10+
- Fully responsive design
11+
- Smooth transitions and animations
12+
13+
### Use of Project
14+
15+
This dynamic navbar can be used in any website to enhance navigation and visual appeal. It is particularly useful for websites that require a modern and interactive user interface.
16+
17+
Stack Used:-
18+
19+
HTML: For the basic structure of the navbar.
20+
CSS: For styling the navbar and ensuring responsiveness.
21+
22+
JavaScript: For adding interactivity and handling the scroll event.
23+
24+
Output:-
25+
26+
Output (Screenshots)
27+
28+
Screenshot (1092).png
29+
Screenshot (1093).png
30+
Screenshot (1094).png
31+
32+
The README.md file of my project contains:
33+
34+
Related Issues or Pull Requests
35+
36+
PR: #47

navbar/script.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
window.onload = function () {
2+
var toggleButton = document.getElementById("navbar-toggle");
3+
var navbarLinks = document.getElementById("navbar-links");
4+
var navbar = document.getElementById("navbar");
5+
6+
toggleButton.onclick = function () {
7+
navbarLinks.classList.toggle("show");
8+
};
9+
10+
// Close navbar when a link is clicked
11+
navbarLinks.querySelectorAll("a").forEach(function(link) {
12+
link.addEventListener("click", function() {
13+
navbarLinks.classList.remove("show");
14+
});
15+
});
16+
17+
window.addEventListener("scroll", function () {
18+
if (window.scrollY > 50) {
19+
navbar.classList.add("scrolled");
20+
} else {
21+
navbar.classList.remove("scrolled");
22+
}
23+
});
24+
};

navbar/services.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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>Responsive Navbar</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h1>service page</h1>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<!-- Your content here -->
31+
<h1>service page</h1>
32+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
33+
<!-- Your content here -->
34+
<h1>service page</h1>
35+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
36+
<!-- Your content here -->
37+
<h1>service page</h1>
38+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
39+
<!-- Your content here -->
40+
<h1>service page</h1>
41+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
42+
<!-- Your content here -->
43+
<h1>service page</h1>
44+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
45+
<!-- Your content here -->
46+
<h1>service page</h1>
47+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
48+
<!-- Your content here -->
49+
<h1>service page</h1>
50+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
51+
<!-- Your content here -->
52+
<h1>service page</h1>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<!-- Your content here -->
55+
<h1>service page</h1>
56+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
57+
<!-- Your content here -->
58+
<h1>service page</h1>
59+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
60+
<!-- Your content here -->
61+
<h1>service page</h1>
62+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
63+
<!-- Your content here -->
64+
<h1>service page</h1>
65+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
66+
<!-- Your content here -->
67+
<h1>service page</h1>
68+
69+
70+
<!-- Your content here -->
71+
</div>
72+
<script src="script.js"></script>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)