drop down menus

[Sheila]

I logged in on the Forum regarding drop down menu and read several of the threads - unfortunately like many others I don't understand how to do this. I started watching one video that was referred online but it had a runtime error and terminates each time.

Could you please refer me to a site or explain the procedures step by step how to do this? The video that shows on YouTube is hard to understand and is very fast and the information I was reading seems very complicated. I do have Webstyle 4and I couldn't figure out how to use that for the menus in XWD.

Thank you,
Sheila

[razzle0146]

Sheila,

This topic has been discussed several times.. Do a search for NavBars and you will get all the info you need, but here is a starter for you.

Look at post #3 and others...

Hope this helps you and if not, I will make you a navbar to your specs if you want..

[razzle0146]

Shelia,

Not sure if you found the help you needed or not so I went ahead and wrote up a little help file for you... I write this at work out of memory, so hopefully it is all correct and if its not I'm sure someone will comment on it.. Anyway here it is....

(First thing to note and never forget is, XWD has reserved names built into its program.)
The reserved names that you want to remember for this tutorial are as follows:
MouseOff, MouseOver, and MouseDown. These are the reserved names that
we will be using. Remebr that these cannot be altered!!)


The Basics:
• First start a new blank web project.
• Second note that there are two layers in the Layers Gallery and they are MouseOff and MouseOver. These are two reserved names built into XWD.
• Third, we are going to use a button from the Designs Gallery. Open up the Designs Gallery and drag a button onto the canvas. Right click on the button and go to web properties. In the web properties address bar type in #.

The First Popup Layers:
• In the Layer Gallery create a new layer called popup1. Then create another layer called MouseOver popup1. Notice that MouseOver has a space before popup1. This is because MouseOver is a reserved name in XWD with built in properties and can’t be changed. If you made the layer without the space, then the MouseOver effect would not work. Now create another layer called MouseDown poup1. Notice the space in this layer name also. MouseDown is a reserved name in XWD and has built in properties also. Note that the MouseDown layer is optional and not required to make a NavBar, but is recommended to have a fully functional NavBar.
• Brief explanation of these layers. The initial button is what the user sees when on your page. It takes no interaction from the user to see the button. Popup1 layer is used to start the NavBar process. Anything that we put on this layer will be shown when the user hovers the mouse over the initial button or any other button that we specify. MouseOver popup1 layer is used to display the MouseOver effect when the user hovers over the button that is on the popup layer and MouseDown layer will show the user the MouseDown effect when the user clicks a button on the popup1 layer.
• Now that we have our layers setup for the first dropdown, we can go ahead with the next step.

Getting the layers to interact with one another:
• Make sure that no other layers but the MouseOff are visible by unchecking the first checkbox next to each layer in the layers gallery.
• Right click on your button, select web properties, go to the MouseOver tab and in the last dropdown box, select popup1 and click apply.
• Now check the first box next to popup1 and make sure that the name popup1 is selected.
• Now open up your designs gallery and drag a button onto the canvas, which is actually the popup1 layer. After the button is in place, uncheck the first box next to popup1 layer. The button you just placed onto the canvas should disappear. If for some reason it did not disappear, right click on it and select cut. On the Edit menu at the top, select paste in place. Now try checking and unchecking the check box to see it appear and disappear. This is how the action will work when the user places the mouse over the initial button. When the user enters your page they will see the initial button and the rest of the layers are invisible, but as soon as they place the mouse over the button, we have set the properties to show layer popup1. See how easy that was??? Go ahead and preview the project so you can see how it is working so far. Did the popup1 layer appear and disappear? If so then continue…

[razzle0146]

• Ok the popup1 button appears like it should but when I hover over it there is no effect letting me know which button I am on. That’s where the MouseOver popup1 layer comes into play. Right click on your popup1 button, select copy, then make sure that MouseOver popup1 layer is checked and the name is highlighted, that way we know we are on the correct layer. Now on the Edit menu select paste in place. Now you should have an exact copy of the button on top of each other. Uncheck the first box on all of the layers except the MouseOver popup1 layer. Now click on your button, then click on the shadow tool. Select to shadow all of the outside of the button and make it a color that is recognizable. Now preview your project. You should see a regular button and when you place your mouse over the button, your popup1 button should appear and when you place your mouse over the popup1 button, you should see our new button with the shadow color you just chose. See, now it was really easy and you almost have it complete in just a few minutes. Now we have only one layer left to setup. When the user clicks down on the popup1 button, we want to show them that they are selecting the button, so uncheck all the first checkboxes except for the MouseOver and MouseDown layers. Make sure the MouseOver is highlighted, then right click on that button and select copy, now highlight the MouseDown layer and on the Edit menu select paste in place. Now adjust the shadow or whetever other color you want it to be then preview your menu. You now have a button that displays popup1 and on popup1 when the user places mouse over it the button turns into a different button and if the user clicks on that button another button is displayed while the mouse button is down.
• To go ahead and create the entire NavBar just place whatever buttons you want on popup1, MouseOver popup1 and MouseDown popup1 and for any other popups you want, just change the names to popup2, MouseOver popup2 and MouseOver popup2, popup3 etc…..
• Add your text to your button, set your properties up and your set…
• Following these steps will give you a nice looking and functioning NavBar, just remember to set your web properties for each button so it will actually be functional. I am sure you already know how to set properties.
• The main thing to remember is that XWD has the names MouseOff, MouseOver and MouseDown reserved and also watch very closely and make sure that you put each button on the correct layer, otherwise your NavBar will not function properly…. Don’t get discouraged…. This is really an easy concept, even though it seems difficult at first. Once you get the hang of it, you will sit back and say…Wow, that really is easy…

Hope this helps anyone that wants to use it….
Happy NavBar creating……

[covoxer]

Some clarifications.

The reserved names that you want to remember for this tutorial are as follows:
MouseOff, MouseOver, and MouseDown.

MouseOff is not reserverd. This layer name means nothing to WD. It's just a marginally chosen name for a usual static layer that we have in our templates. It can be renamed to anything else.
Every name that starts with "MouseOver" or "MouseDown", with any number of leading spaces and case not sensitive, is a special layer name that identifies the Rollover layer.
For example: " mOuSeOveR 9934 x24" - is also a reserved name.

Then create another layer called MouseOver popup1. Notice that MouseOver has a space before popup1.

This space is not required. So that the "MouseOver_popup1", or even "mouseoverPOPUP1" are also legal names for the Rollover layers.

If you made the layer without the space, then the MouseOver effect would not work.

This is not true.

[Sheila]

Hi:

I was reading some of the NavBars and of course I'm still confused. I put some buttons under link which would be the four narbars I wanted to link to. What is the procedure for this? Once I get the conept I'll be okey to continue on.
Thanks,
Sheila

[razzle0146]

Sheila,

I ahve looked at your web file and it seems to be functioning fine. I'm not sure what your asking...

Thanks..

The only thing that needs to be done is your navbar needs to be made into a repeating object and placed onto all of the pages, that way when you change one link or anything else on it, the rest of the pages will update also.

I have changed it to a repeating object and reupped it for you..

[Sheila]

I wanted to have a drop down menu under LINKS, so when you click on LINKS you see GregoryProduct, David Gregory, American Behcets Disease and BusinessVideoLive indented - right now they are all individual buttons. I tried The Layer Gallery but was to confused

[razzle0146]

Create a layer called popup1 or whatever you want. Make sure MouseOff is checked, select the all the buttons that you want to popup, right click them, click cut, select the new layer and on the edit menu select paste in place, now check and uncheck the popup1 layer. The buttons should disappear then reappear everytime you check and uncheck. Now on your links button, right click and select web properties and then select the MouseOver tab and in the last drop down select popup1 or whatever name you gave the new layer. Now preview your project, your links buttons should be invisible until you place your mouse over the links button. After that you need to create another layer called MouseOver popup1 and place your MouseOver buttons on that layer.

Thats it...

[razzle0146]

Sheila,

Here is your menu.. Just look at it and you will see how it works...

Hope this helps you out..