How do I make drop-down menus?

Forum Moderators: open

Message Too Old, No Replies

How do I make drop-down menus?

Dropdown menus

one_mind

2:34 pm on Jul 3, 2006 (gmt 0)

Hi,

I would like some menus that drop down when the mouse goes over them. How are they done?

Is it possible to do them without flash ect?

I was hoping just html and css could do it?

Javascript as a last resort.

Any tips would be great.

Thanks

tedster

4:50 pm on Jul 3, 2006 (gmt 0)

HTML with css is part of it -- but these menus use javascript to switch the visibility of the informtion that drops down. Combining javascript and css is informally called dHTML. The menu's links don't need to be javascript, and if you choose wisely they won't be.

Check out this thread for one approach, and to get a deeper idea of how this kind of menu works:
[webmasterworld.com...]

CritterNYC

4:54 pm on Jul 4, 2006 (gmt 0)

One word: SuckerFish.
[htmldog.com...]

mike1256

7:30 pm on Jul 4, 2006 (gmt 0)

it's real easy to do in frontpage 2003 using layers, it just takes a minute once you see how its done. If anyone wants the instructions i will post on my website. I just want to know if anyone is interested before i go to all the work of posting it.

gstewart

9:41 pm on Jul 4, 2006 (gmt 0)

It would be good to see your method, mike 1256

mike1256

9:56 pm on Jul 4, 2006 (gmt 0)

OK give me some time, i'll try to get it done today, can i post a url to the page i put it on without violating forum rules

Robin_reala

10:42 pm on Jul 4, 2006 (gmt 0)

Be warned - if done inappropriately dropdown menus can cause severe accessibility and SEO repercussions. Actually, if done at all dropdown menus can cause accessibility issues, but hey :)

mike1256

11:50 pm on Jul 4, 2006 (gmt 0)

You are absolutely right, the frontpage way is NOT SEO friendly at all and only works on a server with frontpage extentions installed.

tedster

4:25 am on Jul 5, 2006 (gmt 0)

Please note, the Forum Charter [webmasterworld.com] does not allow links except to authority news or technical information sites. Sorry, Mike, if you went to a lot of trouble.

You are welcome to share the instructions here in the thread.

mike1256

4:56 am on Jul 5, 2006 (gmt 0)

I was afraid of that. Sorry I broke the rules, I went out of my way not to promote my site.
Anyway, i hope this isn't to long. I've never seen this in a book or online anywhere, but it really works. Its OK to email me with questions

Once you make a few menu's you will see how customizable this is. you will need to experiment with it bit. You can even make sub menu sliders it you want. This only works in FrontPage and these instructions apply to FP2003. It looks like a lot of steps, but once you've done it a few times and understand what's happening it will take only minutes to set up. This also works in toolbars, shared borders and include files.

so here's the instructions.

open up your webpage
type the word "menu", put it in a font tag, not a <P> tag
On the top toolbar
click on INSERT/LAYER, a layer appears on the page
click on FORMAT/LAYER, the layer pane appears
now highlight the word "menu", your going to set up the action that makes the layer appear and disappear
click on behavior at the bottom of layers pane (or from the dropdown on the layers pane)
click INSERT/CHANGE PROPERTY/SELECT ELEMENT (div, layer 1 should be active)
click VISIBILITY
click VISIBLE/OK/RESTORE ON MOUSE OUT EVENT/OK

On the behaviors pane you should have

OnMouseOut Change Property Restore
OnMouseOver Change Property

now you need to set up the layer

click on the layer to select it, the drag handles should appear.
click on the layers link at the bottom of the behaviors pane
click on Borders and Shadings
click on the shading tab
click on Background and pick a color
click OK
In the layer type; Link 1 then press enter, Link2 then press enter, Link3 then press enter
Pick what ever font style and color you want for the links, just make sure you set each link separately.
My layer had a blue background so I went with bold white text.

Now to select the behaviors for the layer;

click on INSERT/CHANGE PROPERTY/SELECT ELEMENT (div, layer 1 should be active)
click on VISIBILITY, VISIBLE/OK/OK (FP tries to make decisions for you and here it will probably make a wrong one. change it event to OnMouseOver)
Do Not select Restore On Mouse Out
Make sure the layer is still selected
Click on INSERT/CHANGE PROPERTY/SELECT ELEMENT (div, layer 1 should be active)
Click VISIBILITY/HIDDEN/OK/OK (do not select restore on mouse out) Make sure your event is OnMouseOut

OnMouseOut Change Property
OnMouseOver Change Property

Go to preview mode and test the mouse over. The layer should appear when your hover the mouse over the word menu and the layer
should disappear when you move the mouse off the word.
If it doesn't go back to design mode, in the layer pane make sure the little eye to the left of the layer is closed and try again.

Now to make the links and mouse over in the layer.

select the layer ( make sure you have drag handles)
drag the mouse over link1 to make the On Hover color.
On the behaviors pane go to INSERT/CHANGE PROPERTY/CURRENT ELEMENT
element type will be font (or a similar font tag like <B> ) element will be no ID, one will be generated
Click on Borders, under style select one, under the shading tab background/color/select color, I chose red then OK/OK
If it created the wrong event change it manually to OnMouseOver.
Then INSERT/CHANGE PROPERTY/CURRENT ELEMENT (type will be font and element ID will be ID1)
Click on BORDERS, under STYLE select NONE, under SHADING/BACKGROUND COLOR/ select blue (if that was the original background color) /OK/OK
Make sure it created an OnMouseOut event, if not, change it manually
On the behaviors pane click INSERT/GO TO URL/ ENTER THE URL and make sure the event is OnClick.
Repeat for Link2 and Link3

You should have these events when your done.
OnClick Goto URL
OnMouseOut Change Restore
OnMouseOver Change Property

When your done make sure you place the layer over the word menu, set the eye in the layers pane to closed and set positioning to absolute positioning.

I may have missed a step in typing this out, but it works and its highly customizable. You can even nest layers and menus.

misteroriginal

5:27 am on Jul 5, 2006 (gmt 0)

I have FrontPage but never used it because supposedly it creates crazy code. At least that is what I heard years ago. Is this still true?

It looks like SuckerFish is about the best, most efficient, and relatively simple way to do it. Yes? No?

tedster

6:10 am on Jul 5, 2006 (gmt 0)

If you understand what valid html is all about, I undestand you can use recent versions of FrontPage and create decent mark-up. I know several professionals who do (but I don;t use any WYSIWG Editor -- long, off topic story)

Mike, can you tell us how the code created with your approach stacks up cross browser and with W3C validation?

CritterNYC

2:10 pm on Jul 5, 2006 (gmt 0)

It looks like SuckerFish is about the best, most efficient, and relatively simple way to do it. Yes? No?

Yeah, I've used it more than once. As have friends. It's solidly cross-browser and platform. And is pure CSS except for the few lines of Javascript necessary to get that clunky Internet Explorer working right. It's also all valid code and degrades well, so it won't mess with your SEO or cause accessibility issues as long as you have sub-pages for each section with links.

mike1256

6:25 pm on Jul 5, 2006 (gmt 0)

I tested it in Netscape, IE, Firefox and Opera and they work without any problems. As for W3C it chokes on OnClick, OnMouseOut and OnMouseOver and the reason is that they are proprietary tags, which they are because they are inside of a frontpage bot. I remember when FP bots first came on the scene and how worried everyone was about them. I have never seen any problems from them. SE's just ignore them. W3C doesn't say they are wrong, just that they are proprietary. This was just offered as an option anyway. Many people already work in FP and don't even know about this. For them this is a good thing. For purests (and I remember making sites in notepad) FP code has always been a problem, but it puts in a lot less junk them it used too and auto generated code save a lot of time. I always edit FP code anyways

This is the code in the <head> tag
<script language="JavaScript">
<!--
function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o";
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}

function FP_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i];
if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; }
}

function FP_goToURL(url) {//v1.0
window.location=url;
}
// -->
</script>

and this is the code on the page