Is there a way to have an active state for menus… or some kind of workaround (for now I just came up with the idea of using buttons and text labels for each page, but its more complex, loose the hover effect and does not work with anchors), so that when user navigates to a page or anchor, menu display the ‘active’ label accordingly?
It’s not easy to explain to a client it can’t be done, it’s such a basic behavior everybody expects
thanks
Do you mean something like this, asked in this topic?
Mr. F.
Hi @Alessandro, it’s not possible for now. Agree basic functionality that we need to add.
However buttons do work with anchors, so you lose the hover effect.
I‘m hoping that this feature is on the top of the list, and looking forward to a version where this is included.
For page links, there is a simple workaround. Essentially create a transparent box with a bottom border of say 5px. Place this box over the appropriate link on the menu, but ONLY ON THE ACTUAL PAGE being linked to. Whenever that page is selected, the box will display. It will also prevent that link from being selected again if you choose to also add a fill to the box.
When it comes to anchor links, this shouldn’t be an issue because the link will usually be on the page being targeted, so the highlight will already be showing on that page - even if the anchor is on the current page. Also, unless you’re using a sticky navigation element, the menu most likely won’t be visible when an anchor link is selected.
@Stephie Thanks for your answer, but I don’t think this will work in menu’s, especially on mobile, since something like hovering simply doesn’t exist on that platform.
Fortunately, the hover feature isn’t used for indicating the currently active link - that’s just a static box element on each target page. In my example, I only use the hover feature to highlight which link is being selected, but, as you say, hover doesn’t work on touch screen devices. In any case, mobile menus are usually designed specifically for mobile devices - probably wouldn’t display a traditional navigation bar as such - more likely to be a hamburger menu that triggers a drop-down or a pop-up.
Exactly.
And in that menu I would like to see all available links AND a separate state for the page I’m currently on.
The only way I can seem to do this right now is to build a separate menu for each page, where the state of the current page is shown. Which seems a lot of work for something that was already deemed essential years ago.
A pity that such an essential addition to a great app like Sparkle seems to be forgotten.
The “active” mode for a menu isn’t as clear cut as you seem to imply. That’s part of the reason for why it hasn’t been added.
In a very simple website there can be a 1:1 correspondence between a menu option and a page, but as soon as the website grows, that’s no longer true.
Hmm, if it isn’t clear cut I understand it would be hard to add.
But what would be the complicating factor?. Home will always be Home, Contact will always be be Contact etc. etc
Or am I missing something?
And what would be the solution?
It seems that the only way is to make lots of copies of menu’s and keep every variation limited to the page where iet’s relevant to (So ‘This page only’ instead of ‘All pages’).
Which would mean a lot of work if anything changes (like for instance the order of pages in the website), which is what menu’s were meant to alleviate in the first place, I think.
But maybe I’m not getting it, in which case I would welcome any pointers.
The solution is to place the page Indicator on the actual page. Regardless of where the page may be in the hierarchy, or how many additional pages may get added or deleted, whenever that page is accessed, it’s on-page indicator will be there.
The reason I started looking for an answer is a mobile menu on a website I recently built. Its mobile menu resides in a popup, which covers the page underneath (because of the lack of space on mobile).
I would love to show where people are at while opening this menu, but the only way seems as I described in my previous post (so to add lots of popups with lots of menu’s, all ‘This page only’ so they can show different things).
I already have page indicators on the page itself, but would love to have them in the menu as well, the navigation would be so much clearer that way.
Rather than use tho option to show on every page, use copy/paste on the popup - copy once then select each mobile page and paste (Ctrl +v). This will paste copies in the same position on each page which will allow you to add a visual indicator to every popup. It may not be as convenient as showing on every page, but it is a quick and simple option to achieve what you want. Don’t forget to set the menu trigger link on each page to open the page-specific popup. This will mean having a unique trigger link on each page instead of having a common link that shows on all pages. Again, you can use copy and paste to that also.
Thanks Stephie, I figured also that this is the best option in this situation.
But like I wrote before, every time something changes after doing this I’ll have to make the changes on every page, which is why I appealed to Duncan to add this to the app itself, even if it’s just as an option (he wrote himself that it’s basic functionality after all).
Would still really like to hear in more detail why this is has been discarded, in the meantime I’ll use the copy-and-paste solution.
It would be really helpful since 2020 to have this normal-hover-click-active state for buttons and for my sake menus as it is already since the beginning for the blog feature.
There one can easily “see”, where in the whole story/page/ am I.
Kind Regards as always
Uwe
