Simple Hamburger-style Menu

[Acorn]

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

[roly]

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

[Chris M]

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.

[gwpriester]

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

+1

[Acorn]

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

[bwood]

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.

[Acorn]

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]

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

[bwood]

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.

[Acorn]

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