954,561 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Easy drop down menu?

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?

cath120
Light Poster
32 posts since Apr 2005
Reputation Points: 10
Solved Threads: 0
 

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.

Attachments jamExpressMenu.zip (5.45KB)
FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 

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

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

WaltP
Posting Sage w/ dash of thyme
Moderator
10,507 posts since May 2006
Reputation Points: 3,348
Solved Threads: 944
 

huh?

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 
huh?


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

WaltP
Posting Sage w/ dash of thyme
Moderator
10,507 posts since May 2006
Reputation Points: 3,348
Solved Threads: 944
 
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.

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 

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

cath120
Light Poster
32 posts since Apr 2005
Reputation Points: 10
Solved Threads: 0
 

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

Mikeish
Newbie Poster
20 posts since Sep 2006
Reputation Points: 11
Solved Threads: 0
 

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

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 

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

Mikeish
Newbie Poster
20 posts since Sep 2006
Reputation Points: 11
Solved Threads: 0
 

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?

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 
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

Mikeish
Newbie Poster
20 posts since Sep 2006
Reputation Points: 11
Solved Threads: 0
 

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.

#tbone
Light Poster
49 posts since Sep 2004
Reputation Points: 13
Solved Threads: 0
 

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.

tgreer
Made Her Cry
Team Colleague
2,118 posts since Dec 2004
Reputation Points: 227
Solved Threads: 37
 
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.

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 

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?

#tbone
Light Poster
49 posts since Sep 2004
Reputation Points: 13
Solved Threads: 0
 

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".

tgreer
Made Her Cry
Team Colleague
2,118 posts since Dec 2004
Reputation Points: 227
Solved Threads: 37
 

The file is in my first response to this post.

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 

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.

FC Jamison
Posting Pro in Training
Team Colleague
446 posts since Jun 2004
Reputation Points: 92
Solved Threads: 21
 

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.

Mikeish
Newbie Poster
20 posts since Sep 2006
Reputation Points: 11
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You