Drop down (popup layer) Menu has become unreliable

[Acorn]

Yes, the main and mobile would need a menu page but nothing points to it on main site, so it remains unseen.

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

[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