Pull-down Menus

[dthomsen8]

Now my web site committee has decided that I have to use pull-down menus, which are certainly not my first choice. I am poking around on the web looking at various ways to do it, but I am not impressed by the results I see so far.

Questions:
1) Can it be done with HTML/CSS only?
2) What about users with older browsers that don't do good CSS results?
3) Is JavaScript the way to go to get rollover effects?

[dacoyle]

David,

I've never done pull down menus because I personally think they can be annoying, but I Googled it and found an Eric Meyer site. Meyer is one of the top experts in CSS.

http://www.meyerweb.com/eric/css/edge/menus/demo.html

[ktinkel]

1) Can it be done with HTML/CSS only?
2) What about users with older browsers that don't do good CSS results?
3) Is JavaScript the way to go to get rollover effects?Drop-down menus have been extensively covered on AListApart: For people who make web sites (http://www.alistapart.com/), and you can find several solutions, with and without JavaScript and with degrees of success in terms of usability, older browsers, and so on.

Their indexed archives (http://search.atomz.com/search/?sp-q=dropdown+menu&x=0&y=0&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All) include many of these.

JavaScript Source offers a Pulldown Menu Generator (http://javascript.internet.com/generators/drop-down-menu.html) — you enter your menu entries, and it generates the code for you. I tried this once, and thought it was pretty good (needs some cleanup and styling, of course).

[Kelvyn]

1) Can it be done with HTML/CSS only?

Heres one (http://www.cssplay.co.uk/menus/basic_dd.html)that works on everything except IE5 on a Mac (it even works on IE7Beta2), has no JavaScript and seems very easy to set up.

Can anyone with a Mac and IE5 tell me which part doesn't work?

[dthomsen8]

David,

I've never done pull down menus because I personally think they can be annoying, but I Googled it and found an Eric Meyer site. Meyer is one of the top experts in CSS.

http://www.meyerweb.com/eric/css/edge/menus/demo.html

A very interesting demo, but it does not work at all for Internet Explorer, so it is not a viable solution for me.

[dthomsen8]

Heres one (http://www.cssplay.co.uk/menus/basic_dd.html)that works on everything except IE5 on a Mac (it even works on IE7Beta2), has no JavaScript and seems very easy to set up.

Can anyone with a Mac and IE5 tell me which part doesn't work?

While I wait to hear what happens with IE5 on a Mac, I am going to try this solution. Thanks for the link, Kelvyn.

Is use on a non-profit civic association web site a personal or a commercial use? (I don't get paid for the work, but maybe I can get them to contribute.)

[ktinkel]

While I wait to hear what happens with IE5 on a Mac, I am going to try this solution. Thanks for the link, Kelvyn. In MSIE 5 on a Mac the dropdowns simply do not work. That means that you would need to provide a secondary method for getting at those options.

Oh, and it moves the first item to a new top line (even when I open the window wide enough that there is no chance that there is lack of room). I’ve attached a screen shot.

I’d say that menu code is pretty slick; Mac users who rely on MSIE 5 are used to much worse than this!

[dthomsen8]

In MSIE 5 on a Mac the dropdowns simply do not work. That means that you would need to provide a secondary method for getting at those options.

Oh, and it moves the first item to a new top line (even when I open the window wide enough that there is no chance that there is lack of room). I’ve attached a screen shot.

I’d say that menu code is pretty slick; Mac users who rely on MSIE 5 are used to much worse than this!

Do Mac users commonly use MSIE 5, or is there a later MSIE version? Beyond that, do they use MSIE at all when Safari and other browsers are available?

[dthomsen8]

David,

I've never done pull down menus because I personally think they can be annoying ...

So, what alternatives are there if the web site currently has 16 links on the home page to other pages? I think the dropdown menus are annoying, but the web committee wants them.

[ktinkel]

Do Mac users commonly use MSIE 5, or is there a later MSIE version? Beyond that, do they use MSIE at all when Safari and other browsers are available?In my experience, fewer and fewer Mac users use MSIE. Version 5.2.3 is the last one to be developed for the Mac.

Mac users still on OS 9 do not have too many other choices (I think some version of Mozilla, if they have ever heard of it; and an older version of Netscape). But I doubt they amount to many users even among Mac users (though I have no basis for my believing so).

OS X users have Safari, and most that I know also use Firefox or another of the Mozilla-oids, maybe even Camino (the Mac-only one). And there is Opera.

Might be worth asking over on Snarkish (http://snarkish.com/), where Mac users lurk these days.

[Kelvyn]

Mac users who rely on MSIE 5 are used to much worse than this!Glad to hear it, because I reckon this is a good solution to provide a CSS menu that works with PC IE5/6 without JS and is forward comptible with IE7

[iamback]

Heres one (http://www.cssplay.co.uk/menus/basic_dd.html)that works on everything except IE5 on a Mac (it even works on IE7Beta2), has no JavaScript and seems very easy to set up.Doesn't work with the keyboard though - which makes it rather inaccessible (though the main entries themselves do lead to a page).

[iamback]

So, what alternatives are there if the web site currently has 16 links on the home page to other pages? I think the dropdown menus are annoying, but the web committee wants them.Only 16 links? Just group them by category and give each group a heading. For such a small amount drop down menus are not really necessary - unless there is no way to group them (all the same level / category), in which case drop down menus aren't going to help either (you'd get a single drop down menu with 16 items).

And if you think you have groups but you can't find a way to name the groups, you have a problem with the information architecture and will need to look at that first. ;)

[dacoyle]

So, what alternatives are there if the web site currently has 16 links on the home page to other pages? I think the dropdown menus are annoying, but the web committee wants them.

I did something last year that worked well. One of my candidates had three endorsement pages, one set of quotes, one set of groups, and one set of individuals. We didn't want all three links in the main nav area, so when you clicked Endorsements, the first page opened and under the Endorsement link, there were three bullets. Quotes, which was the current page and not linked, Groups, and Individuals. Each link opened a new page and when you left one of the three, the bullets disappeared.

Thought I had taken it offline, but it's still in the archives:

http://www.edfendley.com/endorsements.htm

[Daudio]

I think the dropdown menus are annoying, but the web committee wants them.
I think they are usually annoying, and sometimes a real PITA, with response time delays and sometime constant unintentiional triggering.

So your committee wants them ? Do they know the down sides ? Do they know alternatives ?

Maybe some committee likes the look of a swastika symbol. Maybe someone should tell them the negitive implications !

[dthomsen8]

I did something last year that worked well. One of my candidates had three endorsement pages, one set of quotes, one set of groups, and one set of individuals. We didn't want all three links in the main nav area, so when you clicked Endorsements, the first page opened and under the Endorsement link, there were three bullets. Quotes, which was the current page and not linked, Groups, and Individuals. Each link opened a new page and when you left one of the three, the bullets disappeared.

Thought I had taken it offline, but it's still in the archives:

http://www.edfendley.com/endorsements.htm

I was thinking along the same line, and had a mock-up navigation structure to do it, something like what you suggest. There was a grouping, along the lines that Marjolein is suggesting, such as:

About Us: Activities, Bylaws, Meetings, Membership, Organization

Information: Government Contacts, Links, Recycling, Neighborhood Plan

Issues: Parking, SEPTA, Taxes, Zoning

News: Newsletters and Emails, current News, previous years News

What would the menu look like, if I had something along the alternative lines that you two are suggesting?


See http://www.19121.com/index.htm
(http://www.19121.com/index.htm)
for what they rejected. If I put 16 buttons on the home page, even if they are in groups, what would I have, except the same excessive navigation bar that I have now in a FrontPage web site.

[Richard Waller]

I hate them too. But against my religious principles, I have them driven by JavaSript on
http://www.remitconsulting.com/
and I just do not know whether they work on anything but IE

I get round some of the problems by having a clear link to the Sitemap page. Normally I would have about five text links at the bottom of each page. If the fools of designers let me of course.

[dthomsen8]

I hate them too. But against my religious principles, I have them driven by JavaSript on
http://www.remitconsulting.com/
and I just do not know whether they work on anything but IE

I get round some of the problems by having a clear link to the Sitemap page. Normally I would have about five text links at the bottom of each page. If the fools of designers let me of course.

A very nice site, Richard. Where did the JavaScript come from? Did you write it, or use the Dreamweaver behaviors, or did you get it elsewhere?

[Richard Waller]

The JavaScript seems to me to be pretty standard. It was installed by the designer's tame programmer who did all the CSS stuff for us on
http://www.remitconsulting.com/

[dthomsen8]

The JavaScript seems to me to be pretty standard. It was installed by the designer's tame programmer who did all the CSS stuff for us on
http://www.remitconsulting.com/

You have the luxury (or disadvantage) of a designer and a programmer. I have to do everything, or find a place to get it cheap or for free.

I am impressed by the site map at this site, and will insist on such a map for our web site. I think that Dreamweaver has a site map feature.

[dacoyle]

David,

That's very close to what I suggested, but a little confusing without the indent for the sub topics. I'd use a different image for the secondary links and leave all of the primary links visible. Also suggest disabling the link on the active page.

[iamback]

About Us: Activities, Bylaws, Meetings, Membership, Organization

Information: Government Contacts, Links, Recycling, Neighborhood Plan

Issues: Parking, SEPTA, Taxes, Zoning

News: Newsletters and Emails, current News, previous years News

What would the menu look like, if I had something along the alternative lines that you two are suggesting?Something like this, maybe - see attached (remove the .txt extension to view in your browser).

[donmcc]

Download the trial of Fireworks from Macromedia/Adobe. It has a great feature for making these things seamlessly. Either graphic or text based, it writes the javascript code automatically.

It's a handy little program. Pray that Adobe doesn't kill it in favor of the less-useful ImageReady.

[dthomsen8]

Download the trial of Fireworks from Macromedia/Adobe. It has a great feature for making these things seamlessly. Either graphic or text based, it writes the javascript code automatically.

It's a handy little program. Pray that Adobe doesn't kill it in favor of the less-useful ImageReady.

I see that I have Fireworks installed with Dreamweaver MX 2004, so I can try what you suggest without downloading.

However, I have been trying to avoid JavaScript if I can. Of course, getting the JavaScript written automatically is much better than writing it myself, or trying to figure out somebody else's code.

[donmcc]

However, I have been trying to avoid JavaScript if I can. Of course, getting the JavaScript written automatically is much better than writing it myself, or trying to figure out somebody else's code.

I am on a very old version of FW, and it is possible that they have added a CSS option into the newer versions. Macromedia was very good to that program while they controlled it.