I have not been able to find any information on how to design rich and user friendly navigation menus in Xway. The only help I have been able to find is related to some old-style basic top-line menus aimed at sites with very few pages to navigate through. In the old Freeway there was at least the possibility to add basic text-based sub menu items but I can’t find a solution to do this in Xway.
What I am really wanting to achieve is some top-line menu items which expands to offer a second, and possibly third, level of rich and configurable menu choices. By rich and configurable I mean the possibility to use different text fonts and sizes, and even images, as links to the different sections and pages of a site.
I have attached a few screenshots below to give an idea of the type of menus I am thinking of. These are just a few selected examples from a selection of different industries as these kind of menus seem fairly standard these days.
Are anybody able to offer any advice or direct me to a resource which can help me design such menus in Xway?
Xway doesn’t support submenus (currently), and you can only have one menu on a page, but you can add a secondary navigation box that contains the links that you might have added as a submenu. For example, Apple’s website contains a top-level menu (which does now have submenus, although it didn’t previously), followed by a secondary navigation bar. If you go to Mac - Apple , the secondary bar contains links to different Mac pages (MacBook Air, MacBook Pro, iMac etc.)
We used this approach for some of the Xway 1.0 templates (coming soon).
Another idea that may be a better answer to your question: you could add submenus via popups (search for “popups” in the Xway User Guide).
Popup boxes are container boxes that remain hidden until they are targeted by a link, so they can contain any type of content.
The tricky part here (I think) is to get the popups to work with hamburger menus. You can get part of the way (at least) by using flex containers.
I’ve noticed that this type of submenu has become more common recently. Apple started using them fairly recently, and they’re definitely an improvement on older (Mac-style) submenus. We might look into adding (more direct) support in a future version of Xway.
Another issue: how to get the popup to display when hovering over a link (and not simply when clicking on a link)? You might need to use JavaScript to do this (the submenus on Apple’s website don’t appear if JavaScript is turned off). If you do use JavaScript, make sure that your site is still navigable without submenus.
Yes, Apple seems to understand that there is a need for different types of navigation depending on the specific scenario. Delta, Patagonia etc also use different types of navigation on their sites. But wherever they need to provide the user with a ‘visual map’ to allow them to quickly find what they are looking for within a given head-line category, and where there are many items to navigate, they use the ‘mega menus’ (the trending name for menu type I am after). This is exactly what I need. A secondary bar will unfortunately not serve that purpose. Personally, I think this is a massively important feature to add to Xway if a solution currently does not exist.
I need to get my head around your pop-up box suggestion. What would happen if a user has disabled pop-ups in their browser? Would they still work?
Can the pop-up box be configured to have a consistent location and size so it always appears under the head-line navigation bar? How will it work on different screen sizes? etc. Any thoughts?
I need to have a play with that to see if it might offer a user friendly solution. My fear is that it would be a bit too complicated for me to do and would not deliver the desired result.
Where would the pop up boxes need to be created? Let’s say you have six head line menu items in the header wrapper on your master page, of which three would need to ‘drop down’ to reveal a pop-up (mega menu). Would a pop-up box need to be created inside the specific menu item box?
I think it is complicated, and I’ve edited my answer to give more information on some of the issues that are involved.
“Popups” in this context are invisible boxes that appear when they are targeted by a link. But that isn’t actually enough, because if you display them as a submenu you probably want them to appear when you hover over the link. I don’t think there’s a way to do this in CSS, so you would probably need to use JavaScript. Apple’s submenus don’t work if JavaScript is turned off, but I think their site is still navigable, so there needs to be an alternative method of navigating.
Another complication: where they go depends on whether a page is displaying a top menu or a hamburger menu.
Personally, I think this is a lot of work, and I would be inclined to use a secondary navigation bar (as Apple still do). Alternatively, you could place a secondary navigation box at the top or bottom of your pages. Xway’s support for multiple master pages can help you here. If (like Apple) you had a Mac page and an iPhone page, you could create separate Mac and iPhone master pages that depend upon a global master page, and put appropriate Mac and iPhone navigation boxes on these secondary master pages.
If a top-level menu bar is displayed, you would want it to appear below the menu bar. But you would want to do something different if a hamburger menu is displayed.
I don’t think it’s easy. Apple’s website is hand-coded, and they probably have a team of web developers.
Here’s an example that doesn’t require JavaScript:
It works by using a hover selector on the top-level menu item, rather than a target selector on the submenu.
I don’t think there’s anything here that you couldn’t do in Xway, but it’s not compatible with Xway’s navigation menus (in their current form), although you could use it to create a separate navigation system (quite a lot of work).
Having had a play this weekend, I can confirm that the popup solution is difficult and messy. At least with my skillset.
I’m afraid that the Java and HTML coding suggeston above are beyond my technical capacity. It’s exactly for the relatively non-technical approach that I have loved using Freeway in the past (which I sadly can no longer use on my new Mac).
I guess a simple sub menu functionality like the one in Freeway would do the job also. But even that does not seem to be an option in Xway, which I do find surprising. Are there really no sub menu functionality at all in Xway? I really wish that I could stay with the Freeway/Xway family so I don’t have to start over elsewhere but a solution for user friendly menu navigation is, in my view, crucial for a website with more than a handful of pages.
Submenus can be fiddly to navigate, and there are many large websites that don’t use them (Apple didn’t until recently). A typical approach (which Apple still use) is to have a secondary navigation bar.
We may look at adding support for submenus in a future version of Xway.
Something you could do fairly easily is to add a global navigation area that opens near the top of the page when you click on a menu link. This would be similar to the More navigation that is shown on the BBC website, or to the global navigation that appears when you click on the hamburger in a yellow circle on the Guardian website.
Essentially, this involves creating a hidden navigation section at the top of a master page (just below the menu), using hidden visibility and none display, and setting a target style to display this when users click on a More link in the top menu. Xway doesn’t currently have a way to link to an item on any page (vs. a specific page) using Page links, but you can achieve this by using an external link to #itemID (the ID of the hidden navigation box). The hidden navigation section should be a flex container, with flex items that adjust to the size of the screen. Within those items, you can place any content that you like.
I’ll post some more detailed steps after we’ve released Xway 1.0.
Yes, it looks like the Guardian and the BBC both use a single line of links for their very top categories and then yet another line of links for their next level sub-categories. This works well for their type of service, although in my view, the BBC site has way too many headings in those two lines. But this is not the ideal solution for a broader and more detailed navigation. For that they both use a classic drop-down menu from their Hamburger icons. The guardian’s drop down is a mega menu and the BBC’s a more classic drop down. A good way of combining the two types of navigation for different needs. And when you shrink the screen to a smaller device size the BBC drops the down menu is the only navigation they keep (for good reasons). The Guardian keeps both their main category line and their sub category line plus of course the hamburger with the drop down menu. That’s a lot of menu stuff to fill on a small screen when the most important of them, the drop down from the hamburger which will give the user full navigation, would have been much cleaner (in my view at least). And, annoyingly (again my view) they make the sub category line scrollable to the side because it obviously won’t fit everything in the screen. My point is that there are definitely good uses for alternative navigation styles but at the end of the day a drop down menu is always needed, bar for maybe the most simple sites. To not offer that option in Xway is a great shame and a missed opportunity.
I will have think, and a play-around, to see if any of the alternative suggestions work for my purpose. Unfortunately, I fear it might just be a more complicated, and sub standard, work around in the short term.
My annoyance was related to keeping the scrollable sub category line on a small screen. Apple does not do that. They sensibly revert to a drop down menu from a hamburger on a small screen. Apologies if that was not clear.
I appreciate there’s some individual preferences here. But my view is that a drop down menu is an essential navigation tool and I’m bummed that Xway doesn’t have a solution for something as basic as that.
If you click on Mac, followed by Explore All Mac, you should see a horizontal scrolling bar. Ditto for the other sections.
As I’ve previously said, Apple’s website didn’t have submenus until quite recently, and I never had any problems navigating their website.
But that doesn’t mean we won’t introduce support for submenus in a future version of Xway. They will probably be similar to what you call “mega menus” rather than to old-style Freeway menus.
Ok, I see where you are now. That’s three clicks down their drop down menus and I didn’t go that far. Not sure I see the usefulness of that additional navigation layer there, to be honest.
Anyway, I do hope Xway will support sub menus sooner rather than later to remain a viable option. Mega menus or classic ones, I’ll take any of them…
I wonder if you could guide me in the direction of the templates for Xway 1.0 which uses “a secondary navigation box that contains the links that you might have added as a submenu”?
I downloaded the templates on the page Xway templates and had a quick skim through but could not obvioulsy see any templates with sub menus.
Portfolio is one example. The Graphics and Web pages contain a secondary navigation bar below the main menu. These pages derive from secondary master pages (master pages that have their own master pages).
So if you create a new document from this template, and preview the document in a web browser [*], you should see that when you switch to the Graphics or Web page there is a secondary navigation bar that contains links specific to those pages (similar to how Apple provide secondary navigation bars for their pages).
Another template with a secondary navigation bar (containing graphics in this case) is the Macro template. This is shown on the Abstract and Animals pages.
[*] If you use Safari as your default web browser, you will need to save your document before Safari will preview it.
Ok, thanks. That’s fairly straight forward. But unfortunately the result is a mess when I shrink the page to a small screen. The main menu correctly turns into a hamburger, but the sub menu just stays the same size so most of it becomes unreadable/hidden outside the screeen if you have more than a few short sub menu headlines. And the hamburger does obviously not include the sub menu items. Unless I am doing something wrong?