Drop down (popup layer) Menu has become unreliable

[Egg Bramhill]

With the mobile variants I often prefer to have a seperate mobile menu, like so:

Example

[IanB]

With the mobile variants I often prefer to have a seperate mobile menu, like so:

Example

That's thrown another iron into the pot - and it may well come into play - particularly if the drop-down menu/popup layer on the mobile version starts misbehaving. Surely this would need an additional mobile page so presumably I'd have to have an equivalent main page which I suppose could be the same as the mobile version? I'm going to have to think about this!

Wouldn't life be boring if these problems didn't keep cropping up?

At the moment I'm redesigning the mobile song pages (A section) but I won't be putting anything on-line until I've done all the songs. I'm spending some time trying to get the design right as I've learnt from experience that going back and changing things later can be very time consuming. I'll be checking out the drop-down/popup layer behavior thoroughly. If I could keep this drop down menu on the mobile variant I'd be happy as it is quite neat. On the other hand a simpler approach may be needed - particularly if I can't rely on the coding.

Thanks again for all the help.
Ian

[Egg Bramhill]

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

[IanB]

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

Thanks. It's clear now.

[IanB]

With the mobile variants I often prefer to have a seperate mobile menu, like so:

Example

I've spent some time trying to track down the reason for the failure of the drop-down/popup layer menu and have, so far, not deduced the reason.

I'm thinking that a separate mobile menu may be the best option but before I go down that route I have a question. Is it possible to add a button to the menu to take you back to the page the menu was loaded from?

[Egg Bramhill]

It can be done using placeholder script:

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
window.history.back();
}
</script>

[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