├── README.md
├── index.html
├── script.js
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # ResponsiveNavbar By CodeBustler
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Responsive Navbar | 9/100 Project By CodeBustler
9 |
10 |
11 |
30 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | let hamburger = document.querySelector('.hamburger');
2 | let navLinks = document.getElementById('nav-links');
3 | let links = document.querySelectorAll('.links');
4 |
5 | hamburger.addEventListener('click', () => {
6 | navLinks.classList.toggle('hide');
7 | hamburger.classList.toggle('lines-rotate');
8 | });
9 |
10 | for (let i = 0; i < links.length; i++) {
11 | links[i].addEventListener('click', () => {
12 | navLinks.classList.toggle('hide');
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: 'Segoe UI', sans-serif;
6 | text-decoration: none;
7 | text-align: center;
8 | }
9 |
10 | body {
11 | position: relative;
12 | height: 100vh;
13 | }
14 |
15 | nav {
16 | background-color: #191e24f5;
17 | display: flex;
18 | justify-content: space-between;
19 | align-items: center;
20 | gap: 50px;
21 | padding: 15px 50px;
22 | box-shadow: 10px 10px 10px rgba(128, 128, 128, 0.548);
23 | color: white;
24 | }
25 |
26 | nav ul {
27 | list-style-type: none;
28 | display: flex;
29 | align-items: center;
30 | gap: 20px;
31 | }
32 |
33 | li {
34 | width: 70px;
35 | }
36 |
37 | li a {
38 | font-size: 1.1rem;
39 | cursor: pointer;
40 | padding: 20px 15px;
41 | transition: 0.5s;
42 | color: white;
43 | }
44 |
45 | li a:hover {
46 | color: #f1c40f;
47 | border-bottom: 4px #f1c40f solid;
48 | transition: 0.5s;
49 | }
50 |
51 | .hide {
52 | top: 70px;
53 | }
54 |
55 | @media screen and (max-width: 700px) {
56 | /* HAMBURGER */
57 | .hamburger {
58 | display: flex;
59 | flex-direction: column;
60 | gap: 8px;
61 | cursor: pointer;
62 | padding: 10px;
63 | margin-right: -10px;
64 | }
65 |
66 | .lines {
67 | display: block;
68 | background-color: white;
69 | height: 2px;
70 | width: 35px;
71 | }
72 |
73 | .lines-rotate {
74 | background-color: rgb(85, 84, 84);
75 | border-radius: 5px;
76 | }
77 |
78 | nav {
79 | position: relative;
80 | padding: 15px 20px;
81 | }
82 |
83 | ul {
84 | width: 100%;
85 | flex-direction: column;
86 | justify-content: center;
87 | align-items: center;
88 | position: absolute;
89 | top: -300px;
90 | right: 0;
91 | background-color: #f1c40f;
92 | padding: 35px 0;
93 | border-radius: 0 0 20px 20px;
94 | box-shadow: 0px 5px 5px rgba(128, 128, 128, 0.363);
95 | }
96 |
97 | li a {
98 | color: rgba(12, 11, 11, 0.836);
99 | }
100 |
101 | li {
102 | text-align: center;
103 | width: 90vw;
104 | }
105 |
106 | li a:hover {
107 | font-weight: bold;
108 | color: #191e24;
109 | border: none;
110 | letter-spacing: 3px;
111 | }
112 | }
113 |
114 | /* SKIP */
115 | footer {
116 | position: absolute;
117 | bottom: 30px;
118 | margin: 30px;
119 | }
120 | footer a {
121 | color: grey;
122 | }
123 |
--------------------------------------------------------------------------------