Lanki

What is This

A website about an e-commerce business.

Built With

• HTML
• CSS
• JavaScript
• jQuery

Challenges

There where 3 main problems that I had when making this website.

They where:

• How to resize a fixed navbar
• How to implement a hamburger menu
• How to implement animated link scrolling

I added a media query to set a max width to the navbar, and the site to prevent it from overflowing on large screens.

I read a blog and learned how to make a hamburger menu navigation. I made it by adding a media query to hide the normal nav and show a responsive nav. I also added functionality to the responsive nav by adding an event listener on the hamburger menu to show a hidden layout with the links when you click on it.

I searched for ways to implement animation scrolling and I decided to use jQuery.

How it works:

• Select all links with hashes
• Check and remove links that don’t have an href
• Check which element to scroll to
• Prevent default link behavior if there is a scroll animation
• Animate scroll by using offset
• Change focus after animation