https://github.com/dalascript/navigation-nation

ZTM JS Web Projects Course | Navigation Nation | Project 7/20
https://github.com/dalascript/navigation-nation

css hamburger-menu html js navigation-nation zerotomastery

Last synced: 16 days ago
JSON representation

ZTM JS Web Projects Course | Navigation Nation | Project 7/20

• Host: GitHub
• URL: https://github.com/dalascript/navigation-nation
• Owner: DalaScript
• Created: 2025-05-21T09:38:19.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-05-22T08:43:16.000Z (12 months ago)
• Last Synced: 2025-06-22T14:14:45.435Z (11 months ago)
• Topics: css, hamburger-menu, html, js, navigation-nation, zerotomastery
• Language: CSS
• Homepage: https://dalascript.github.io/navigation-nation/
• Size: 30.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Navigation Nation | ZTM JS Web Projects Course

**Project 7/20**

A modern and interactive animated navigation menu built with vanilla JavaScript and CSS. This project showcases a sleek overlay effect with smooth slide-in/out transitions that elevate user interaction and design experience.

---

## 📚 Table of Contents

- [🔎 Overview](#-overview)

  - [📸 Screenshot](#-screenshot)

  - [🔗 Links](#-links)

  - [📌 Features](#-features)

  - [🛠️ Built with](#️-built-with)

- [🧠 My process](#-my-process)

  - [🗃️ Useful resources](#️-useful-resources)

  - [🔙 Previous Project](#-previous-project)

  - [🔜 Next Project](#-next-project)

- [👤 Author](#-author)

  - [🌐 Connect with Me](#-connect-with-me)

  - [💻 Coding Profiles](#-coding-profiles)

---

## 🔎 Overview

### 📸 Screenshot

![Live Preview Screenshot](./assets/screenshot.jpg)

### 🔗 Links

- [🔴 Live Demo](https://dalascript.github.io/navigation-nation/)

- [🗂️ GitHub Repository](https://github.com/DalaScript/navigation-nation)

### 📌 Features

- ✅ Hamburger menu with animated bar transitions

- ✅ Full-screen overlay navigation

- ✅ Smooth sliding animations for nav items

- ✅ Auto-close navigation on item click

### 🛠️ Built with

- HTML5

- CSS3 

- Vanilla JavaScript

---

## 🧠 My Process

### 🗃️ Useful resources

- [Google Fonts](https://fonts.google.com/)

- [Unsplash Images](https://unsplash.com/)

- [Color Selection Tool](https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)

- [W3Schools - Menu Icon](https://www.w3schools.com/howto/howto_css_menu_icon.asp)

- [MDN - CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)

- [MDN - CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)

### 🔙 Previous Project

- Animated Template | *Project 6/20* → [View Repository](https://github.com/DalaScript/animated-template)

### 🔜 Next Project

- Music Player | *Project 8/20* → [View Repository](https://github.com/DalaScript/music-player)

---

## 👤 Author

### 🌐 Connect with Me

- [Instagram](https://www.instagram.com/DalaScript)

- [YouTube](https://www.youtube.com/@DalaScript)

### 💻 Coding Profiles

- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)

- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)

- [GitHub](https://github.com/DalaScript)

*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*