Mobile Navigation Menu

[dportener]

Many modern mobile websites have adopted a similar style of navigation. Specifically, an icon with 3 horizontal lines.

The Xara website http://www.xara.com/us/web-designer/features/ uses this style (when viewed on a smaller screen).

Further, when opening, it looks like a full-width vertical accordion.

I have not seen this style in any of the Xara templates.

Does anyone know how to replicate this?

[Egg Bramhill]

Hi dportner,

This Xara site is not created within Xara, it uses php and is probably a cms site. It's not cheating, more horses for courses.

Having said that the menu structure could be reproduced fairly closely within Xara.

[gwpriester]

If you're creating a menu for mobile devices you don't have to worry about mouse over. Create a layer, call it menu, then create individual buttons that link to your pages.

Create the three horizontal rectangles icon for the menu and add that to the mouse off layer and link the icon to the menu layer. When the visitor taps the menu icon, the menu layer appears.

Attached is an example.

[dportener]

Thanks Gary!

The example you provided is exactly what I was looking for

[Egg Bramhill]

Ah, whilst I was working on a similar look Gary posted. Sometimes I prefer to have an individual page for mobile variants which I call "menu" which i often find easier to edit if your wanting up/down closers for "drop-down" menus.

Here's my solution: LINK http://www.parkeston.com/!up-down-menus/

[gwpriester]

Cool Egg!

dportener - You can also create a single button Navigation Bar with the Navigation Bar Tool in the Website Properties fly out.

[dportener]

Gary and Acorn. You are truly gentlemen for taking the time and effort to help me and others.

Thanks for your help, it is very much appreciated.

[gwpriester]

Egg and I, and all the moderators and members are always happy to help when we can.

[ewa jankowska]

Forgive my ignorance, but how do you link the menu icon, in mouse off layer, to the menu layer??

Thanks

[Egg Bramhill]

If you're using a Menu layer, as per Gary's attached file, do so in the Web Properties / Link select pop-up layer and select menu from the drop-down and click Apply.

If you merely want to use a navbar, see attached web file.