Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Hamburger Pop-Up Layer Limitation

    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

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    940

    Default Re: Hamburger Pop-Up Layer Limitation

    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).
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  3. #3
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: Hamburger Pop-Up Layer Limitation

    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

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,617

    Default Re: Hamburger Pop-Up Layer Limitation

    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
    Acorn - installed & active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: Hamburger Pop-Up Layer Limitation

    Quote Originally Posted by Acorn View Post
    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

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,454

    Default Re: Hamburger Pop-Up Layer Limitation

    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.
    Last edited by gwpriester; 13 September 2023 at 08:29 PM.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook






  7. #7
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: Hamburger Pop-Up Layer Limitation

    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

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,617

    Lightbulb Re: Hamburger Pop-Up Layer Limitation

    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 - installed & active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,617

    Default Re: SVG Vector Logos - for free

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

    Acorn
    Acorn - installed & active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #10
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: SVG Vector Logos - for free

    Quote Originally Posted by Acorn View Post
    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 😁

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •