Hamburger Pop-Up Layer Limitation

[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