Leaving XWD Because of Immense Frustration

[cursor]

PART 1
the .web file is attached to post #10

In this navbar tutorial there will be eight menu items, or buttons. We'll number the buttons 1 through 8, for simplicity. While buttons 1, 3, 4, 5 and 7 will have dropdown menus, buttons 2, 6 and 8 will not.

Each menu choice has a mouse-off (static/dormant) state and a mouse-over (highlight) state. The mouse-off state is what is what the user sees when the mouse cursor is not over the button. The mouse-over state is the highlighted state that the user sees when the mouse cursor is anywhereon the button.

In this primer, the mouse-off state and the mouse-over state each have a rectangle and a text string which are grouped togther.

For all buttons without dropdown menus, the mouse-off group will be placed on the MouseOff layer. The mouse-over group will be placed on the MouseOver layer.

For all buttons with dropdown menus, popup layers must be created and properly used. Additionally, each popup layer will have its own mouse-over layer.

Start by creating a set of new layers in the Layer Gallery. And for proper rollover effects, they will need to be ordered properly from bottom to top.

mouseOver_btn7
btn7
mouseOver_btn5
btn5
mouseOver_btn4
btn4
mouseOver_btn3
btn3
mouseOver_btn1
btn1
MouseOver
MouseOff

As was mentioned above, a pair of layers are required for each button that has a dropdown menu. Additional layers are not needed for buttons that have no dropdown menus. For this reason, you see no special layers for buttons 2, 6 or 8.

Note that for each popup layer (btn1, btn3, btn4, btn5 and btn7) there is a corresponding mouse-over layer directly above. The rollover layer name [i]absolutely must[i] have "mouseover" as its first eight letters (not case-sensitive).

Make the first button

• Make the MouseOff layer the current layer.
• Create a black rectangle (50x22) with no border.
• Add center-justified, 13pix, white text.
• Center the two items within selection bounds (use Ctrl+Shift+L).
• Group together (Ctrl+G) the rectangle and the white text.
• Clone the group (Ctrl+K).
• Using the Layer Gallery, make the MouseOver layer the current layer.
• With the cloned group selected, move it to the MouseOver layer by clicking the Move button at the top of the Layer Gallery.
• Hit ESC to deselect the group.
• Ctrl+click on the the rectangle portion of the button (not the text). The status line will read, "1 rectangle 'inside' on layer MouseOver".
• Right-mouse-click on any color (on the color bar) that you want to use for your mouse-over highlight, then select "Set fill color".
• With the first set of mouse-off and mouse-over button elements created and on proper layers, let's apply a soft-group. Marquee-select both objects. The status bar at the bottom left of your Web Designer window should read, "2 groups on 2 layers".
• Do an Arrange > Apply Soft Group. The status bar should read, "2 groups (Soft Group) on 2 layers".
• Right-mouse-click on the soft grouped button and open Web Properties. Click on the Link tab. In the Link to Web address field, type # (Shift+3). Click the Apply button. This applies a temporary link that will allow these soft-grouped elements to behave like a button. Leave the Web Properties dialog open.
• Test the button function by clicking the Preview button. Moving your mouse cursor across the button should stimulate the group on the MouseOver layer.

Duplicate the buttons

Now that we have a single, working button, we can move forward. Doing this first means that we don't have to run through this process for each and every button. (What a nightmare THAT would be ...)

Make sure that your button is where you want your first button to be on the web page. On the info bar, check the Position XY values. It's not a bad idea to edit those values so that they are integers.

Make sure that both the MouseOff and MouseOver layers are both visible and unlocked in the Layer Gallery.

Create your second button by selecting your button (soft-grouped) and typing Ctrl+K (this will make a clone of your button, in exactly the same position, and with its elements on precisely the same layers.) Shift the button to the right by holding down the Ctrl key and hitting the right arrow key 11 times (that's 55 pixels).

Marquee-select the two buttons, then hit Ctrl+K to create additional copies. Shift the buttons to the right by holding down the Ctrl key and hitting the right arrow key 22 times.

Do the same to create and position the last four buttons.

Edit the text string of each button. Note that because the buttons are soft-grouped, changing the text value on either layer will automatically change the text string on the other layer.

[cursor]

PART 2
the .web file is attached to post #10

Create Popup Menu Items
With the Snap to objects mode active, create duplicates of each button and position them as needed. You can do this by right-mouse dragging the original buttons (this is a cloning shortcut). Move your cursor to the upper-left corner of the button, click & drag to the lower-left corner of the same button. This will snap exactly on the corner. To verify, you can check the Position XY values on the infobar.

• For button 1, add three buttons.
• For button 3, add two buttons.
• For button 4, add four buttons.
• For button 5, add three buttons.
• For button 7, add two buttons.

Edit all drop-down button labels as 1a, 1b, 1c, etc. Remember that because the buttons are soft-grouped, changing the text value on either layer will automatically change the text string on the other layer.

Moving Groups To Popup Layers
(and their companion rollover layers)

With all layers unlocked and visible, marquee-select all buttons. Do an Arrange > Remove Soft Group. This is so that we can conveniently access the groups on different layers, to reposition them onto their popup layers. We'll soft-group them again later.

OK ... here's the fun stuff.

Top Level Buttons

Since buttons 2, 6 and 8 don't have drop-down menus, we can leave them alone. For the other top-level buttons (1, 3, 4, 5 and 7), you'll need to follow these steps:

• Move the MouseOver group to its popup layer. For button 1, that would mean that the colored rectangle that's grouped with its white text moves to the btn1 layer.
• Leave the MouseOff group (the black rectangle that's grouped with its white text) where it is, but add a trigger to stimulate its popup layer.

Drop-down Buttons

Follow these steps to properly place the drop-down button groups on layers:

• Move the MouseOver group to its mouseover-popup layer. For buttons 1a 1b and 1c that would mean that the colored rectangle that's grouped with its white text moves to the mouseOver_btn1 layer.
• Move the MouseOff group to its popup layer. For buttons 1a 1b and 1c that would mean that the black rectangle that's grouped with its white text moves to the btn1 layer.

Making Adjustments To Button 1
(and its drop-down buttons)

Let's go ahead and move the groups for the button 1 family:

• Make the MouseOver layer selectable and visible. Lock all other layers and make them invisible.
• Select colored button 1. The status line should read, "1 group on layer MouseOver". Activate the popup layer that you created called btn1, then click on the Move button at the top of the gallery. The colored button object will immediately disappear, since it has been moved to an invisible layer.
• Marquee-select colored buttons 1a, 1b and 1c. The status line should read, "3 groups on layer MouseOver". Activate the popup layer that you created called mouseOver_btn1, then click on the Move button at the top of the gallery. The three buttons will immediately disappear, since they have been moved to an invisible layer.
• Make the MouseOff layer selectable and visible. Lock all other layers and make them invisible.
• Marquee-select black buttons 1a, 1b and 1c. The status line should read, "3 groups on layer MouseOff". Activate the popup layer that you created called btn1, then click on the Move button at the top of the gallery. The three buttons will immediately disappear, since they have been moved to an invisible layer.
• Select the black button 1. The status line should read, "1 group on layer MouseOff". Stimulate the popup layer with Web Properties > Mouse-over (tab) > Show popup layer [ btn1 ]

Test button 1 and it's drop-down by clicking on the Preview button.

[cursor]

PART 3
the .web file is attached to post #10

Processing Buttons 3, 4, 5 and 7
(and their drop-down buttons)

Instead of handing one button at a time, let's look at a more efficient process:

• Move the colored buttons
  • Set MouseOver as selectable/visible.
    Set all others as locked/invisible.
  • Select colored button 3.
    Click btn3 in the Layer Gallery.
    Click the Move button.
  • Select colored button 4.
    Click btn4 in the Layer Gallery.
    Click the Move button.
  • Select colored button 5.
    Click btn5 in the Layer Gallery.
    Click the Move button.
  • Select blue button 7.
    Click btn7 in the Layer Gallery.
  • Marquee-select colored buttons 3a and 3b.
    Click mouseOver_btn3 in the Layer Gallery.
    Click the Move button.
  • Marquee-select colored buttons 4a 4b 4c and 4d.
    Click mouseOver_btn4 in the Layer Gallery.
    Click the Move button.
  • Marquee-select colored buttons 5a 5b and 5c.
    Click mouseOver_btn5 in the Layer Gallery.
    Click the Move button.
  • Marquee-select colored buttons 71 and 7b.
    Click mouseOver_btn7 in the Layer Gallery.
    Click the Move button.
  
  Move the black buttons
  • Set MouseOff as selectable/visible.
    Set all others as locked/invisible.
  • Select black button 3.
  • Web Properties > Mouse-over (tab) > Show popup layer [ btn3 ] (click Apply)
  • Select black button 4.
  • Web Properties > Mouse-over (tab) > Show popup layer [ btn4 ] (click Apply)
  • Select black button 5.
  • Web Properties > Mouse-over (tab) > Show popup layer [ btn5 ] (click Apply)
  • Select black button 7.
  • Web Properties > Mouse-over (tab) > Show popup layer [ btn7 ] (click Apply)

Test the entire menu system by clicking the Preview button.

You can create duplicate web pages, with navigation intact, with the Edit > Pages > Duplicate current page. Once you have your pages created, don't forget to replace the temporary # link with an appropriate Web Properties > Link (tab) > Link to page [ page name ].

Note that there isn't any soft-grouping right now, yet the menu system works just fine. If you want to be able to edit a text string on one layer, and have the other layer automatically change, then you'll want to go back and soft-group your buttons. Soft-grouping also comes in handy when moving your buttons around and keeping all of its elements together and in alignment.

All in all, once the basics sink in, buttons and menus are not difficult to construct. Making the sample .web file took me about 20 minutes. It did, though, require a learning curve.

Perhaps someone can put present this proceedure as video tutorial. (Slavelle does a great job!)

[cursor]

Certainly, if errors are found in the proceedure above, let me know and I'm sure they can be corrected.

Good luck all.

[steve.ledger]

Curtis you have gone to a lot of effort in the above three posts.
May I suggest that you create a single PDF for members to download (via a link in your signature)?

[cursor]

Good idea, Steve. Until I do the PDF file, I'll put a link in my signature to the opening post of the tutorial.

[mstam1616]

Maybe it is just as easy, could you add just 1 move level to one of the 2nd tiers, to make it three?

[cursor]

Things get just a little bit more complicated when a third level is added. To illustrate how this is done however, I have added a 3rd level to just one of the 2nd tier buttons (4c). Horizontally, I kept it in line with button 5, for asthetics. You'll note that there is no interruption in flow as you move your mouse cursor from button 4c to 4c¹. This is because I've added a 99% transparent rectangle between the two.

This is how it's done:

• Create a new layer called btn4c and position it at the top of the [b]Layer Gallery[/url].
• Create its complementary rollover layer called mouseOver_btn4c, making sure that is stacked immediately on top of btn4c.
• Create the first button on this 3rd tier fly-out menu by marquee-selecting around button 4d ... making sure that its two layers (btn4 and mouseOver_btn4) are both visible and selectable. The status line should read "2 groups on 2 layers" (provided you haven't yet re-soft-grouped your buttons yet). Create a clone (Ctrl+K).
• Position the button's two groups by tapping holding down the Ctrl key, then tapping the right arrow key 11 times (55 pixels).
• Change the text for both groups (on 2 layers) to "4c¹" (or whatever you want).
• Marquee-select both groups and Arrange > Apply Soft Group.
• Duplicate the new button and attach the copy to the bottom and in line with the first button. Change it's text to "4c²" (or whatever you like). Remember that at this point your buttons are soft-grouped. This requires that you only change one of the two text elements, and the other will be changed automatically.
• Create a third button by repeating the same steps.
• Once your three buttons are created, do an Arrange > Remove Soft Group. This makes it much easier to move the groups to their new layers.
  
  Move the gouped objects to their new layers
  
• Make mouseOver_btn4c selectable/visible.
  Make all other layers locked/invisible.
• Select the three colored buttons (4c¹ 4c² and 4c³). The status line should read, "3 groups on layer mouseOver_btn4".
• Select the mouseOver_btn4c layer in the Layer Gallery, then hit the Move button at the top of the gallery.
• Make btn4 selectable/visible.
  Make all other layers locked/invisible.
• Select the three black buttons (4c¹ 4c² and 4c³). The status line should read, "3 groups on layer btn4".
• Select the btn4c layer in the Layer Gallery, then hit the Move button at the top of the gallery.
• Make mouseOver_btn4 selectable/visible.
  Make that all other layers locked/invisible.
• Select colored button 4c. the status line should read, "1 group on layer mouseOver_btn4".
• Select the btn4c layer in the Layer Gallery, then hit the Move button at the top of the gallery.
  
  Assign a popup trigger
• Make btn4 selectable/visible.
  Make that all other layers locked/invisible.
• Select black button 4c, and apply popup trigger:
  Web Properties > Mouse-over (tab) > Show popup layer [ btn4c ].
  
  And lastly ...
• Add the 99% transparent bridging rectangle on btn4c and position it between buttons 4c and 4c¹.

I don't think I left anything out. If I did, please advise. Thanks.

[pauland]

I would basically take two things from this:

1) Do you really need such cumbersome menus in the first place? They are pretty much out of fashion for web navigation.

2) If you do, then perhaps XWD 1.0 isn't the right tool for the job.

[This isn't a criticism of Curtis, or the tutorial]

[Rhanna]

I would agree with Paul.
Why the need for such a complex drop menu? I use an Index page like in a book with any number of buttons to select links to other pages and articles.

The above comment is in no way meant to detract from the tute by Curtis. I want to compliment Curtis on his work and effort put into the tutorial.
Great job!
Rupert