Hamburger Pop-Up Layer Limitation

[ich]

Hello,
I checked several posting in regard to hamburger menue but nothing covered my issue.
Or I missed it, so apologize and point me, please.

I tried to build an own hamburger-nav bar (e.g. for mobile version).

Please allow me to explain the limitations I am facing right now:
You can find a typical example attached, demonstrating the current status.

Hamburger-Issue-Sample.xar

On a fits to width website:
I do want to make the Hamburger Icon and stuff aside as fixed object, to enable visibility, no matter where you are scrolling down on page.
I need to make the Pop-Up Layer (Menu) also “fixed”, to ensure it will appear properly, no matter where you have scrolled the page until you opened the navbar .
As this set-up is used on a mobile variant, there is no mouse scrolling over something, but you click with your fingers on it.
This requires to keep the pop-up layer (menu) open and not automatically closed. To do this, it is not preferred to simply delete the “hook” on the “automatic popup closure”, because this would force an xara generated “pop-up-close” button, which is ugly and on wrong place.
This is why I “locked” the pop-up Layer (menu) with the naming and used an own closure button (with a link to “popup: close”)

OK until here, just to explain why I did what I did in the example file.

Now the issue:
1.) Because the Pop-Up layer and its content has to be “fixed”, to be visible at any position of the website, it does no longer show any animation (e.g. smooth swipe in from left side).
2.) In case the mobile screen or laptop screen has a lower height than the Pop-Up Layer (menu), there is no possibility to scroll the pop-up down. Only the page beneath can be scrolled with the sidebar.
The pop-up Layer stays like it is. It would be of help, if I could add an extra scroll bar on the pop-up layer for example.
3.) The webside height I do use in the example file is an extended one. Extended enough to enable the Pop-Up Layer (menu) content to be in position and shape, no matter which fit-to-width position is required (depending on the screen one is using).
If you open my example file and simply lower the height of the page, you will see, that depending on the fit to width position of a display, the content moves up partially and mixed up.

I can solve all issues (1-3) when I do not make the pop-up layer “fixed”. But then, as you know, the pop-up layer (menu) will not appear in visible area, when you activate it while you are on a lower page position scrolled.
For sure, I can also think to make the hamburger-icon a not-fixed object. In this case, the pop-up layer can be activated only once the hamburger layer is on screen position and as result the pop-up layer (menu) will be visible always too. But I do not want the hamburger icon to scroll out of the visible area, it should be fixed (on the top) no matter where one is scrolling the side.

Ciao
Ich

[Initiostar]

Ich,

One approach is to have the Hamburger icon point to a separate menu page which scrolls the same as any other; this could be embedded into a popup menu too:

e.g.> https://initiostar.co.uk/demo/list-Test/

There are I'm sure alternatives to this approach and some might consider two vertical scrolls bars on the same mobile layout not a good design principle. In which case the hamburger icon could point directly to the menu page.

This approach has been described as a listings page and works as explained here: https://initiostar.co.uk/demo/iframe-links/ (explanation only in this example).

[ich]

Hello Initiostar,
thanks for your links and reply.
Yes, the most simplest way I tried once is to use a new separate menu page, like you mentioned in your feedback too.
Nevertheless, I could not find a way to let this one smoothly swipe in (e.g. from left side)
And another point has been that I was not able to mark the links properly on this extra page.
All links show the same color, so it is hard to remind for visitors from which page he/she originally came in to this NavBar selection.
But maybe I did not consider the right set-ups -- will check more.

Yes, the iframe could work, I did not test how the link color is behaving. And wehther a smooth swipe in is possible.
Anyway, you are right - I need to check if a second vertical scroll bar is nice enough in terms of design prospective.
Mmm... I will check and dig deeper in your proposals, play around and see how that works for.

Thanks a lot, helps a lot to consider an approach.
Ciao,
Ich

[Acorn]

Ich, the 'trick' is to make your pop-up shapes Sticky and with their Web Animations when they are not associated with a pop-up layer.

After you have checked they stick and transition as you want, only then, do you move them into your pop-up layer.

Try Xara - Sticky Pop-ups.xar

Acorn

[ich]

Ich, the 'trick' is to make your pop-up shapes Sticky and with their Web Animations when they are not associated with a pop-up layer.

After you have checked they stick and transition as you want, only then, do you move them into your pop-up layer.

Try Xara - Sticky Pop-ups.xar

Acorn

Aaaaahhhhhh, ok will check this and consider as part of my final set-up.
THX

[gwpriester]

I link the hamburger to a pop-up layer which also lets me make the buttons any size I want and any color or shape I want. I have not tried to make the menu sticky.

OK So, I have another problem with sticky menus on a pop-up layer I'll post in a new thread.

[Acorn]

Here is a play site: Menu on a Page.xar

Acorn

[ich]

Here is a play site: Menu on a Page.xar

Acorn

Yes Acron, THX.
You are right and indeed that was my first approach.
Only difference, I did use the hamburger extra-page as menu approach only on the variant "mobile".
Because I do not want to lose the benefits of a real standard navbar and its capabilities and ease of use.

As result I did have a menu-page in the variant-mobile, with all the items I need and same menu-page on variant-standard, but I leave it blank there and without any link. This way it does not bother.

Maybe I come back to this in my set-up 😁

[Acorn]

Yes Acron, THX.
You are right and indeed that was my first approach.
Only difference, I did use the hamburger extra-page as menu approach only on the variant "mobile".
Because I do not want to lose the benefits of a real standard navbar and its capabilities and ease of use.

As result I did have a menu-page in the variant-mobile, with all the items I need and same menu-page on variant-standard, but I leave it blank there and without any link. This way it does not bother.

Maybe I come back to this in my set-up 

Just to state that the Menu page can readily hold "a real standard navbar".

Although the latest Xara iteration allows all Fonts in the sub-menu, the JavaScript used is still limiting and stifles innovation.
Yes, it is very quick and easy to set-up page links and these links are automatically updated on page name changes.

I far prefer curating my own style. Setting up links by hand is not that great a burden.

Acorn