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.

[ich]

THX all for your input.

After exploring several solutions and ideas, the attached sample is the best I could manage, with a sticky hamburger pop-up menu.
Whe opening it, you may want to look at narrowing somewhat your screen to get the better "mobile variant feeling"
Hamburger-Issue-Sample (Sticky and smooth transition).xar

But also with this set-up I do run into two major issues, I have not found any solution.
Issue description Hamburger Pop-Up Menu.pdf

Other options like extra page for menue result in other issues, even worse for me to accept and the solution to use an iframe solves the non-scrolling issue but is not really a good design solution for me (2 vertical scrollbars).
So maybe I will stick on the XARA standard solution and Hamburger navBar, even so somewhat limited, as often described.

Ciao,
Ich

[Acorn]

Ich, the most sensible approach I can offer removes the need for any pop-ups at all. It also avoids the need for an IFRAME as covered by @Initiostar.

It comes in three parts:

1. A properly curated Menu page for both Main & Variant. This can be as fancy as you like and as deep as you like as it is fully scrollable; you have no Web Animation constraints.
2. A Close shape that is Sticky in the menu page with Link: javascript: window.history.back(); - one small bit of code in two locations, Main > Menu & Variant > Menu.
3. A Hamburger shape in Main & Variant that is Sticky and Repeating on all pages. Its Link is to the Menu page.

Links on the Menu page take you to a new location in your site.
Instead, hitting the Close takes you back to the page you hit the Hamburger.

Works well with Scale to fit width.
You recover a great deal of page area by using just a Hamburger symbol on Main.

The Variant > Menu page width could even be made to be just less that Main's page width.

Acorn

[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 😁