Easy drop down menu?

Question

cath120 0 Light Poster

17 Years Ago

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?

javascript

7 Contributors
31 Replies
211 Views
2 Weeks Discussion Span
Latest Post 17 Years Ago Latest Post by tgreer

All 31 Replies

FC Jamison 31 Posting Pro in Training

17 Years Ago

The file is in my first response to this post.

Mikeish 1 Newbie Poster

17 Years Ago

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.

Mike555 commented: -mike555 +1

okparrothead 1 Light Poster

17 Years Ago

FC,

Sweet! You even made it work in Internet Explorer.

Kudos.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 1 · 2006-09-05T11:40:29+00:00

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 2,905 Posting Sage w/ dash of thyme Team Colleague · Answer 2 · 2006-09-08T12:29:40+00:00

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 31 Posting Pro in Training Team Colleague · Answer 3 · 2006-09-08T13:33:21+00:00

FC Jamison 31 Posting Pro in Training

17 Years Ago

huh?

WaltP 2,905 Posting Sage w/ dash of thyme Team Colleague · Answer 4 · 2006-09-09T04:06:57+00:00

WaltP 2,905 Posting Sage w/ dash of thyme

17 Years Ago

huh?

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

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 5 · 2006-09-09T04:13:02+00:00

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 0 Light Poster · Answer 6 · 2006-09-10T22:09:54+00:00

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 1 Newbie Poster · Answer 7 · 2006-09-12T06:42:35+00:00

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 31 Posting Pro in Training Team Colleague · Answer 8 · 2006-09-12T09:09:42+00:00

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 1 Newbie Poster · Answer 9 · 2006-09-12T09:14:02+00:00

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 31 Posting Pro in Training Team Colleague · Answer 10 · 2006-09-12T15:00:52+00:00

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 1 Newbie Poster · Answer 11 · 2006-09-12T20:49:55+00:00

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 1 Light Poster · Answer 12 · 2006-09-13T04:21:52+00:00

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 189 Made Her Cry Team Colleague · Answer 13 · 2006-09-13T04:58:20+00:00

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 31 Posting Pro in Training Team Colleague · Answer 14 · 2006-09-13T05:22:04+00:00

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 1 Light Poster · Answer 15 · 2006-09-14T04:01:21+00:00

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 189 Made Her Cry Team Colleague · Answer 16 · 2006-09-14T04:39:36+00:00

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 31 Posting Pro in Training Team Colleague · Answer 17 · 2006-09-14T06:46:31+00:00

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 31 Posting Pro in Training Team Colleague · Answer 18 · 2006-09-14T07:19:49+00:00

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

Mikeish 1 Newbie Poster · Answer 19 · 2006-09-14T08:15:13+00:00

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 31 Posting Pro in Training Team Colleague · Answer 20 · 2006-09-14T11:11:24+00:00

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 1 Newbie Poster · Answer 21 · 2006-09-14T18:20:34+00:00

AWESOME! THanks a lot!

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

Really appreciate this!

Mikeish 1 Newbie Poster · Answer 22 · 2006-09-15T13:16:57+00:00

Mikeish 1 Newbie Poster

17 Years Ago

Ignore post: Found out my problem

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 23 · 2006-09-15T13:41:13+00:00

#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 1 Newbie Poster · Answer 24 · 2006-09-15T15:51:48+00:00

#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 1 Light Poster · Answer 25 · 2006-09-21T01:44:48+00:00

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 31 Posting Pro in Training Team Colleague · Answer 26 · 2006-09-21T07:33:45+00:00

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.

Easy drop down menu?

Recommended Answers Collapse Answers

All 31 Replies

Recommended Answers