Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,972

    Lightbulb Simple Hamburger-style Menu

    This question is raised so many times in TG.

    I usually build my menus in CSS and avoid the Xara Navigation Bar at almost any cost.
    The main reasons are it does not allow sub-menus with any font and you are hard pressed to match into the style of your website design.
    Its main advantage they do have is you can nest sub-menus but this a design style that does not work especially well in a mobile setting.

    In the past, I have suggested the use of on-line CSS generators but this forces the Xara design approach into a coding one.
    They still have their place, e.g., https://www.cssportal.com/css3-menu-generator/ but many designers do not want to learn about CSS and JavaScript to get these menus working.

    Here, I have tried to leverage the Xara style and use its more visual approach.

    METHOD
    I have Grouped a symbol under a text area.
    Symbol has a ClassName of symbol.
    The text Area has a ClassName of menu.
    I have partitioned away some CSS code.

    MODIFICATIONS
    This allow you to Ctrl+Right+Click the symbol and replace it with any other - no longer just a Hamburger menu.
    You can easily change the symbol colour.
    The text area allows you to create a list of Links, as deep as you like, on the page.
    Links can share or go on a new line to act as the menu options.
    Any text, any font, any size, any position any decoration, any dividers,... All visible and under your control.

    Both are simple to alter as you normally do within Xara.

    CODE CHANGES
    All the code is in the little CSS text element off-page.
    It can be Shared on all pages or code instead added into the Website Head.
    It can mostly be ignored.
    Those entries in :root can be tweaked for duration, colour and line widths.
    Experiment but come back with questions and hopefully your own creations.

    PRESENTATION
    Symbol and menu should be physically apart.
    The CSS code allows a reasonable delay before the menu closes if the mouse or your finger wander elsewhere.
    You can avoid an overlap as this could obscure the Symbol.



    I have included the Xara Navbar (paw) for comparison.
    My 'compass' Menu is sitting in the !Menu layer for tidiness.
    I could have left it on MouseOff but it made things look a bit messy.
    Just leave it hidden and use Solo mode when editing.

    CSS - Simple Symbol Menu.xar

    Acorn
    Acorn - installed and 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

  2. #2
    Join Date
    Feb 2014
    Location
    Toronto, Canada
    Posts
    791

    Default Re: Simple Hamburger-style Menu

    Thank you Acorn, I have been looking for something like this for a while. I will play with it in the next 2 to 3 days.

    Thanks again for your amazing support.

    Roly

  3. #3
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,565

    Default Re: Simple Hamburger-style Menu

    This fails in the same manner as creating a layer and doing the same thing natively in Xara. Make it sticky (essential in my mind) and it doesn't work.

    It's a shame the Xara team doesn't appear to be addressing their content that doesn't work correctly.

  4. #4
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,241

    Default Re: Simple Hamburger-style Menu

    It's a shame the Xara team doesn't appear to be addressing their content that doesn't work correctly.
    +1
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

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






  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,972

    Default Re: Simple Hamburger-style Menu

    I've got carried away!

    I have reworked the 'simple' into a chimera!

    The code now allows you to use any number of symbol menus on the one page.
    Xara doesn't let you add a ClassName or ID to a Group; it just disappears.

    All the menu entries are grouped and some more CSS finds the parent and changes it to a fixed position.
    Firefox still does not recognise the :has() function so I had to compromise with some JavaScript that only fires up for that browser. So my aspiration of a pure CSS menu has been tainted (only 3% (Egg!) use Firefox) but obviously you have to meet expectations.
    I then had fun with Full Width as it ends up plastered above everything else. i had to develop my own flavour to find Firefox is a PITA. Anyhow I cheated with putting the Stick at the Top yellow bar at the sides of the Pasteboard as well.

    I finally, changed most things that can be altered to CSS Variables so you can change values there and not mess with the rest of the CSS.

    Do treat as EXPERIMENTAL.
    I will make it work for my needs and if you report an issue, I may consider fixing it but there are no promises.

    CSS - Main & Variant Symbol Menu.xar

    Acorn
    Acorn - installed and 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

  6. #6
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    819

    Default Re: Simple Hamburger-style Menu

    Thanks for this @acorn. Easy to understand for intermediate users. As Chris and Gary mentioned this is sadly needed in the content catalogue. I realize that Xara starting WBs is fine. WBs in the catalogue are more current, but what about the folks who want something more current as designers. The regular components for web really need a complete updating.

    Iíve looked for some fast grids for design. Saves time, but you have to go to web blocks for a grid, open it up, strip it down and copy over.

    Failing that just sub to xbuilder!

    Xara .. just plop a hamburger button in the button section and be done with it.

    Many thanks for filling that obvious hole.
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,972

    Default Re: Simple Hamburger-style Menu

    Quote Originally Posted by Chris M View Post
    This fails in the same manner as creating a layer and doing the same thing natively in Xara. Make it sticky (essential in my mind) and it doesn't work.
    It's a shame the Xara team doesn't appear to be addressing their content that doesn't work correctly.
    Chris, the revised version sticks. It fails in Firefox so requires a lot of fiddling.

    Acorn
    Acorn - installed and 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

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,972

    Default Re: Simple Hamburger-style Menu

    Quote Originally Posted by bwood View Post
    I’ve looked for some fast grids for design. Saves time, but you have to go to web blocks for a grid, open it up, strip it down and copy over.
    Bill, grids are easy in 'Freeform' Xara designs.

    Create one image holder
    Create one text block.
    Arrange and Group.
    Now Enable Smart Duplication (Shift+Ctrl+5 (toggles)).
    Create copies across and/or down.
    Adjust spacing.

    Blindingly fast. Smart Duplication is one of the later introductions that actually works, if you know how.

    Otherwise Clone and position dragging with Ctrl down.

    Acorn
    Acorn - installed and 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

  9. #9
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    819

    Default Re: Simple Hamburger-style Menu

    Darn cool Acorn. One of the features that I breezed over and now I find very useful. Not sure what you meant as an image holder. I simply dumped a pic in as a holder. Thanks again.
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,972

    Default Re: Simple Hamburger-style Menu

    Quote Originally Posted by bwood View Post
    Darn cool Acorn. One of the features that I breezed over and now I find very useful. Not sure what you meant as an image holder. I simply dumped a pic in as a holder. Thanks again.
    Bill, you may want to prep the image as a pop-up photo, have default Alt text, a filter, a caption, a contour, ...

    Acorn
    Acorn - installed and 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

 

 

Tags for this Thread

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
  •