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 Wood
Charity Web Design
XARA Pro+. WD17, Designer 17. Premium packages.
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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
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.
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
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
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.
Last edited by gwpriester; 21 August 2021 at 05:33 PM.
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
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?
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
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
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
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.
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
Bookmarks