July 17, 20197 yr Hey guys I am having real trouble finding a solution to my problem. Basically I want to create this nav bar https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp but I want to be able to close the menu by pressing the same title that opens the menu. I dont want to use jquery just vanilla is. Any ideas ?
July 18, 20197 yr 14 hours ago, Mattius said: Hey guys I am having real trouble finding a solution to my problem. Basically I want to create this nav bar https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp but I want to be able to close the menu by pressing the same title that opens the menu. I dont want to use jquery just vanilla is. Any ideas ? Assuming you know JavaScript then you want to make the dropdown items into buttons and add click handlers to them that toggle classnames `is-open` for example. In the dropdown I suggest you add a link that takes you to the landing page for that category. If you're using a framework like React it becomes simpler to build more complex navigations and make them accessible. I have re-built the main navigation at Moonpig and that uses hover (with a delay) to open the dropdown, however keyboard users can open / close the dropdown using "Enter" and can tab through entries etc. On smaller screens clicks are used to open and close the nav. This is achieved by having both a link and a button over the primary links that is not clickable on larger screens. You can see more by taking a look at the markup using Chrome Dev tools:https://www.moonpig.com/uk/personalised-cards/birthday-cards/ Note: the new nav is only deployed to this single page for now.
Create an account or sign in to comment