Popup navigation box

Xway
,
1

This is a sample document that contains a menu along with a secondary popup navigation box. If you preview the document in a browser, clicking on More in the menu should display a secondary popup navigation box. The page titles in the secondary navigation box are taken from the Guardian website. The first title in this box (UK) is linked to a “UK” page. The others don’t have any links yet. You can close the navigation box by clicking on the close symbol at the top centre.

Popup Navigation.zip (35.4 KB)

How this works:

  1. The popup navigation box is defined on the master page (its ID is navigation)
  2. The box is a child of header, which has fixed position
  3. The box has absolute position (it will always appear at the same place within the header)
  4. Importantly, the box has zero opacity and hidden visibility. This means it is normally hidden. Another way to hide a box is to set Display to None. I used zero opacity and hidden visibility in this case, because this allows it to fade in and out using a transition (opacity can be animated, display can’t).
  5. The menu contains a More item, which links to this box. I used a bit of trickery in this case: Xway doesn’t currently allow you to link to an item on a master page (that might be possible in future), so I added an “external” link to #navigation (the ID of the navigation box)
  6. The navigation box has a dynamic style, which is set in the Dynamics Style section of the Box Inspector. I chose Target from the Type popup at the top of this section: this is used to set styles that are applied when the box is targeted by a link. Then, within this section, I set Opacity to 100% and Visibility to Normal. When a user clicks on More in the menu, this links to the navigation box, which then becomes visible (because it is the link target).
  7. The fade-in and fade-out effect is controlled by a transition property that is added in the Extended Properties section of the Box Inspector (just above the Dynamic Styles section): this is set to 0.5s (the fade lasts for half a second).
  8. The close box at the top of the navigation box links to the current page. Because this is set on a master page, I used a similar trick to before: the link is an “external link” to # (meaning the current page).
  9. One other detail: the close box has absolute position, and it is horizontally centred by having a left offset of 48vw (meaning 48% of the width of the browser view area) and a width of 4vw (4% of the view width).

Some other notes:

  1. The navigation box is a flex container containing flex items. You can put text or images within these flex items. On a wide screen, the flex items will appear as columns. On narrower screens, they will wrap beneath each other.
  2. When editing links within the navigation box columns, set the box opacity and visibility back to 100% and visible (so you can see the links). Change them back when you’ve finished editing. Do this on the master page.
  3. You might also find it easier to edit text and other content if you temporarily change the header position from fixed to absolute. Sometimes it can be hard to select text within fixed-position boxes.
  4. The navigation box contains global navigation links (similar to the More box on the BBC website). If you wanted to display different links on each site page, you could edit the contents on the various site pages in order to do that. (That will turn off Use Master Content, because the content is now different from the content on the master page.)
  5. I set a minimum height of 1200px on the main section of the master page. This is purely so that pages can be scrolled behind the menu and navigation popup. For a real site, with actual page content, I would remove this.
1 Like