How to create simple navbar with no mouseover and an underline on selected button?

[eselick]

The title says it all. I'm using the Simplicity template and I'd like to replace the current navbar with a simpler one.
I'm trying to create a navbar that looks like this:


After the button is selected it is underlined:



What's the easiest way to do this?
Thanks
Elliot

[bwood]

Very easy. Type your words. In a row or individually. Select each word. Under web properties dialogue box link to a particular page. Also under web properties uncheck link color etc. This is lower in the web property dialogue box. Once you have the nav bar the way you want it you can soft group, and if you want it on every page, use the repeat option.
A nav bar of this type is often used as a footer.

[Acorn]

Very easy. Type your words. In a row or individually. Select each word. Under web properties dialogue box link to a particular page. Also under web properties uncheck link color etc. This is lower in the web property dialogue box. Once you have the nav bar the way you want it you can soft group, and if you want it on every page, use the repeat option.
A nav bar of this type is often used as a footer.

Bill, that doesn't add an underline.

Create your NavBar entries with their links.
Set to Repeat on all Pages.
Select All and in Website Properties > Link > Untick: Use common website colours.
In Web Properties > Website > Website link colours > Untick: Underline Text Links.

Nothing now happens on mouse over.

On each page add a Line/thin Box under the associated Link word.

Acorn

[gwpriester]

Here's how I would do it and this needs adjusting for the underline width.

Open the attached file. If your version is older you'll get a warning that this was made with a newer version. It will still open and work when you preview the site.

Create a third Mouse layer mousedown which will have the selected page button state that shows the current page.

If you use the Text Tool for an underline, the underline will underline the entire word but not as elegantly as your example. I underlined the HOME button and this width applies to all buttons, which is not what you want. You will need to experiment a bit to work around this.

To achieve the text only effect, I have made the mouseoff button and the mousedown button rectangles the same color as the page background.

[eselick]

Here's how I would do it and this needs adjusting for the underline width.

Open the attached file. If your version is older you'll get a warning that this was made with a newer version. It will still open and work when you preview the site.

Create a third Mouse layer mousedown which will have the selected page button state that shows the current page.

If you use the Text Tool for an underline, the underline will underline the entire word but not as elegantly as your example. I underlined the HOME button and this width applies to all buttons, which is not what you want. You will need to experiment a bit to work around this.

To achieve the text only effect, I have made the mouseoff button and the mousedown button rectangles the same color as the page background.

Thanks to all of you for the help. What an amazingly responsive forum :-))

@gwpreister. 2 questions about your sample. How do I remove the black background which I don't need? Secondly, how do I make the spacing smaller between the button texts? What is controlling this?
Thanks

[gwpriester]

Isolate the MouseDown layer in the Page & Layer Gallery (the [S] icon). Hold down the Ctrl key and click on the white rectangle for the HOME button. Change the color. This change will take place for the other buttons on that layer. If the text becomes white as well, then Ctrl click on the text and change the color.

When this change is made, click the [S] icon again to turn off the isolation.

In my example, the space between the buttons is determined by the size of the button rectangle. So to reduce the space between buttons, create a button that is smaller.

You can isolate each layer and enter a numerical size for each button, but you will need to do this for each button state.

I can give more detail if you need it.

[gwpriester]

Acorn - Open my attached and preview the site.

I am getting a blue button state that appears for a split second before the button text appears. What is that all about?

[Egg Bramhill]

Here's how I'd go about this.

Unfortunately I'm not sure if there's a bug in Xara Designer + but the MouseOver orange lines don't show when published.

I recreated this in Xara Designer Pro X 9. It publishes as expected.

I've attached the xar file can someone see if they can replicate the error please?

DEMO

[eselick]

Isolate the MouseDown layer in the Page & Layer Gallery (the [S] icon). Hold down the Ctrl key and click on the white rectangle for the HOME button. Change the color. This change will take place for the other buttons on that layer. If the text becomes white as well, then Ctrl click on the text and change the color.

When this change is made, click the [S] icon again to turn off the isolation.

In my example, the space between the buttons is determined by the size of the button rectangle. So to reduce the space between buttons, create a button that is smaller.

You can isolate each layer and enter a numerical size for each button, but you will need to do this for each button state.

I can give more detail if you need it.

Hi - Are you saying to start from scratch creating new buttons in smaller rectangles or to modify your file. I did try to modify your example and cannot seem to select the individual button rectangles. Do I need to ungroup the navbar to do this?

[gwpriester]

eselick - As long as all buttons are same size, then you should be able to resize the individual button rectangles.

I did it in my sample file by making sure all three button states are visible then Ctrl clicking on the first button shape (which is the MouseDown), then the next button shape, Mouse Over and then finally MouseOff. But you have to select the buttons shape rectangles on at a time.

Egg - Works for me in Firefox.