Xway Sub Menu items

Xway
1

Hi,

Thank you for the b6 beta and adding menu items to the Xway workflow.

One question I have is it possible to have sub menus?

The site I look after has many product ranges and each range is in a separate folder, and the products are arranged in sub menus so you can easily pick the product from the sub menu.

I can’t quite see how to do this in Xway as there doesn’t seem to be a way to get unordered lists to work as menus.

Is this something that will appear in a future update?

Thanks.
Steve

2

Hi Steve,

Xway doesn’t support submenus, but we are planning to add some form of secondary navigation in future - perhaps a scrolling navigation bar (as on Apple’s website).

3

Hi Jeremy. Has there been any progress on the issue of submenus? On a site I’m working on, I need 10 submenus.

Geoff

4

Hi Geoff,

That’s not something we’re currently working on - but an alternative approach is to add a scrolling navigation bar beneath the menu. This is what we did when we converted Freeway templates into Xway templates (e.g. Portfolio template).

More information here: Navigation with sub menus

5

Thanks Jeremy, I’ll investigate!
Geoff

6

A couple more questions on sub menus, if I may.

On the Portfolio template the sub menu appears within a Flex Container - but if you insert Menu from the top bar it just appears as a normal box. Is there any preference?

And it seems that you can also have just one hamburger - the sub menu has to wrap or go in one continuous line.

I have also tried to do a sub menu in just text (similar to the Ambient menu) but it doesn’t seem to recognise each item of the menu - they all point to just one page.

7

Hi Noel,

Menus do actually have flex layout behind the scenes. Xway outputs a CSS file called xw-gn-menu.css which sets display to flex for the menu container. The submenu item has flex layout for the same reasons (flex layout allows you to layout boxes horizontally), but it is set explicitly because there isn’t special code that is being output for it.

You can only have one top-level menu. We would need to do quite a bit of extra work to allow additional top-level menus (e.g. avoid using duplicate IDs) and the user experience might not be great.

The actual Ambient template uses a menu rather than text, but the first tutorial uses a line of text links because menus aren’t introduced until the second tutorial. It’s possible to use a line of text and let it wrap on small screens, or a flex container that wraps on small screens, or a flex container that scrolls instead of wrapping. The Portfolio template chooses the last option.

I’m not sure what this means.

8

I tried to do a sub menu with just text (as the initial Ambient tutorial). With 5 pages listed in this sub menu it wouldn’t let me give a different page link to each but letting me have just one single link for all 5.

9

One other detail about the Portfolio submenu that might not be immediately obvious is that it has Overflow set to Hidden in the Style section of the Box Inspector, but refines this using an extended property (overflow-x is set to auto in the Extended Properties section of the Box Inspector).

Overflow controls the visibility of content that is outside the bounds of its parent: hidden and visible are obvious (the content is hidden or visible), but the two remaining options (scroll and auto) allow for content to be scrolled. Originally scroll would cause a scroll bar to be displayed always, while auto would cause it to be displayed when needed, but most browsers now use the second behaviour regardless of whether scroll or auto is used. Generally, we want scrollbars to be displayed when needed, so we’ve used auto here.

Setting overflow-x to auto causes browsers to display a horizontal scrollbar when there is content that can be scrolled. We could just set Overflow to Auto, but that might cause a vertical scrollbar to appear in some browsers or situations, and we don’t want a vertical scrollbar for horizontally scrolling content.

If you want to create a Portfolio-like submenu, you could do the same (or take a shortcut by copying and pasting the Portfolio submenu from a Portfolio document).

10

It works for me.

I think this is a less elegant solution than using a flex container, but here are some steps:

  1. Add a box on a master page and type “One Two Three” within it
  2. Set links on “One”, “Two”, and “Three” to go to pages “One”, “Two”, and “Three”

Note that you should have some kind of space between each link. It’s confusing for users if links run into each other. It’s also best to add the text before you add links. If you type “One” and add a link before typing “Two”, “Two” will automatically continue the link. If you’ve got into that situation, the best thing is to remove the links and reapply them.

11

Thank you for that. It seems like the ‘turn it off, turn it back on again’ approach worked. I just deleted all the links and started again.