🪄Magic Navigation Menu Indicator | Html CSS Javascript

Veröffentlicht am: 31 März 2022
auf dem Kanal: Web Dev Made Easy

6,658

274

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.
business.webdev@protonmail.com

Auf dieser Seite können Sie das Online-Video 🪄Magic Navigation Menu Indicator | Html CSS Javascript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Web Dev Made Easy 31 März 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 6,658 Mal angesehen und es wurde von 274 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!