Project Overview
This project is a single-page layout consisting of four main content sections. It features a responsive and interactive navigation bar that enhances user experience through smooth scrolling and dynamic updates.
Key Features
Sticky Navigation Bar: The navigation menu remains visible at the top of the page while scrolling, ensuring easy access to all sections at any time.
Smooth Scrolling: Clicking on any navigation item smoothly scrolls the page to the corresponding section, creating a seamless transition.
Interactive Menu Items: When you hover over a navigation item, an underline effect appears to provide visual feedback.
Active Section Highlighting: As you scroll through the page, the navigation bar automatically highlights the item that corresponds to the currently viewed section.
Dynamic Navigation Items: When a new <h3> header element is added to the page, the script dynamically creates a new list item in the navigation menu, using the header’s content as the label.
Responsive Layout: Utilizes CSS Grid and Flexbox for clean, flexible, and responsive element arrangement across various screen sizes.
Technologies Used
HTML: Structure and semantic elements.
CSS: Styling, hover effects, layout using Flexbox and Grid, sticky positioning.
vanilla JavaScript : DOM manipulation for dynamic navigation updates, smooth scrolling, and active section tracking.
this was building using Direct DOM manipulation approach