The main menu is the regular Foundation top bar and below the banner there’s a subnav made with MagicGellan. We have renamed “Standorte” recently. It used to be called “Karte”, both in the menu as well as in the anchor. Now the client wants to change this to “Standorte”, so the direct link should be urstrom.de/e-carsharing/#standorte - which works well.
BUT he also wants to keep the old urstrom.de/e-carsharing/#karte at least for an intermediate time. In order to do this I have tried to drop a second marker stack in the same position as the standorte-marker, name it “karte” (as it used to be) and click “hide in menu”. But it only works when I am scrolling up and down the page - then I can enter the full url and it takes me to that marker. If I enter the url in a new empty window, the anchor gets cut off and the browser remains at the top of the page. When I enter urstrom.de/e-carsharing/#standorte however, it scrolls down to that point in the page.
Isn’t that inconsistent? I don’t understand how I can solve this.
I wonder if it is because your Karte marker has the same Menu Item Text as the other marker - try changing that to Karte or anything you like as it is not in the menu (it is currently Standorte as well).
I just tried that, it didn’t change anything. When I call https://www.urstrom.de/e-carsharing/#karte it does not jump into the page and the “karte” disappears from the link inside the url field.
Thanks @tav that worked. The smooth scroll seems to delete everything after the #.
Another question on this site (I have experienced that with a few other sites already): when I use it on my iPhone, I have to click twice in the navigation for a change to take effect. That is a little annoying. Do you know what causes this?
You are correct, everything after the # has to be removed before the page loads and the Foundation JS runs. This is because of the way that Foundation Magellan works which was not originally designed to support smooth scrolling from url hash anchors.
Basically, what happens is that we remove the anchor from the url and remember the maker name that it contained. With no anchor on the URL, the default fallback behaviour of jumping to the anchor (i.e. no smooth scroll) is prevented.
Once the page has loaded its Foundation JS a moment later, we can then trigger a click on the menu item that corresponds to the marker name that we remembered from the URL.
This is all well and good except for your unusual situation where the marker is not added to the menu. The click is triggered on an element that doesn’t exist and so no scroll happens.
I could add a hidden menu button instead of just omitting it altogether but this would require large changes to the JS and the CSS of the stack. Given that yours is such an odd and unusual situation and given that Foundation2 is coming soon then I think it is reasonable to just turn off the additional smooth scroll from url # and leave things as they were before this was added as a feature.
The double click problem, I think, is due to the latency that is deliberately introduced into touch operating systems to prevent false clicks as people swipe around a screen. Foundation (the Zurb framework) contains a solution to this in the form of a library called FastClick.JS (google it if interested) which is also widely used all over the web. Unfortunately, this had to be removed from Foundation for RW recently as it stopped the Total CMS HipWig editor working properly on mobile. I am only guessing but I presume this is what is causing the need to tap again if the first tap is not registered.
Thanks - very enlighting and reasonable. You are right, the smooth scrolling isn’t as important as the hidden anchor. I have disabled it and now it works.
On the tap/click issue: is Joe aware of it and do you think Foundation 2 will contain a solution/workaround? That seems more annoying to me than the other problem.
Yes but it is very sporadic and often does not happen. Foundation2 will be completely different and as far as I recall, the Foundation 6/7 framework no longer needs or uses FastClick any way.
Also, I have just spent 5 minutes navigating around your site on my iPhone X and have not had one single instance of needing to double tap on the TopBar to make the menu work.