Drop down (popup layer) Menu has become unreliable

[IanB]

As Xara does not allow different pages to exist on Main and Variant, if you create a Variant page then there is always a Main page. If you leave it blank and the viewer changes from Portrait to Landscape or widens their viewpoint, they will get a blank page.

I do not see the problem with a Hamburger icon opening a menu layer with the 5 page links in a vertical show.

Acorn

The theory of a menu layer with links is fine but on my songmenu page it was unreliable in Chrome and wouldn't work at all in Edge. I generally use Firefox. It seemed to be OK on Android phones. The drop-down layer was over a large block of linked menu items which may have had something to do with the problem but I can't see how. The hamburger drop down menu was my preferred option but I'm coming round to the separate mobile menu page idea.

https://www.waterwaysongs.info/songmenu.htm

I've eventually got such a page working. Though Egg's code was fine I wanted to click an image that fitted the site design to return to the previous page. I found some code which I modified and used in a placeholder :

<a href="#" onclick="history.back();return false"><img SRC="https://www.waterwaysongs.info/images/buttons/previous.png" BORDER=0 height=38 width=38></a>

After a lot of problems I seem to have it working. So far only the mobile Song Menu page and any mobile song page beginning with 'A' is linked. Other mobile song pages have the hamburgers linked to a menu layer which may or may not work. I'll be leaving it like that for a while until I've thoroughly checked it.

https://www.waterwaysongs.info/mobmenu.htm

I am appreciative of all the help I've been given - I wouldn't have got this far without it.

Ian

[Acorn]

The theory of a menu layer with links is fine but on my songmenu page it was unreliable in Chrome and wouldn't work at all in Edge. I generally use Firefox. It seemed to be OK on Android phones. The drop-down layer was over a large block of linked menu items which may have had something to do with the problem but I can't see how. The hamburger drop down menu was my preferred option but I'm coming round to the separate mobile menu page idea.

https://www.waterwaysongs.info/songmenu.htm

I've eventually got such a page working. Though Egg's code was fine I wanted to click an image that fitted the site design to return to the previous page. I found some code which I modified and used in a placeholder :

<a href="#" onclick="history.back();return false"><img SRC="https://www.waterwaysongs.info/images/buttons/previous.png" BORDER=0 height=38 width=38></a>

After a lot of problems I seem to have it working. So far only the mobile Song Menu page and any mobile song page beginning with 'A' is linked. Other mobile song pages have the hamburgers linked to a menu layer which may or may not work. I'll be leaving it like that for a while until I've thoroughly checked it.

https://www.waterwaysongs.info/mobmenu.htm

I am appreciative of all the help I've been given - I wouldn't have got this far without it.

Ian

Ian, your code is round the buoy twice.
Drop your Return/Back icon onto the page and for its Link use: javascript: history.back();
The "Return to Previous Page" pop-up text goes in Web Properties > MouseOver > Show pop-up text.

Where you have complicated matters is the Songmenu page has the 0-9, A-Z showing with a Hamburger icon Menu.
The same Hamburger Menu needs to be on all mobile web pages. There is no need for a separate Menu page. Chrome, FF & Edge all work for me.

I don't think you need a Hamburger icon and separate Menu Layer or page.

Here are two ideas. The first is a Hamburger icon and Menu layer. The second is just straight links.

Waterways - Variant Menu Approaches.xar

Acorn

[Egg Bramhill]

Before I get into Acorns dislike of my seperate menu page I've adjusted my earlier mobile example to include a 'Back' button (though I don't really see a need for this)

I've revised my earlier demo so you'll need to refresh each page to ensure you're seeing the updated version.

UPDATE

[Acorn]

Before I get into Acorns dislike of my seperate menu page I've adjusted my earlier mobile example to include a 'Back' button (though I don't really see a need for this)
I've revised my earlier demo so you'll need to refresh each page to ensure you're seeing the updated version.
UPDATE

Egg, i didn't dislike you approach, it is just a Hamburger method is tedious to use: select a new page and you have to open the menu to go to another, ...

If you can always display the links to pages then do so.
Avoid Xara Buttons and NavBars, unless really vital.

Acorn

[Egg Bramhill]

Egg, i didn't dislike you approach, it is just a Hamburger method is tedious to use: select a new page and you have to open the menu to go to another, ...

Not sure I'm following here Acorn, I'm not using Xara's navbars at all, I avoid them like the plague, they create far to many image files, whilst small they create far to many calls on the server to download these image files.

In fact since the mobile prodominance mouse-over buttons are almost obselete. Mobiles don't do mouse overs.

So create rectangles as buttons. They remain rectangles within the DOM, not images as in Xara's navbars. Text remains as text within the html document. All remain crisp and clear.

As for the menu page, whilst I agree that changing from portrait to landscape MAY cause an issue, creating a web page in the Main variant easily overcomes this.

However today I've had a good day in Wetherspoons so disregard all of the above

[Acorn]

Egg, my Avoid statement was not directed at you; it's my mantra to all who care to listen.

Acorn

[IanB]

Hi Acorn and Egg

Your comments, as always, have been very helpful and I've learnt quite a bit in this process.

I now have to choose between two alternative approaches to linking the mobile pages. The drop-down layer menu which I invested some considerable time in, does now appear to be working on Firefox, Chrome and Edge. Just what was causing the problem who knows, but it may have been on a menu layer that got deleted in recent amendments. In each Xara file that creates the alphabetical song files (each in a separate directory) I've now decided to give the drop down menu layer a unique name rather than the same one each time. I wouldn't have thought this would have caused the problem but don't know enough to be sure. Introducing the new menu layers may take a little while but that's what I plan to do.

I feel I'm reliant on the vagaries of the web-browsers and Xara to maintain compatibility but I suppose that's the cloud every web developer lives under. I wouldn't call myself a web developer, just a tinkerer or magpie, with definite limitations who six months ago thought my website was fine - until technology moved on and forced me into changes.

I don't feel that I'm putting all my eggs in one basket (sorry about that) however as the approach of a separate menu page has got an appeal. It's simple enough for me to understand and changing just one page rather than a layer in 30+ Xara files is obviously attractive. So I'll be putting a mobile specific menu on the site in reserve and will be able to switch this method of navigation on just by changing the links in the 30+ files.

It really is a hard call to decide between the two alternative methods suggested but I think I can now move on to alter all the pages knowing I've a workable backup plan should there be problems.

Thanks again for taking so much time to help me.

Ian