This project demonstrates a multi-section landing page with a dynamically updating navigational menu. The navigation menu automatically adapts to the content on the page, improving user experience and accessibility.
The project aims to use JavaScript to manipulate the Document Object Model (DOM).
- Highlighting sections on scrolling.
- Generating nav bar based on the sections.
- Hiding fixed nav bar while not scrolling.
- Smooth Scrolling to the corresponding section, on Nav link click.
- Scrolling all the way up, on up-arrow button click.
- Collapsible sections on clicking the section title.
- Responsive nav bar that transforms into a burger menu on smaller screens.
-
Open the HTML File: Open the index.html file in a web browser. This will display the landing page and you can surf the page (scrolling and click on elements) to discover the features.
-
Adding Sections: You can modify the HTML structure to add new sections to observe the dynamic updates in the nav bar. (As the current code does not include functionality for adding sections directly through UI)
This project relies on the following:
- HTML: The basic structure of the page.
- CSS: Styles the visual elements of the page.
- JavaScript: Enables dynamic manipulation of the DOM and handling with all events on the document.