Welcome to TalkGraphics.com
Results 1 to 10 of 11

Hybrid View

  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,616

    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
    Apr 2012
    Location
    SW England
    Posts
    17,616

    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

  8. #8
    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 😁

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

    Default Re: SVG Vector Logos - for free

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

 

 

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
  •