├── images
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
└── logo.png
├── screenshot.jpg
├── README.md
├── index.html
├── script.js
└── style.css
/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Animated-Navbar/HEAD/images/1.jpg
--------------------------------------------------------------------------------
/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Animated-Navbar/HEAD/images/2.jpg
--------------------------------------------------------------------------------
/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Animated-Navbar/HEAD/images/3.jpg
--------------------------------------------------------------------------------
/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Animated-Navbar/HEAD/images/4.jpg
--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Animated-Navbar/HEAD/images/logo.png
--------------------------------------------------------------------------------
/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Animated-Navbar/HEAD/screenshot.jpg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Animated Navbar
2 | In this tutorial ([Open in Youtube](https://youtu.be/Dednh-JMr0Y)), I'm going to show you how to use modern HTML, CSS and JS to create a completely responsive Animated Navbar. We'll be using CSS Flexbox, Media queries for our responsive project, and CSS transition for animating it.
3 |
4 | # Screenshot
5 | Here we have project screenshot :
6 |
7 | 
8 |
9 | # AsmrProg
10 |
11 | We create a project each 4 days with voting on our Youtube channel.
12 | You can vote for upcoming projects on our channel **community** page :wink:
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Animated Scrolling Nav
9 |
10 |
11 |
12 |
13 |
26 |
27 |
28 |
31 |
34 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', function () {
2 | const header = document.querySelector('header');
3 | const container = document.getElementById('container');
4 | const menuButton = document.getElementById('menu');
5 | const links = document.querySelectorAll('a[href^="#"]');
6 |
7 | // Function to handle the scroll
8 | function handleScroll() {
9 | container.classList.remove('menuopen');
10 | header.classList.toggle('sticky', window.scrollY >= 100);
11 | }
12 |
13 | // Function to handle menu button click
14 | function handleMenuButtonClick() {
15 | header.classList.remove('sticky');
16 | container.classList.toggle('menuopen');
17 | }
18 |
19 | // Function to handle anchor links click
20 | function handleLinkClick(event) {
21 | event.preventDefault();
22 | const targetId = this.getAttribute('href');
23 | const targetElement = document.querySelector(targetId);
24 | if (targetElement) {
25 | targetElement.scrollIntoView({
26 | behavior: 'smooth'
27 | });
28 | }
29 | }
30 |
31 | // Function to close the menu when clicking outside and show the sticky menu
32 | function handleCloseOutside(event) {
33 | if (!menuButton.contains(event.target)) {
34 | // Check if the click was outside the menu button
35 | container.classList.remove('menuopen');
36 | header.classList.add('sticky');
37 | }
38 | }
39 |
40 | window.addEventListener('scroll', handleScroll);
41 | menuButton.addEventListener('click', handleMenuButtonClick);
42 | links.forEach(link => link.addEventListener('click', handleLinkClick));
43 |
44 | // Listen for clicks anywhere in document
45 | document.addEventListener('click', handleCloseOutside);
46 | });
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
2 |
3 | body{
4 | background-color: #000;
5 | color: #fff;
6 | font-family: 'Roboto', sans-serif;
7 | overflow-x: hidden;
8 | }
9 |
10 | #container{
11 | transition: 1s all ease-in-out;
12 | }
13 |
14 | #container.menuopen{
15 | filter: blur(8px);
16 | transform: scale(1.2);
17 | }
18 |
19 | section{
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | height: 100vh;
24 | position: relative;
25 | background-size: cover;
26 | padding: 50px;
27 | }
28 |
29 | section::after{
30 | content: "";
31 | position: absolute;
32 | background-color: #000;
33 | height: 100%;
34 | width: 100%;
35 | top: 0;
36 | left: 0;
37 | opacity: 0.5;
38 | }
39 |
40 | section h1{
41 | font-size: 120px;
42 | z-index: 2;
43 | }
44 |
45 | header{
46 | z-index: 9999;
47 | position: relative;
48 | }
49 |
50 | header #logo{
51 | position: fixed;
52 | top: 30px;
53 | left: 0;
54 | right: 0;
55 | width: 70px;
56 | height: auto;
57 | margin: 0 auto;
58 | opacity: 1;
59 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
60 | }
61 |
62 | header nav{
63 | height: 80px;
64 | display: flex;
65 | align-items: center;
66 | justify-content: center;
67 | position: fixed;
68 | left: 0;
69 | right: 0;
70 | width: 420px;
71 | z-index: 100;
72 | top: 130px;
73 | margin: 0 auto;
74 | background: rgba(255, 255, 255, 0.2);
75 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
76 | backdrop-filter: blur(5px);
77 | -webkit-backdrop-filter: blur(5px);
78 | border-radius: 10px;
79 | border: 1px solid rgba(255, 255, 255, 0.3);
80 | transition: 1s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.2s;
81 | }
82 |
83 | header nav a{
84 | color: #fff;
85 | text-decoration: none;
86 | font-weight: 700;
87 | padding: 10px 16px;
88 | font-size: 18px;
89 | letter-spacing: 1.8px;
90 | transition: 0.3s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.6s, 0.3s color ease;
91 | }
92 |
93 | header nav a:hover{
94 | color: #000;
95 | }
96 |
97 | header nav button{
98 | background: rgba(255, 255, 255, 0.1);
99 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
100 | width: 60px;
101 | height: 60px;
102 | backdrop-filter: blur(5px);
103 | -webkit-backdrop-filter: blur(5px);
104 | border: 1px solid rgba(255, 255, 255, 0.3);
105 | position: absolute;
106 | z-index: 100;
107 | left: 0;
108 | right: 0;
109 | top: 0;
110 | bottom: 0;
111 | margin: auto;
112 | border-radius: 100%;
113 | cursor: pointer;
114 | transform: scale(0);
115 | transition: 0.3s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.2s;
116 | }
117 |
118 | header nav button span{
119 | width: 50%;
120 | background-color: #fff;
121 | height: 3px;
122 | display: block;
123 | margin: 4px auto;
124 | transform: scale(0);
125 | transition: 0.6s transform cubic-bezier(0.080, 0.9, 0.18, 1) 0s, 0.3s margin ease-in 0s;
126 | }
127 |
128 | header nav button:hover span{
129 | margin: 9px auto;
130 | }
131 |
132 | header.sticky #logo{
133 | opacity: 0;
134 | }
135 |
136 | header.sticky nav{
137 | top: 20px;
138 | padding: 0;
139 | width: 80px;
140 | height: 80px;
141 | }
142 |
143 | header.sticky nav button{
144 | transform: scale(1);
145 | transition-delay: 0.3s;
146 | }
147 |
148 | header.sticky nav button span{
149 | transform: scaleX(1);
150 | transition: 0.6s transform cubic-bezier(0.080, 0.9, 0.18, 1) 0.8s, 0.3s margin ease-in 0s;
151 | }
152 |
153 | header.sticky nav a{
154 | opacity: 0;
155 | transform: scale(0.3);
156 | transition-delay: 0.1s;
157 | }
158 |
159 | @media screen and (max-width: 520px) {
160 |
161 | header nav{
162 | height: 60px;
163 | width: 390px;
164 | }
165 |
166 | header nav button{
167 | width: 50px;
168 | height: 50px;
169 | }
170 |
171 | header nav a{
172 | font-size: 16px;
173 | }
174 |
175 | section h1{
176 | font-size: 80px;
177 | }
178 |
179 | header.sticky nav{
180 | width: 70px;
181 | height: 70px;
182 | }
183 |
184 | }
--------------------------------------------------------------------------------
15 |
25 |
Social
36 |