Drop Down Menu's

**fc1** · 04 March 2009, 07:13 PM

I just bought and installed Web Designer. Wow. Even though my expectations were high, so far they have been exceeded. My only disappointment so far may well be my lack of knowledge (DUH), but I don't see navigation aids to create drop down menu's. Since this is such a fundamental part of the base website creation, I am a little surprised. Do I need to purchase Menu Maker separately? (I think I already have an older version somewhere). Are the two programs compatible? Am I just out-to-lunch? (hey, be nice).

**covoxer** · 04 March 2009, 07:22 PM

You can create menus in WD. Read this thread:
http://www.talkgraphics.com/showthread.php?t=36635
You can also use menus created with MenuMaker or Webstyle. Read this:
http://www.talkgraphics.com/showthread.php?t=36622

**Xhris** · 04 March 2009, 07:22 PM

Yes, making multi-level menus is going to have to be my next video...

**covoxer** · 04 March 2009, 07:30 PM

Originally Posted by Xhris

Yes, making multi-level menus is going to have to be my next video...

Would be great!

**Charles Moir** · 04 March 2009, 07:33 PM

Yes you're right that Web Designer provides no dead-easy way of creating drop-down menus like Xara Menu Maker does. And yes you can use Menu Maker buttons and menus using the placeholder feature of Web Designer. I think this has been documented on another thread.

Having said that it's not that difficult to create custom drop-down menus using the layer pop-up system. I hope this is documented soon as a step-by-step.

But in a nutshell, for those who like to experiment, you can do it this way;
• Create a new layer, let's call it Menu, that will have the drop-down menu on.
• Draw your menu, say a simple rounded rectangle background. Place a column of text links on this - one line for each link. Apply the links to the text items.
• Make your button object that triggers this pop-up layer on the base MouseOff layer. Create the pop-up effect of the menu layer in the Web Properties dialog, Mouse-over tab.

That's it for a *really* basic menu. Next step, to add some better highlighting is to create a new MouseOver layer on top of the menu layer, call the layer 'MouseOver menu'.

Draw a semi-transparent rectangle just big enough to cover each menu entry - i.e. a long thin rectangle. Colour it and make it transparent to you can see the text through it. Now replicate this small rectangle over each menu entry. This highlight rectangle is what will get displayed as you mouse over the menu entries.

The reason this works is because a) it's possible to have MouseOver layers on top of pop-up layers, and b) because the entries in your menu are links then it displays the covering rectangle from the 'Mouseover Menu' layer.

Try it - I'd be interested to see if people can get this to work (I have some sites that use this very successfully).

You can go even further and produce cascading, completely custom menu designs, with sub-menus, transparency, shadows and the lot. But that is for the more adventurous or advanced user.

**covoxer** · 04 March 2009, 07:38 PM

As an example of the nice, semitransparent multilevel menu you can take a look at this site:
http://xhris.digitalred.net/index.htm
It was created in WD.

**Charles Moir** · 04 March 2009, 08:05 PM

Chris's example is a great one showing 'full graphic' menus.

Attached is about as simple as it gets. 2 layers for all menus, with highlighting, shadow, semi-transparency. All the menu entries are HTML text links.

It's not perfect - only highlights if you roll over the actual menu text, and the links would usually be underlined (link underline has been turn off in this example).

What's worth noting is that this is an incredibly efficient menu method, with just a few tiny graphics files produced.

Oh, it's all soft grouped as well. Better to un-soft-group it if you want to examine how it's done.

**zaphodeist** · 04 March 2009, 09:09 PM

Gary's friend, Ima Guest, did a very good tutorial here

**Xhris** · 04 March 2009, 10:00 PM

Doh, a possible problem/bug with update repeating objects is going to delay a video...

**pbready** · 04 March 2009, 10:19 PM

Originally Posted by Charles Moir

Chris's example is a great one showing 'full graphic' menus.

Attached is about as simple as it gets. 2 layers for all menus, with highlighting, shadow, semi-transparency. All the menu entries are HTML text links.

It's not perfect - only highlights if you roll over the actual menu text, and the links would usually be underlined (link underline has been turn off in this example).

What's worth noting is that this is an incredibly efficient menu method, with just a few tiny graphics files produced.

Oh, it's all soft grouped as well. Better to un-soft-group it if you want to examine how it's done.

I'm obviously being extremely thick here, but I can't see how the various web links on the menu entries are entered/amended. I un-soft-grouped, made all layers visible and played around a bit to try and find out. It appears that the multi-lined text box with the menu entries is what triggers the external links (I tried moving all the other components out of the way), but can't see how/where to enter google.com etc even with having the web properties window open. It's probably too late to be trying to do this anyway - way past my bedtime now!

Thanks