The secondary navigation bar is horizontally scrollable, so it should work fine (as Apple’s secondary navigation bar does) on small screens.
Apple have added left/right scroll widgets, which are a nice addition (although they don’t work if JavaScript is turned off).
Ok, that scroll bar is not obvious as it only becomes visible if you touch the sub menu bar, which none of my testers (random people in the office) figured out to do. And even then, the menu item to the far right is hidden outside the screen and not possible to scroll in. Currently not a useful solution unless i can make changes to this. Any ideas?
I think scroll bars are hidden by default in modern browsers, regardless of whether you set overflow to auto or scroll. If you want to experiment, the horizontal scroll setting is added as an extended property on the submenu box on the Graphics and Web master pages in the Portfolio template.
I don’t find that the menu item to the far right is “not possible to scroll in” - you should be able to scroll to the edge of the box in both directions (I can).
For another example, look at Latest news, sport and opinion from the Guardian on a 320-pixel wide device (or use Safari’s Responsive Design mode to simulate this). This has a secondary scrolling navigation bar which contains “UK|World|Climate crisis|Ukraine|Football|Newsletters|Business|Environment|UK Politics|Education|Society|Science|Tech|Global development|Obituaries”. It works fine for me on narrow devices. There isn’t a scroll bar (developers often try to hide these because they look ugly), but there is a nice fading effect to the right.
I don’t know how to create the fading effect off the top of my head, but I think it probably uses some kind of CSS gradient.
Is this treatment of the sub headings on the Guardian website (film, Music, TV etc string underneath Culture preferable to having scrolling sub heads - as I’ve done here under ‘Information’ www.stokefilmtheatre.org.uk ?
And is XWay capable of doing scrolling subheads (CSS Menus)?
A position: fixed, z-index: higher than the scroll bar, and opacity: [less than 1] or a 24-bit PNG would make the transparent/translucent fade. You would need to add pointer-events: none to it so it wouldn’t interfere with the underlying scroll element.
Walter
Cheers Walter!
A transparent PNG should work. I think it should have absolute rather than fixed position (so it stays with the horizontal scrolling box), and be a child of the scrolling box (pinned to the right, top, and bottom).
Another approach might be to use a CSS gradient with transparency. Again this could be applied to a box with absolute position.
This seems like a helpful tip:
pointer-events: none
Hi Noel,
I think your Freeway menu approach is fine, but it’s not something that is currently supported by Xway’s navigation menus. We plan to add additional features to navigation menus in future, so this is something we might support in a future version of Xway.
In the meantime, you could use a secondary scrolling navigation bar. But another alternative for your site (since you only have one submenu) would be to put the submenu items (About Us, Tickets, Parking, Seating, Volunteering, Book, Links) in the main menu. [I’ve shortened some of these, so they don’t make the menu too long.] The end result would be a menu that looks pretty much like your existing menu on mobile devices, but contains more items on wider devices.
Thank you for your reply. I’m in the process of redoing the website in Xway so has definitely given me food for thought - great to know what’s possible and what’s not.
This is an Xway document that contains a scrolling navigation bar that is similar to the Guardian navigation bar:
Fade effect.zip (19.6 KB)
This uses a CSS gradient for the fade. @waltd was right in suggesting that this needs to have fixed position (an absolute-position box scrolls along with other content, which I hadn’t expected). The fade box has a zero right offset so it aligns with the right of the viewport, but it doesn’t have any vertical offsets, which means it keeps its natural vertical position on the page: if the page scrolls, fade will scroll with the navigation bar (its parent).
The fade is created by an extended property:
background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1))
I also added pointer-effects: none as Walter suggested, but it doesn’t seem to have any effect: you can’t drag within the fade area (that’s also true of the Guardian website).
Other notes:
If the page is wider than the pagediv, the fade box could be visible in the area outside the pagediv (away from the navigation box). This doesn’t happen currently, because the page and fade box are both white. One way to fix this (if it needs fixing) would be to use a breakpoint. Breakpoints currently have to be entered as CSS Markup, which is a bit tedious. We’re planning to improve Xway’s support for breakpoints in a future version.
There is a box called hide-scroller beneath the navigation bar. This overlaps with the navigation bar, so that the scroller is hidden (as on the Guardian website). Instead of using a separate box for this purpose, you could use the next box that happens to be on the page. It overlaps because it has a negative top margin (-15px). The navigation box has a bottom padding value of 10px, so the hide-scroller box doesn’t obscure the actual content. If you don’t want to hide the scroller, remove the hide-scroller box along with the bottom padding on the navigation box.
When previewing pages in ‘View Web Preview’ from the top toolbar page links don’t appear to work - but if you go to File at top then Preview all is fine and the links all work.
Links to other pages are designed to not go anywhere in internal Preview, because this is supposed to be a preview of the current page (or with master pages the first site page that inherits from a master page).
One reason it’s like this is because Xway only publishes a single page for internal previews, so we don’t want to follow a link that goes to a page that hasn’t been published or isn’t up-to-date.
We might change this in future. It’s possible that following an internal link could cause that page to be published, and switch to it in the Site panel. We probably don’t want to follow external links though (it’s not supposed to be a web browser).
I’ve tried to follow your helpful posts and had a little play by inserting a second level link row including the bar to hide the scroller, but have hit some snags.
The first appears when I shrink the page to a size where the hamburger icon appears for the primary link menu. When I click the hamburger icon and the menu items drop down then the top menu items in the drop down box are obscured by the second level link row. See attached screenshot:
Secondly, the hide bar does not seem to cover the correct area so the scorll bar is still visible. I have tried numerous changes to the sizings of various boxes but do not seem to make it go away. See attached screenshot:
Finally, I can’t figure out how to change the size of the drop down menu from the hamburger icon. In your examples they are full screen but whatever I seem to do it just comes up as a small box as you can see in the first image above.
Any suggestions on the above three issues?
Thanks.
It’s a little hard to see what is happening without looking at the actual page, but if your menu has absolute or fixed or sticky position, Xway should have given it a z-index of 999, which should mean that it appears in front of other elements (unless these have been given a higher z-index). Z-index (in the Style section of the Box Inspector) is how you control front-to-back order.
Hiding the scroll bar in the secondary navigation box: again, I can’t see what you’ve done without looking at an actual page, but you should be able to create a vertical overlap by using a negative top margin on the box that follows the secondary navigation box (as in the example document I posted earlier). I also added some bottom padding to the secondary navigation box, so the scroll bar would appear further down (and be hidden by the following box). Negative vertical margins don’t always display correctly in Xway’s Page view (that’s something I need to look into), but they should work on output.
Hamburger drop-down menus are the same width as the menu element that you add to a page, so you normally want this to take up the full width of the page - or (at least) nearly the full width of the page. There are some tricks you can use if you want to have other elements overlapping a menu bar. The Fleet template is one example you could look at: we’ve added a logo and telephone numbers at the top right and left of the page, in the same area as the menu bar (they appear in front of the menu bar because the menu bar has a z-index of 999 and they have a z-index of 1000). Other examples: Macro template, Portfolio template, Retro’d template, Smile template, Snapper template, TheBand template.
Thank you Jeremy.
For information, Xway does not set the z-index to 999 with a fixed position for me, but it sets it to ‘undefined’. I’m not sure if this is because I started the work in an earlier version of Xway (even though I am definitely using the latest version now)? Or maybe ‘undefined’ simply means 999 without actually showing the exact value.
Anyway, the z-values was not something I was familiar with so thank you for explaining that. What I want to achieve is exactly as you explain, and as you have done in the Fleet template, which is to include a logo and some contact icons in the menu line - the logo to the left of the menu and the contact icons to the right of the menu. I like how the z-values can help achieve that by effectively ‘layering’ the two boxes (the menu box and the box with the logo and contact icons), within the header box. I had achieved this in a different, more complex, way. Effectively, I had introduced an additional box inside the header, in which I had put the menu box, a box with a click-able logo to the left, and a box with two clickable contact icons to the right. I had then used ‘spacer’ boxes to help with the alignment of these boxes inside the header box. It works but it is arguably less clean and I can see that it might therefore create other issues.
To simplify things, I have now tried to implement the solution you propose in the Fleet template and it works. In fact, it seems to have resolved the issue with the drop down menu not displaying as a full page.
I am, however, still not succeeding in hiding the horizontal scroll bar of the aecond level link row. Very annoying.
The whole thing is taking me a lot of time for a very mediocre solution (in my view). Proper menus can’t come soon enough in Xway, if you ask me.
*On a side note, the logo and the two contact icons in my menu bar each need to be click-able with a link. However much I try, I can only make an icon (image) a click-able link if I put it inside an additional container box, which I am then able to make click-able. Is this correct? So effectively I have had to create a container box for each of the three icons I need in the header (logo, phone and email). It seems like unnecessary boxes to me? Weirdly, I look at your social media icons in the footer of the Fleet template and they seem to be click-able without being inside a container box. But I swear that the minute I take my icons out of their container boxes then I do not have the option in the inspector to make them click-able links. I’ve even tried to copy one of the click-able social media icons from your Fleet template and pasting it into my site and the link immediately disappears?!!
If you give a menu Fixed position, Xway should set the z-index to 999, but it doesn’t prevent you from deleting or changing it.
I am, however, still not succeeding in hiding the horizontal scroll bar of the aecond level link row.
It’s fine to leave it unhidden, but if you’d prefer to hide it you could send me a cut-down document to look at. To create a cut-down document:
On a side note, the logo and the two contact icons in my menu bar each need to be click-able with a link.
If the logo and contact icons are flex items, you cannot attach a link directly (see Flex items and links near the end of the Flexbox chapter in the user guide for an explanation of why this is), so using an additional wrapper is the right thing to do (and is what the user guide suggests).
For an alternative to horizontal scrolling navigation, you could check out the Popup Navigation Box sample document.
Thank you for providing additional options.
Hi Jeremy,
I have the same concerns as @jensenm.
I’ve spent the last few days exploring Xway and like it very much, so I was on the point of upgrading from Freeway Pro to Xway when I saw this thread. I operate three websites (containing about 40 pages each) created with Freeway Pro on an old Macbook running High Sierra, most of whose menu links necessarily have sub-menu links, and one of which has sub-menu, sub-sub-menu and sub-sub-menu links. I was delighted to discover that my Freeway sites could be imported into Xway (not least because I could then abandon my old laptop and run all programs on my new Macbook , but the lack of support for sub-menus in Xway would prevent my existing logical site architecture from being either imported or recreated.
I agree with @jensenm that the lack of support for sub-menus is not going to bother those who operate simple websites with a small number of pages, but is a much bigger issue for those who operate larger and more complex websites.
I wondered if it might be possible to give some rough indication as to when a sub-menu capability might be available for Xway? I’d be very grateful if you could let me know - many thanks in advance!
Hi Sua,
Submenus are something that we will look at in a future version of Xway, but I can’t give a timescale for when that will be. There are other things that we want to do first.
There are many large websites that don’t use submenus, and I’m not sure that Freeway-style submenus are suitable for large websites. When we added navigation menus to Xway, one of the things that we were aiming for was the ability to create a navigation menu that is similar to the one that Apple use on their website, using CSS (rather than JavaScript) for the basic functionality. Apple’s website doesn’t use Freeway-style submenus, but they have since added an extra layer of navigation which is sometimes referred to as a “mega menu”. You can get close to this in Xway (see the Popup Navigation Box sample document mentioned above), and you could probably get even closer by adding some JavaScript.
Hi Jeremy,
OK.
Xway support for mega menus would be ideal and I hope Softpress will provide it soon. Even support for simple dropdown menus would be a help: they are an essential navigation tool.
In the meantime, I’ll explore your suggestion:
I’ll also explore the Popup Navigation Box sample document.
Neither of the above work-arounds are substitutes for (at least) proper drop-down menus, however, so I hope Softpress will be able to provide the latter before too long.
