Drop-down menus

[Ken Anderson]

Per suggestions and comments from many helpful folks, I've continued to refine my tiered menu example system. It's attached to this post. I hope it will be useful to others who are trying to get their arms around the creation of similar menus. As was pointed out several times, it's simpler than it looks. It's understanding, rather than doing, that is the challenge.

My menu example now has four buttons; the first two (from left) bring up groups of more buttons, which in turn bring up even more buttons. As was pointed out to me, this can get really messy as your number of top menu and sub menu options increases, as every button requires its own layer.

The third and fourth buttons are linked to much simpler pop-up layers which contain single text boxes ... these can contain any number of links to sub-pages within the site, to external URLs, or to additional layers. This appears to be far easier to manage. None of these links are "live" in my attached example system.

I'm working on a live site which will employ some tiered menus; it'll be a small site at first, but the objective is to create a structure which will allow easy expansion (more products and services) in the future. I'll post a link when the site is up and running ... target date is mid-July.

Thanks again for all the helpful feedback!

[cursor]

Helpful stuff. Thanks Ken.

[Siggi]

Hi - yet another question on drop-down menus from a new member. I have read loads and loads of appends and discussion about this topic and I like a lot of people am struggling with this facility.

I have a simple question -
Can you create drop down menus using the buttons in the gallery provided in XWD? All of the samples I have seen (so far) are created from home grown or manually created buttons.
As an aside, it’s amazing that Menu Maker and Webstyle4 create multi-level buttons / menus which can be used in Dreamweaver and other web design programs and not XWD (without a lot of messing about).
Siggi

[Soquili]

Hi Siggi,

You can use Menu Maker and/or Webstyle created navigation bars very easily in Web Designer.

Simply follow the instructions from the Xara support site:
http://support.xara.com/index.php?_m...articleid=2741

Menu Maker and Webstyle do come with an extension for Front Page and Dreamweaver (CS3 and older).

Create your web page in Web Designer and export to a folder on your hard drive.

In Menu Maker or Webstyle, create your navbar the same as you would for Front Page or Dreamweaver, be sure to save your work. Move your image files and javascript to your Web Designer's Index_HTML_files folder. Copy the single line from the sample html file created for you in Menu Maker or Webstyle and paste it into the Replace with html box for you place holder in Web Designer.

[Siggi]

Hi Soquili and thanks for the quick reply, I'll have a go at making the drop-down menu in Menu Maker and see how I get on. I’ve seen some examples in other appends on what to copy to XWD so I should be OK – I think.

But out of interest, do you know if you can create drop down menus using the buttons in the gallery provided in XWD? All of the samples I have seen (so far) are created from home grown or manually created buttons.

Siggi

[Soquili]

You can use the buttons from the Gallery.

Most members prefer to use their own creations. Until Web Designer came along all (or most) members here were graphic artists (professional or hobbiest).

[Siggi]

Hi Soquili

This is what Xara sent me on how to create drop down menus using the buttons from the Gallery.

And it actually works !!

You can do this by following these steps:-

1 - Drag the button from the designs gallery to the page.

2 - Create a new layer from within the layer gallery.

3 - Make a copy of the button.

4 - Ungroup the button and then move the top text object and the top most rectangle object.

5 - Delete the extra objects on the mouseover layer (They will be in the same place as the second button)

6 - Now group the text object and rectangle together to make a button again.

7 - Cut the button off of the current layer.

8 - Within the Layer gallery click on the Layer 3 layer to ensure that you are editing it .

9 - Paste the button that you cut onto the screen and position it correctly.

10 - Right click on the original button that you dragged onto the screen and select Web Properties > Mouse over tab.

11 - Click on the option that states "Show Pop Up Layer" and choose layer3

When previewing the page mousing over the button should display the drop down part of the menu.

Thanks to Xara and Soquili for all the info