A Modern Approach to a NavBar

[Acorn]

I eschew buttons and Xara's NavBar approach as being clunky and not in fitting with current web design.
Feel free to argue.

Here is a design approach that you can adapt:

• Buttonless - just using Xara's Themed colours, a set of words and a background NavBar that are all Sticky.
• Sub-Menus - same approach with in-line jQuery Links and a dash of CSS coding.

The design file: CSS&JS - Modern Menu.xar

Enjoy.

Acorn

[gwpriester]

Here's my approach using only capabilities available in Xara. http://gwpriester.xara.hosting/mi-casita/

The text is just simple text. No button shapes, just text. The color or the text and the states are set in the Website Properties menu.

The drop down menus are separate layers linked to with the text buttons.

[Acorn]

Here's my approach using only capabilities available in Xara. http://gwpriester.xara.hosting/mi-casita/
The text is just simple text. Now button shapes, just text. The color or the text and the states are set in the Website Properties menu.
The drop down menus are separate layers linked to with the text buttons.

Gary, I feel you have missed the point.
I was trying to get designers to get off Xara's limited NavBars that are overcomplex, clumsy and blocky.
Many use the NavBars for simple buttons.
Few realise that a button effect does not need a grouped set of shapes on MouseOff and MouseOver.
I was aiming for simplicity, consistency & repeatability and, hopefully, elegance in presentation and coding.

While I am not critising your solution, I need to use it in a compare and contrast demonstration of the things I have considered over a long period of Xara design work that I feel is important.

I introduced Named Colours.
The Named Colour are used in the Website Links to provide consistency across the design pages, Main and Variants.

I too used straight text for the buttons; you used Text Lines, I, Text Columns.
Xara treats Text Line and Columns differently: you cannot turn a Text Line into a Text Area. If you add a Paragraph Background to a Text Column you can widen the line to provide extra padding.

I introduced a NavBar Paragraph Style, again for consistency.
Apologies, your HOME has a trailing Space and so the NavBar items are not the same spacing.

You did not use Sticky for the NavBar position.

You have just used the page and pasteboard colours to act as the NavBar backdrop.

You use Pop-up Layers for the Sub-menus.
I used a Layer (not pop-up) to hide the Sub-menus.

In use, your Sub-menus are hover events.
Mine are reveals that stay open until closed so they show across Variants; a pop-up just disappears.

I find large numbers of layers awkward.
Your approach is very difficult to develop if you want sub-sub-menus when there are MOff & MOver buttons on pop-up layers.

By using jQuery in-line, I have bypassed Xara's coding for handling pop-ups.
I admit jQuery is a large library and the current Xara offering is very stale. I have described how to overcome this elsewhere.

Acorn

[gwpriester]

This is all true. But do you think the visitor to this website, if it were a website, would know the difference?

You have skills and knowledge in programming, and other web related options. I have only my sense of design and my very limited knowledge of Xara.

[Acorn]

This is all true. But do you think the visitor to this website, if it were a website, would know the difference?
You have skills and knowledge in programming, and other web related options. I have only my sense of design and my very limited knowledge of Xara.

Gary, I am trying to give any designer an insight into producing ace-sharp web products and nudge Xara in the same direction.

Bloat is always easy.; any design is hard.

Acorn

[gwpriester]

Fair enough.