Use JS to add determined classes to the elements that interact with the user in the navigation (Toggles, Slide down/up). And show by default the navigation and all the items open in case there is no JS present.
To achieve this behaviour, this is the list of items that must be done:
- The button to trigger the navigation, needs to be added via JS and not hardcoded in the HTML (The reason behind this is that the button will do nothing if JS is not present, so there is no reason for having it).
- Show the navigation default opened, and if JS is present, a class must be added to it. That class will make the navigation to have the current behaviour it has right now.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | olivero-no-js--width-1000px-1199px.png | 252.54 KB | shaal |
Comments
Comment #1
vulcanr commentedEdited
Comment #2
vulcanr commentedEdited
Comment #3
vulcanr commentedComment #4
vulcanr commentedComment #5
vulcanr commentedComment #6
vulcanr commentedPR at: https://github.com/Lullabot/olivero-poc/pull/19
Test enviroment at: https://deploy-preview-19--olivero-poc.netlify.com/
Comment #7
shaalComment #8
shaalComment #9
shaalThere's a visual issue of giant search when JS is off, and the resolution is between 1000px and 1199px:
Comment #10
vulcanr commentedHm now this triggers something totally different in regards to the navigation. When JS is disabled, there is no way to get the Search input
Comment #11
finnsky commentedOne more PR https://github.com/Lullabot/olivero-poc/pull/24
Comment #12
vulcanr commentedI reviewed it it works very good, you nailed the issue I had before with the search and yeah, it's on a weird place.
Locally I duplicated some of the items with child elements in the menu and they work good aswell.
Good job on this one. I'll leave this for Mike to review it.
Comment #13
mherchelThis was fixed in #3165450: Ensure mobile menu is displayed when JS is disabled