The project aim is to practice how DOM can be manipulated and make a dynamic navigation bar using JavaScript. In this project, a simple Cafe website is used as an example.
To see the visual result open index.html. To see the code:
- HTML - index.html
- JavaScrpit - js/app.js
- CSS - css/styles.css
- A navigation bar is create using java Script. Test the bar, two more section was added and the names of the section has been changed to be - about us, populare drinks, menu, gallery,contact us.
- The navbar contain a links to a specific sections on the landing page.
- If click on a link in navbar a soft scroll will show the specified section using a scrollTo event.
- When a section been clicked from the navbar the link for it will be highlighted by a different color.
- When scrolling through the landing page, the links will be highlighted with different color based on the section you come across.