search

arpit456jain / Amazing-Js-Projects

Amazing-Js-Projects
https://amazing-js-project.netlify.app/
MIT License
146 stars 213 forks source link

add-burger-menu #684

Closed void-ness closed 2 years ago

void-ness commented 2 years ago

Description

Added a new project in the vast array of informative and helpful projects built upon HTML, CSS, JS and easily available to learners. The concerned projects is a burger menu. On the web version a normal navbar is shown. However on the mobile version, the navbar collapses and the burger menu icon appears. This icon works as a toggle to open and close the menu.

Fixes: #656

Type of change

Checklist:

ATTACH SCREEN-SHOTS / DEPLOYMENT LINK

image

image

image

netlify[bot] commented 2 years ago

Deploy Preview for amazing-js-projects ready!

Name Link
Latest commit f94422e7b0e07b065092e4d5bf44cfa1619429d5
Latest deploy log https://app.netlify.com/sites/amazing-js-projects/deploys/6287ec1d798f230009a17d23
Deploy Preview https://deploy-preview-684--amazing-js-projects.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions[bot] commented 2 years ago

Our team will soon review your PR. Thanks @void-ness :)

VidhiBhatt01 commented 2 years ago

https://deploy-preview-684--amazing-js-projects.netlify.app/burger-menu/

VidhiBhatt01 commented 2 years ago

Also, are you sure you made this on your own!? 👀

void-ness commented 2 years ago

Also, are you sure you made this on your own!? 👀

Yes, I did make this on my own 😄. When I first observed the burger menu thing in other websites, I was very curious about its implementation. Instead of importing predefined classes and scripts, I decided to code my own. While coding I added a very detailed change too. Whenever someone toggles open the menu, the transition animation is ease-in. whereas when someone closes it, the transition animation is ease-out. This is a very minute detail but leaves a slightly improved user experience :)

void-ness commented 2 years ago

image This looks messy, please do the needful

sure, a solution could be to display burger menu in this screen resolution too. My target screen sizes were those of desktops and those of smartphones. I did not incorporate for the screen sizes falling in between them. Will do 👍🏻 .

void-ness commented 2 years ago

Hey! as suggested I have worked on the change requested. Kindly see through it. Thank you. Looking forward to contributing more in the future. Attaching a ss for reference.

image

void-ness commented 2 years ago

Good suggestion. I made the changes. Kindly check. attaching a ss for reference. image

In the image above the screen resolution is a bit bigger than an average phone screen size but will work accordingly for normal phones too.

void-ness commented 2 years ago

@VidhiBhatt01 can you check once again if the deployment link/ The link you referred to for reviewing is updated? I have fetched the latest code from the repository and the website works smoothly on my system. re attaching a current screen grab which confirms the issue being resolved.

image

image

image

DEEPALI-SUK commented 2 years ago

@arpit456jain we are not able to see the updated changes

void-ness commented 2 years ago

Thank you for the assistance. In the link below the updated code is accessible. I would be very thankful if you can spare some time and review the changes and if everything seems fine approve my submission.

https://deploy-preview-684--amazing-js-projects.netlify.app/burger-menu/#

void-ness commented 2 years ago

Hey! Thank you so very much for clearing my request to be merged. I am a GSSoC contributor. I will be very grateful if you can generously score my PR. Since it being the Last week, some of my PRs have not been considered for merging. Due to that I am currently short of 35 points to reach my next milestone. It would very helpful if you can help me with that.

Keeping that aside, I enjoyed a lot while contributing to this amazing repository. Got to know about so many more exciting projects and some good coding practices. Thank you for the opportunity.

VidhiBhatt01 commented 2 years ago

Am glad you liked our repo. PA will merge the PR and do the needful, dw :)

github-actions[bot] commented 2 years ago

Thank you @void-ness for taking out your valuable time in order to contribute to our project. Looking forward for more such amazing contributions :)