Navigation Bar Enhancement

[StevenWWinters]

It would be handy to be able to move items to and from the button level to the menu level in the Navigation Bar Properties dialog. This would eliminate the need to delete them and manually type them back in for flyout level menus using the method Gary describes in his tutorial here:

http://www.xaraxone.com/webxealot/wo...orkbook_1.html

[gwpriester]

I think the Navigation Tool is pretty OK but there is definitely room for improvement.

[StevenWWinters]

...there is definitely room for improvement.

I only learned to use it (via your tutorial, thank you very much!) to teach someone else how to use it whom I had encouraged to purchase the program for a website they wanted to build. Since they had no experience with HTML, I assumed it would be a quicker learn for them. I generally code my own pages since it is hard to give up ultimate control and necessary for dynamic sites anyway. The request I made above was an obvious one from the short time I spent using it.

At any rate, what would you improve about it seeing that you have likely spent more time with it?

[wuerthne]

Thanks, moving buttons to menu level (and maybe back) is an interesting idea. To be honest, it had never occurred to me before, but then I had not been aware of Gary's tutorial until now. Maybe developers should be made to watch the tutorials for their features. ;-)

I can see that as a site evolves, it can make a lot of sense to replace a range a top-level buttons by a single "category" button with a dynamic menu (and maybe back, though that direction is probably less frequent), in fact, it would be useful to be able to do that at any level of the menu hierarchy. I suppose we could have a "Demote" feature that moves the selected item (be it a button or a menu item) to the menu of the item immediately above it. Then, you could create the category button first before the range of buttons it is meant to represent and go through the following buttons clicking on "Demote" to move them to the category button's menu.

It would be clearer if you could select a range of buttons and then click on "Demote" to replace them by a button with a menu, but at least at the moment, you cannot select more than one item in the dialogue.

[StevenWWinters]

I can see that as a site evolves, it can make a lot of sense to replace a range a top-level buttons by a single "category" button with a dynamic menu (and maybe back, though that direction is probably less frequent), in fact, it would be useful to be able to do that at any level of the menu hierarchy. I suppose we could have a "Demote" feature that moves the selected item (be it a button or a menu item) to the menu of the item immediately above it.

Yes, precisely. I'm not sure why you couldn't just drag and drop like you presently do within the button or menu tree.

The navbar creation process is a bit unintuitive relative to Xara's tradition of working visually and avoiding dialog boxes. But to be fair, I'm not sure how it could be done better. Grasping the concept of using layers that XWD uses for menus and mouse-overs takes a little focus and concentration. My friend had trouble getting the concepts down from the tutorial and I even had to work though it a couple of times to get the NavBar dialog to be enabled.

Anyway, here's a set of bare bones instructions I sent my friend based on Gary's excellent tutorial. Practicing with this script several times helps get it down.

1. Create rectangle for button and set colors. (Working on the MouseOff layer).
2. Create text for button and set colors.
3. Use text tool to center justify the text.
4. Select both rectangle and text and align centered with the alignment tool.
5. Group both objects (NOT soft group) using the group tool on the Arrange Toolbar at the bottom.
6. Position the grouped button where you want it.
7. Copy the grouped button to the clipboard.
8. On Page & Layer Gallery, unhide the MouseOver layer and select (click on) it.
9. Paste in place, from the Edit menu.
10. Hide the MouseOff layer.
11. CTRL + Click on the button rectangle and set color (Working on the MouseOver layer).
12. CTRL + Click on the button text and set color.
13. Unhide MouseOff layer. (Both layers must be visible,unhidden, to be able to select both buttons in the next step.)
14. Drag selection rectangle around the buttons. Note: when objects are selected, there is a status line at the lower left that tells you what is selected. For this step, it should say "2 groups on 2 layers".
15. Apply Soft Group, from Arrange menu. Status line will change to "2 groups (Soft Group) on 2 layers:"
16. Select button and click the Navigation Bar tool from the Web toolbar at the top and create the NavBar. Click ok, when done.
17. Hide MouseOver layer.
18. Reposition NavBar as desired...