Example provided for Responsive Vertical Menu might not actually work
ginger51011 opened this issue · 7 comments
Description
I was unsure if I should post this here, but I regard it as a problem in the docs.
On the purecss.io website, an example for a responsive vertical menu, similar to the one on the purecss website, is provided. I copy-pasted it on my own project and I do quite like it but it seems like when you actually open the hamburger-menu and follow a link the menu simply closes, without following the link. I tried inspecting the source on the example page and changed one of the hrefs in that menu to actually redirect somewhere, but I got the same result.
I might very well be in the wrong here, so please point me in the right direction in that case.
Expected behavior
When opening the hamburger menu and then clicking a link, the user should be redirected.
Actual behavior
The hamburger menu closes.
Steps to Reproduce
- Follow installation instructions on this page
- Deploy a test site with links in the menu
- Visit the site in a window small enough to make the hamburger menu appear
- Click any link
Environment
- Pure version: 2.0.3
- Browser name and version: Chrome, Firefox
The JS on the page is very basic and meant to demo very simple menu toggle. You will need to create your own script or modify the existing one to open links properly.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I'm actually facing the same issue, but unfortunately I don't have enough js experience to understand how to change the ui.js file in order to make the links match with those already present in the html. Any help would be greatly appreciated!
Maybe I can clarify where my difficulty is.
For the sidebar entries, I have hyperlinks in the html code. I don't understand where in the JS file I should specify that the sidebar entries should still point to the same urls.
You don't need to change JS file. Look at these examples.
Clicking on this:
<li class="pure-menu-item"><a href="#contacts-id" class="pure-menu-link">Contacts</a></li>
will focus and scroll to this element on the same page:
<element id="contacts-id"></element>
Clicking on this:
<li class="pure-menu-item"><a href="http://purecss.io/" class="pure-menu-link">Pure.css</a></li>
will redirect you to another page.
@johncalab Were you able to resolve this? I'm having the same issue. My ui.js is unmodified and all my menu items are per @tbydza 's examples. I can also see that the purecss.io site has a working menu using the same exact ui.js file, so that doesn't seem to be the issue. Thanks from one JS neophyte to another.
Edit: Some quick and dirty experimentation seems to have gotten it working by removing lines 40-42 of ui.js. My reasoning being, why listen for a click toggle the menu off if we are following a link to a new page? I suppose the original intent was that a click anywhere outside of the menu would collapse the menu. Still collapsible via the hamburger button with this fix, though. No idea if this is the preferable solution or breaks anything else.
I've figured out the issue here. So this ui.js is used on the static layout pages and the main Pure website. e.preventDefault() was used inside the toggleAll function to prevent the links from being followed, but as mentioned in this issue, it prevented navigation links from working. This wasn't seen on the Pure website because Docusaurus handles the link following automatically.
For the fix, I removed the preventDefault, this ensures the links are now followed. However, this did create a bug on the Pure site where the menu would no longer work after clicking a link. It turns out that Docusaurus was refreshing the elements that were referenced in the ui.js, which prevented the menu from working. My simple fix was just to get the elements on the fly each event to avoid referencing stale elements.
You shouldn't need the same fix that I did as this was only for the Pure website. In your own ui.js just remove the e.preventDefault() and your links should work as usual.