Easy drop down menu?

[cath120]

I put together a few pages of a fledgling site in Dreamweaver MX, so have set out the overall design including the menu bar. But I would like to make the menu bar into a drop down menu. I thought this would be easy but after searching for hours on the net and finding various codes, it proved much more difficult and confusing than I could ever imagine. So if anybody could suggest anything in any format: HTML, CSS, Javascript, or even Flash (which I have some experience of) I would be extremely grateful?

Regards

Catherine

PS I would also like any info on how to customize a scroll bar?

[FC Jamison]

Is there such a thing as an easy drop down menu?

I have written a dropdown menu which I have attached to this post...

Simply modify array in the .js file to add/remove menu items.
The css file controls the look, and you can change the images for the menus from there.

The only note to keep in mind is that the css entry .topMenu { float: } is required for the menu to work. The javascript uses this entry to put the top menu buttons in the same order for both left and right float options.

If you have any questions, let me know.

As for modifying scrollbar colors, this is not possible under the xhtml DOCTYPE and only works in IE without a DOCTYPE.

[WaltP]

I used this to add to one of my pages -- very simple.

I added document.theForm.theMenu.selectedIndex = 0; after the window.open command to reset the selection.

[FC Jamison]

huh?

[WaltP]

huh?

Huh, what. can you be less vague? ;)

[FC Jamison]

Huh, what. can you be less vague? ;)

Well...I suppose I could have just put a question mark. :rolleyes:

I missed the link, so I had no clue what you were refering to.

Now that I actually clicked on it, I understand.

I'm not sure if this is the type of dropdown menu she was refering to, the one I posted isn't a form menu.

[cath120]

Hi Deacon J - Thank you very much for taking the trouble to respond ('but for the kindness of strangers' Blanche Dubois -Street car named desire). Your drop down menu really looks good. Your right in saying that WaltP's one isn't what I'm after, but thank you anyway WaltP).

Now I'm not sure if I'm capable of adapting this, so really appreciate your offer of additional help.

Would you be interested in a 'mentor' role, with remuneration of course?!

I might look at 'flash' alternatives first, as I have some experience with this, but if no go there, will return to trying to figure out your excellent drop down menu.

All the best - Catherine

[Mikeish]

Is there such a thing as an easy drop down menu?

I have written a dropdown menu which I have attached to this post...

Simply modify array in the .js file to add/remove menu items.
The css file controls the look, and you can change the images for the menus from there.

The only note to keep in mind is that the css entry .topMenu { float: } is required for the menu to work. The javascript uses this entry to put the top menu buttons in the same order for both left and right float options.

If you have any questions, let me know.

As for modifying scrollbar colors, this is not possible under the xhtml DOCTYPE and only works in IE without a DOCTYPE.

Hello Deacon. I have found your Drop Down menu and also saw it to be the only Menu that seems to work out on my site with ease. I've spent a couple of hours adapting it to my site and fixing it up to suit my needs.

Then I went to update the drop down menu items and realized that my site requires a second sub menu (Like it drops down but then some items have a right arrow to continue with more menu items).

I'm using this for a nonprofit organization (a High School website) and have spent some time and really like your menu. I'll be sad if I can't seem to implement this feature into it and I've looked around but I honestly don't know how. I figured coming to the source of the code would be a start. If you don't think it would be easily possible then I'll just move on and look some more, but I'd really appreciate it.

Thank You,
--Mike

[FC Jamison]

I'd have to write that.

If you have a day or two...I'll look in to it.

Right now I am in the middle or reinstalling my system (I'd forgotten how much software I had installed and downloading updates is taking forever).

FJ

[Mikeish]

You'd be willing to? That'd be great! Yea I have a couple of days.. plenty of other things to do.

I really do appreciate this!

Thank you!!!
--Mike

[FC Jamison]

I'm not gonna promise anything...but I'll see what I can do.

The whole javascript thing is kind of new to me...which is why that code was so simple.

Which site are you working on, if I might ask?

[Mikeish]

I'm not gonna promise anything...but I'll see what I can do.

The whole javascript thing is kind of new to me...which is why that code was so simple.

Which site are you working on, if I might ask?

I understand but the effort is still greatly appreciated.

You may ask... I'm fixing up a few things on http://www.indianola.k12.ia.us One of which is the menu. The one currently there is kind of bland and also has this bad habit of stil in one place no matter what which was bad because I use CSS and whenever the page was long enough, Firefox added the scroll bar, which realigned the CSS but did not realign the Menu. You'll see it if you travel around to a page like http://www.indianola.k12.ia.us/high/athletics/ciml_school_directions.htm

Anyway, the code in that menu was also fairly bad. When I saw yours I was excited. Simplicity at a school district is a good thing. The only item that yours needs is that submenu (which you'll see if you go to the above website).

I do appreciate your efforts with this. If you can't, just let me know.

Thanks a lot!
--Mike

[#tbone]

Hello. I need a drop down menu just like the one on this site up at the top but all in javascript (because my stupid server does not load outside script resources without having it be checked for security, so i need a client side) and all in one html file. Does anyone have a sample script that I can modify and use or show me how? Thanks guys.

[tgreer]

The canonical example(s) for menuing in JavaScript are the Suckerfish menus. A simple web search should reveal several sites and variations. Pick the one that best suits you, study the code, make any adaptations as you see fit, and post specific questions if you have them.

[FC Jamison]

Hello. I need a drop down menu just like the one on this site up at the top but all in javascript (because my stupid server does not load outside script resources without having it be checked for security, so i need a client side) and all in one html file. Does anyone have a sample script that I can modify and use or show me how? Thanks guys.

Are you refering to the dropdown menu or did you want the breadcrumb liks as well.

If you are just looking for the dropdown menu, the example I attached below can be easily modified.

Suckerfish is also an excellent menu.

[#tbone]

I guess I am a retard, but I don't see where that file is. Give me a hint.

I am looking at the nice advertisement now, am I warm?

[tgreer]

Could you provide a little context with your question, #tbone? What "file" are you looking for? Advertisement?

If you're referring to the Suckerfish menus, do a web search for "suckerfish menus".

[FC Jamison]

The file is in my first response to this post.

[FC Jamison]

Well, Mikeish...

I've got the multi-level menu working in html...but I am having difficulty using javascript to create the three-dimensional array.

[Mikeish]

Well, Mikeish...

I've got the multi-level menu working in html...but I am having difficulty using javascript to create the three-dimensional array.

So what are you thinking...? I am even less JS competant than you so I have no idea.

[FC Jamison]

There's more than one way to skin a cat...let me try something else.

[Mikeish]

There's more than one way to skin a cat...let me try something else.

Well Good Luck! :-P

Thanks again.. I really do appreciate this ^_^

[FC Jamison]

Ha!

I knew I'd figure it out eventually.

I based it on the Suckerfish menu...but it works very similar to my first post.

Simply add your items to the arrays in the javascript file and customize with the css file.

The float selector in the CSS file is still required for the javascript to dynamically write the menus...so don't delete it. It is used to keep the top-level menu items in the same order no matter which margin the menu is floated on.

DJ

[Mikeish]

AWESOME! THanks a lot!

I'll implement it into my code and let you know how it works

Really appreciate this!

[Mikeish]

Ignore post: Found out my problem

[FC Jamison]

#topMenu li #flyMenu3_6 { 
	margin: -21px 0 0 135px; 
	width:167px; 
}

is one of the styles to control the position of the flyout menus
you need one of these for each flyout

[Mikeish]

#topMenu li #flyMenu3_6 { 
    margin: -21px 0 0 135px; 
    width:167px; 
}

is one of the styles to control the position of the flyout menus
you need one of these for each flyout

I've gone ahead and done what I can about those, however there's still a slight difference in FF and IE when you go down to try and do third level... but I've gotten it set up to work up pretty well so I think that'll do it.

Thanks a lot!!
--Mike

[okparrothead]

Hello all.

cath120,

Here's an alternative that might work for you.

http://www.serve.com/apg/workshop/cssMenu.html

It uses nested unordered lists of links and css styles to "hide" the drop down links until mouseover.

I hope this helps.

Peace

[FC Jamison]

I have posted a tutorial on this site at http://www.daniweb.com/tutorials/tutorial55309.html which may help those in need of a simple dropdown menu along with a working example.

P.S. The example below at http://www.serve.com/apg/workshop/cssMenu.html did not work for me in IE 6.

[okparrothead]

FC,

Sweet! You even made it work in Internet Explorer.

Kudos.