Simple Rollover Layered Menus

A number of people get confused when creating a NavBar with rollover effects.

Here is a simple demonstrator: :pointAttachment 127951

Try creating a Yellow button that matches the red one with its sub-menu.

This approach allows you to be highly creative but you need to master the fundamentals:

1. A button shape on MouseOff.
2. A collection of shapes in a new Layer.
3. The button has a Web Animation effect to the Layer.
4. The button needs to have a fully connected area with the pop-up objects so use a Transparent undershape on the Layer.

Acorn

Now there's a coincident Acorn. For the past couple of hours I've been working on a xar you created on another thread and I know you know how to create buttons without images, I've used almost the same same technique you mention, the 99% transparent button. I like to use this method as it eradicates Xara's outdated navbars/buttons being converted into images, especially now we have 'fit to width'.

LINK

Quote:

---

Originally Posted by Egg Bramhill

Now there's a coincident Acorn. For the past couple of hours I've been working on a xar you created on another thread and I know you know how to create buttons without images, I've used almost the same same technique you mention, the 99% transparent button. I like to use this method as it eradicates Xara's outdated navbars/buttons being converted into images, especially now we have 'fit to width'.

LINK

---

As you say Egg, snap.

When I "corrected" the other one, I kept finding twitches of things not quite right so I decided to build a simpler one the way i would consider sensible.

The lack of groups being turning into images is second nature for me now.
I do commend your Diamond. Rather than Skew the box I would create a square, turn 45deg and then just flatten.

Acorn

Quote:

---

I do commend your Diamond. Rather than Skew the box I would create a square, turn 45deg and then just flatten.

---

That's exactly what I did Acorn ??

Quote:

---

Originally Posted by Egg Bramhill

That's exactly what I did Acorn ??

---

Egg,

The About Diamond is angled @ 13.679deg.
The rest are all different @ 7.766deg, @ 9.801deg, @ 11.811deg, @ 12.138deg & @ 14.34deg.

Set them all to 0deg and you have skewed boxes.

Skew is hard to control whereas rotate and squash is easy to replicate and describe.

Acorn

Quote:

---

... whereas rotate and squash is easy to replicate and describe.

---

Rotate & Squash is how I did it Acorn. Can you try doing the same and note the rotate angle changes from 45 downwards?

Quote:

---

Originally Posted by Egg Bramhill

Rotate & Squash is how I did it Acorn. Can you try doing the same and note the rotate angle changes from 45 downwards?

---

Egg, all my bad.

When I squashed, the angle stayed at 45 degrees - until I released the mouse as evidenced by your video.
I was not looking at that point as almost everything else in Xara changes on the fly.

Acorn

I didn't see these rotations until you pointed them out. I wasn't rotating them at all as you can see. Is this just another bug in Xara's new rotation feature?

Quote:

---

Originally Posted by Acorn

A number of people get confused when creating a NavBar with rollover effects.

Here is a simple demonstrator: :pointAttachment 127951

Try creating a Yellow button that matches the red one with its sub-menu.

This approach allows you to be highly creative but you need to master the fundamentals:

1. A button shape on MouseOff.
2. A collection of shapes in a new Layer.
3. The button has a Web Animation effect to the Layer.
4. The button needs to have a fully connected area with the pop-up objects so use a Transparent undershape on the Layer.

Acorn

---

HI Acorn.

To add labels to the buttons - just make visible and add text? No grouping?

Quote:

---

Originally Posted by letsgofishing

HI Acorn.
To add labels to the buttons - just make visible and add text? No grouping?

---

LGF

There are two answers to your question. Yes and No.

As the objects are all on different Layers, a (Hard-)Group is not possible as everything gets flattened onto one layer.

1. If you are moving the button about then you should Soft-Group with its partnering objects on the pop-up layer for that button.
2. For the button pop-up layer object, you can Hard-Group them but you need to add a special Name of htmltext. I prefer Soft-Grouping but editing is a little harder as there is no Edit Inside option.
3. If you are comfortable with the potential accidental displacement that might happen, you do not have to group anything just Preview and check, check, check.

Acorn

P.S. As you can add anything to a pop-up layer, you are not constrained by boxes and text. Things could be icons, pictures, placeholders, ...

Many thanks for reply Acorn - much appreciated as usual.