🪄Magic Navigation Menu Indicator | Html CSS Javascript
6.5 هزار بار بازدید -
2 سال پیش
-
Create a 🪄 Magic Navigation
Create a 🪄 Magic Navigation Menu Indicator using just Html CSS Javascript, step-by-step from scratch.
______________________________________________________________
🌱💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
➤ https://bit.ly/3sthx5B
______________________________________________________________
⏱️Chapters:
00:00:00 = Intro to our Project
00:00:52 = Creating the Boilerplate
00:01:46 = HTML - Create NAV, UL and LIs and 2 spans using EMMET
00:03:35 = HTML - Adding Text and Icons
00:04:50 = CSS - Importing Fonts | css Reset | and why we need it
00:05:57 = css - Creating variables and apply css to the body
00:06:40 = CSS - Setting Rules to the NAV
00:08:18 = CSS - Applying Size and Layout to the Nav UL
00:08:30 = CSS - Applying Rules to our Lists
00:09:01 = CSS - Positioning and Applying Layout to Anchor tags
00:09:53 = CSS - Positioning the Sizing the Icons
00:10:54 = CSS - Applying Hover Effects to Icons and Text
00:13:07 = CSS - Making Adjust on Markup
00:13:43 = CSS - Making Adjust on Markup
00:14:06 = CSS - Indicator Element giving it Color, Size & Position
00:16:48 = JavaScript - Getting List Reference to the DOM, Create Function and run it triggered by
00:18:54 = CSS - Creating Animation li Actives & Indicator
______________________________________________________________
📚Resources
Markup | Pics used in this Project: https://bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤Login & Registration Form Using HTML ...
🎬Neumorphism Login Form | HTML & CSS✨
➤🎬Neumorphism Login Form | HTML & CSS
🎬CSS Text Typing Animation | HTML & CSS✨
👉CSS Text Typing Animation | HTML & CSS
🎬Top 10 CSS & JavaScript Projects✨
➤🎬Top 10 CSS & JavaScript Projects🙌
🎬Build a Step Progress Bar | JavaScript✨
➤Build a Step Progress Bar | JavaScript
______________________________________________________________
🛴 Follow me on:
👉Facebook: https://bit.ly/3cp2S5W
______________________________________________________________
🎵Background Music for Videos:
https://bensound.com
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/hartzmann/no-tim...
License code: QYJLBIQRS1691ECL
______________________________________________________________
📨 Business Inquiries: such as Sponsor or Collab.
[email protected]
______________________________________________________________
🌱💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
➤ https://bit.ly/3sthx5B
______________________________________________________________
⏱️Chapters:
00:00:00 = Intro to our Project
00:00:52 = Creating the Boilerplate
00:01:46 = HTML - Create NAV, UL and LIs and 2 spans using EMMET
00:03:35 = HTML - Adding Text and Icons
00:04:50 = CSS - Importing Fonts | css Reset | and why we need it
00:05:57 = css - Creating variables and apply css to the body
00:06:40 = CSS - Setting Rules to the NAV
00:08:18 = CSS - Applying Size and Layout to the Nav UL
00:08:30 = CSS - Applying Rules to our Lists
00:09:01 = CSS - Positioning and Applying Layout to Anchor tags
00:09:53 = CSS - Positioning the Sizing the Icons
00:10:54 = CSS - Applying Hover Effects to Icons and Text
00:13:07 = CSS - Making Adjust on Markup
00:13:43 = CSS - Making Adjust on Markup
00:14:06 = CSS - Indicator Element giving it Color, Size & Position
00:16:48 = JavaScript - Getting List Reference to the DOM, Create Function and run it triggered by
00:18:54 = CSS - Creating Animation li Actives & Indicator
______________________________________________________________
📚Resources
Markup | Pics used in this Project: https://bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤Login & Registration Form Using HTML ...
🎬Neumorphism Login Form | HTML & CSS✨
➤🎬Neumorphism Login Form | HTML & CSS
🎬CSS Text Typing Animation | HTML & CSS✨
👉CSS Text Typing Animation | HTML & CSS
🎬Top 10 CSS & JavaScript Projects✨
➤🎬Top 10 CSS & JavaScript Projects🙌
🎬Build a Step Progress Bar | JavaScript✨
➤Build a Step Progress Bar | JavaScript
______________________________________________________________
🛴 Follow me on:
👉Facebook: https://bit.ly/3cp2S5W
______________________________________________________________
🎵Background Music for Videos:
https://bensound.com
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/hartzmann/no-tim...
License code: QYJLBIQRS1691ECL
______________________________________________________________
📨 Business Inquiries: such as Sponsor or Collab.
[email protected]
2 سال پیش
در تاریخ 1401/01/11 منتشر شده
است.
6,562
بـار بازدید شده