making buttons for nav bar - mouseOver question

[bwood]

I was rather proud of myself until .....

I've constructed a number of buttons in a row - you could call that the nav bar. In the photos you can see the xara nav bar I'm replacing in the bottom of the pics. I have copied and pasted in place the elements for the mouse-over state, but they're not showing up on the mouse over layer which is turned on.

One pic is the mouseOff and the other is the mouseOn.

Perhaps its screen fatigue. They are all individual buttons - but there is no mouse-over state.

On the mouse-off state, which I've closed, you can see the labor of my efforts. (rectangles and text) All I want is a simple color change in the background of the buttons for the mouse over state.

The sub menus are also shown in the picture - those are pop ups.

All this is to alleviate the time it takes for a ready made nav bar to load. I'm lost on this one. Thanks for your help.

Bill

[Chris M]

A couple of examples and a .xar project file for you to fiddle with.

I find using the MouseOver Layer to be extra steps for little gain, and they often don't line up correctly, especially with Scale To Fit Width.

If you want to do the MouseOver:
Create a rectangle, add text, create your link.
Select text and rectangle and copy.
Paste In Place on the MouseOver layer and do whatever edits you want.
Select all 4 objects on both layers and create a soft group (ctrl+alt+g).
Repeat with all buttons.

Link to some ideas. The project file is attached further down. >>> BUTTONS <<<
Link to a fancy menu I made years ago for jukebox style of selection >>> MENU <<<

The project file for the Buttons link...

[bwood]

Thanks Chris. I have added links to them all, and must have missed something somewhere. I think I soft grouped the MouseOf before I pasted in place on the mouseOver.

I do have a question. When I repeat these on all pages, will the pop ups on the sub menus carry thru to all pages, or do the pop ups have to be repeated as separate elements?

Bill

[Chris M]

If, by pop-ups, you mean the layers that make up your sub menus, then you will have to select everything on that layer and repeat on all pages. Tip: I like to 'Solo' the layer, so I don't accidentally capture something on the MouseOff layer.

If, by pop-ups, you mean the MouseOff layer, then they will automatically repeat as they will be part of a soft group.

[bwood]

Thanks Chris. I do seem to recall not being able to repeat pop ups as sub menus from Gary P. I’ve got a lot of pages but I think the payload will be reduced drastically by building nav bars. For this site in particular, with the number of pages, sub menus and complexity I may dispense with roll over buttons.

I did html years ago - and I really should dig into CSS again. Unfortunately I never grasped the concept.

Those examples are terrific Chris. Thanks for including.

-Bill

[Egg Bramhill]

Following on from Chris's points, I've created two navbars neither using Xara's NavBar tool.

One uses mouse-over animations to open a pop-up layer with a different coloured button & text. It works fine but is a pia to create and work with because of all the pop-up layers required. It does fall down on drop-down buttons not allowing for mouse-over effects. It would also get really messy if you needed to amend the menu. It would be easier to use if the menu was only created once and placed into a placeholder but that's beyond this stage at present.

The second uses CSS Responsive Menu Generator suggested by Acorn. This is a far better alternative in my opinion, with no need for multiple pop-up layers and fairly simle to amend the html text in the placeholder to amend the button titles and links.

I'll attach the xar file.

VIDEO

DEMO