Is there a way to set (or force) Nav Bar's MouseOver for a menu on each page?

[bobvoi]

I have a Nav Bar consisting of 5 items, same as the number of pages I have in my project.

Below you see an image of a sample where I currently have selected the Articles-page. Note how the Articles nav bar item automatically selects the MouseOver-image and thus it is easy to see that the page is currently selected.


This probably works this way, because every nav bar menu item links to the defined "Page: xxxx", like this:


I experiment with XT-CMS (https://xt-cms.com) template framework, which uses the Xara pages in a different way. In order to let my web site support friendly URLs like https://blablabla.com/articles, I need to use similar link-logic in my nav bars.
Each nav bar item simply links to "/products", "/services" "/about" etc. like this;


In the latter case, my nav bars do work when I select an item, meaning that the highlighted, MouseOver-image is highlighed when I hover over the menu items. The menu also works, selected the correct page in XT-CMS. However, the nav bar menu does not keep the currently selected page's nav bar item highlighed. Below you see that "all lights are off", after a page has been selected:


Is there a way, for example via some javascript in the Web Page HTML Head, to set that a certain page should also highlight a nav bar item?

[Acorn]

bobvoi

The page-aware capability Xara produces usually require a link of form, Link to: (page) ... .

From what I can see, you are trying elsewhere to present a link as ..blablabla/Articles and not ..blablabla/Articles.htm.
You cannot do this readily in Xara and copied links will also fail.

Removing the file extension is a thing done on the server by changing the .htaccess file: https://www.talkgraphics.com/showthr...910#post514910 might help.
Then you can go back to your original (page) links.

The final trick is just to add the highlight blob directly onto the MouseOff layer, positioned for the given page.

Acorn

[bobvoi]

Acorn,

Thanks for a very prompt reply! Unfortunately the .htaccess-way of doing stuff, is not working on my NGINX-setup. I have however be able to replicate the "friendly URL"-replacement in nginx.conf, and could perhaps refine it a little more.

I guess I will try out your final trick too.

[Initiostar]

The final trick is just to add the highlight blob directly onto the MouseOff layer, positioned for the given page.

Not sure exactly what the OP had in mind, could you use a MouseDown layer to highlight the current page? e.g. https://initiostar.co.uk/demo/traffic-light-menu/

[bobvoi]

Initiostar, thanks for chiming in!

I have also thought that the MouseDown-layer perhaps could play a role where. I haven't found many examples using the MouseDown-layer properly, and while the User's Guide do mention it here, it seems like it isn't much in use (anymore).

What I don't quite grasp yet, is how I activate the MouseDown-layer from page to page. In your Traffic Light example, the Home-button does indeed show the MouseDown-variant. If I click on the Product-button, the MouseOver-image do light up when I hover, but I can't change it to MouseDown. The question is therefore, how do I "tell" the Product-page that it should now have the MouseDown-image of the Product-button?

I understand that this perhaps is more like a show-and-tell page, and not a fully working example.

[Initiostar]

Initiostar, thanks for chiming in!

I have also thought that the MouseDown-layer perhaps could play a role where. I haven't found many examples using the MouseDown-layer properly, and while the User's Guide do mention it here, it seems like it isn't much in use (anymore).

What I don't quite grasp yet, is how I activate the MouseDown-layer from page to page. In your Traffic Light example, the Home-button does indeed show the MouseDown-variant. If I click on the Product-button, the MouseOver-image do light up when I hover, but I can't change it to MouseDown. The question is therefore, how do I "tell" the Product-page that it should now have the MouseDown-image of the Product-button?

I understand that this perhaps is more like a show-and-tell page, and not a fully working example.

Here is an updated working example: https://initiostar.co.uk/demo/traffi...menu/index.htm.

Demo file: Traffic Light Menu.xar

The principle can apply to any links, not just a NavBar.

[bobvoi]

Hello again Initiostar and thanks for the sample.

Now I see how the MouseDown layer works - together with the Navbar which is "distributed" to MouseOver and MouseDown.

Looking at your example, I also see that every page "knows which page is active", meaning that if I for example select the About-page, the MouseDown-image for About is also active. The mechanism behind this, seems to be tied to the fact that the pages are linked like this:


If I choose to link the pages in other ways, such as shown below, the "highlight current page"-feature won't work anymore. Below you see a direct link to the same page (note that the "Correct automatically" is turned off to make the "./pagename.htm" work:


After I have changed all the links, the Nav Bar content now look like this:


If you then preview all the pages now, you will see that all the navbar-links do switch the pages correctly, but the navbar no longer knows which page is active.

I guess this means that the navbar-internals somehow "know" which page is active in the former example, because of the link-type to a page name in the navbar.
This is where it would have been supercool if we could set some kind of variable in the page-header, to tell the navbar-internals which page are active. This means that for example the About-page, could have some Javascript added the the Web Page's HTML Head area, where for example the variable "xr_pagename=about" would mean that the About-button is highlighted. Or, some javascript in a placeholder at the very end, which could call some navbar function to select a specific navbar.

I have included a modification of your xar file with the direct links too:
Traffic Light Menu - with direct links instead.xar

[Initiostar]

You could revert to Acorn's suggestion and use a blob on each active page Traffic Light Menu - with direct links instead.xar ?

[bobvoi]

Yes, it seems to be the easiest way. When you say blob, I was a little uncertain that I did it correctly.

If I tried to "overlay" the navbar with a highlighted image in a top-most layer, the navbar quickly gained control and put itself at top.

My current understanding is therefore that I had to ungroup the navbar-widget and replace the image each page's MouseOff-image with a highlighted image. It seemed to work, albeit the navbar-widget wasn't in play anymore.

Anyway, thanks a lot for helping me out. I am in the midst of reworking my images to have a MouseDown-layer too now.

Bob

[Acorn]

Bob, don't do that. If you've a sticky NavBar, make the blob sticky too.

Acorn