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

[Initiostar]

There is no doubt there are many ways to manage a scenario where the designer wants to create working drop-down menus. Where the drop-down menu has numerous links, the classic vertical down-down can be cumbersome to view and manage. Here is one example where a drop-down menu tabs can be a page in its own right. This allows the designer to have any number of links placed on the menu, without the need to replicate a myriad of pop-ups on each page:

https://initiostar.co.uk/demo/simpleHeader/index.htm. The upside here is that one can create a transition to a mobile variant without too much effort.

Where though, a designer wants to create a classic drop-down menu, there are again lots of variations that can be deployed - this is an example where each drop-down menu is a pop-up, but it needs to be repeated on each page: https://initiostar.co.uk/demo/submenu/. The alternative to repeating a sub-menu on each page, would be a modification of Acorn's solution for having a pop-up on one page that is accessible from other pages - a Gary P request that I modified to use a simple button (text and shape soft-grouped), rather than the Xara Navbar : https://initiostar.co.uk/demo/common-layer/index.html. [ Without the Navbar it might be possible to simplify the code].

In taking a fresh look at all this, I discovered the Xara bug we identified many years ago is still there! Create any shape, add a text line centered, copy to the MouseOver layer, modify and soft-group. Add a link and preview - the MouseOver elements shift to the right! Yes, it may only happen when you have Scale-to-fit-Width, but it can catch you out for sure. Age-old solution here, left-justify the text and manually centre:

Working example using MouseOff, MouseOver and MouseDown: https://initiostar.co.uk/demo/pagemenu/

The corollary to the latter example is that I have frequently been asked to match the menu behavior of a desktop variant and mobile variant, whereby the visitor can see from the menu what page they are on; a designer can achieve this on the desktop by having a MouseOver and MouseDown state that are the same; the mobile will show a MouseOver link (in a menu) until another link is executed.

Several real world examples: https://theparsonage.co.uk/ and https://initiostar.co.uk/. Also worth a look at a CSS idea (thanks to Acorn) https://initiostar.co.uk/demo/jq-menu/

Trust this helps to get the ideas flowing.

[bwood]

Thanks Egg. Really like that video and demo.

-Bill

[Acorn]

My tuppences worth.
NavBars and buttons with multiple layers are messy and prone to misbehaving or breaking in strange fashions.

I wanted to create a navigation system that was totally Xara-derived.
I almost managed with one little piece of JavaScript remaining: the Red Cross to close the menu page back to the last page visited has Link - javascript: window.history.back();.

The approach is to create the index page as the menu.
All of it is done with Xara: Sticky, Variants, roll-over colour change, layout, near perfect performance in Lighthouse, load time of a quarter of a second, only one instance of the menu, no extra layers.

Menu on a Page.xar
The entire design file is 25kB and fits in your pocket.

Acorn

[Egg Bramhill]

Thanks for the input Gary. Here's a variation of my earlier version using the Xara navbar with pop-up layers. This time however I've only used the menu once, exported as menu.html. Then I've created a second main site that loads the menu.html into the head of each page. This makes it far similar to work with as you don't need any pop-ups in this site. The only downside is that because things are loaded into an iframe the refreshing doesn't work well and really needs the local cache emptied to see changes. I attach the two xar files used to create this version.

DEMO