Dropdown menus

[Maljonic]

Assuming you have to have a dropdown menu because that's what someone wants, do you have any preferences as to how to go about making them - fireworks, DHTML, scripts and so on?

 

[JingleBells]

Whilst on placement I helped the designers use some lists based on some code on A List Apart and these are great as they are CSS based (uses nested Lists to create them), and work on decent browsers without needing any javascript, and in IE with only a small bit of script.

 

[Padwah]

I second the motion of the suckerfish drop downs used them quite a few times myself to great effect

 

[Maljonic]

Never tried that before, might give it a go tomorrow; are there any good examples of how you can get them to look? I've only tried making these menus via Fireworks before, which looks all right but you end up with a ton of code.

 

[Maljonic]

Never mind, just had a look at it, it doesn't seem all that complicated actually - even for me.

 

[Shovel]

Suckerfish is generally the best method. It should mean that the navigation links are accessible from the keyboard (hitting tab), whereas pure script solutions generally are not (and thus makes your website useless to the co-ordination disabled or old+frail). Even then, you may not be able to make the links visible using the keyboard in Internet Explorer 6 and below because of its poor CSS support. IE7 ought to be OK.

If you can, it's worth mentioning to your client that drop downs are bad not only for the poor accessibility, but it makes links harder to find (as they're hidden until you mouseover the parent).

Requiring them is also something of an Information Architecture issue, often a sign that you have too many navigation links and should restructure the site. Consider the monstrosity of the old Dabs.com, with drop downs (which weren't even alphabetically sorted, ffs), to the new one which is much better organised.
As a better alternative, try and sell your client the idea of 'tabs' instead. 'Major section' links are present on every page along the top row and 'minor' links on the row underneath, contextual to whichever major section you're currently viewing.

And if you really can't get out of putting them in, ensure that they obscure content as little as possible and ensure they don't obscure any other hyperlinks at all (it's the most annoying thing in the universe when they do).

And remember, anyone that demands drop down navigation on their website 'because it's cool' is a clueless moron and needs to be kept as far away from the project as is humanly possible. Assassination may be an option if the client's budget will extend to it.

 

[Maljonic]

I already mentioned (to the client) that dropdown menus aren't perfect, I'm going to make a proper site map to make up for it, one that's easy for visitors to see and use and not just for Google.

Most people tend to ask fot stuff because they've seen it somewhere else, that's the case here. It's only a couple of items on the menu that drop down actually, so it's not so bad anyway.

 

[MKJ]

Had some fun with drop down menus but nearly always get fed up of them. Like Shovel says they tend to spoil a site I think. I have to do a lot of work on my own site as I have to move from category to category as quickly and seamlessly as possible but for sure I am not going to use drop down menus - don't like em. How I am going to approach my problem is to convert a Joomla Module (already done) to show an iframe with a htm page as the source. Inside the source file I have used the code from my current theme to make the links exactly like the main menu (made it read the same theme style.css and then added class=mainlevel to the links). Then I am going to make a few pages of links with the first menu linking to the 2nd page of links - 2nd to the 3rd (if necessary) and finally the last stage the links will target the wrapper (iframe) as I am using an external link script. This way the menu alters instantly with no delay as each page of links will load fast. Attempting this in Joomla (Mambo) by using their own menu creation techniques is an absolute nightmare and the whole thing grinds to a halt - including my brain . Page of adjusted links here:

Menu

As you can see from the page source above this is an incredibly easy to way to make a nice looking menu. You can even make it scrollable by showing the iframe scroll bars. Slight adjustment in the theme style.css file will easily remove the horizontal iframe bar. I intend to display a similar menu to the above in an iframe with the scrolls bars deactivated and I will have me one very fast changing menu . I can either make the iframe menu change contents or show a new page with different iframe menu content. Either way it is a lot easier than attempting this in Joomla/Mambo or any other portal. Going to work on this tomorrow.

 

[MKJ]

Think the menu turned out quite well. Software has the noscroll menu which loads one page of links to another then the links target the wrapper (iframe) and UK Shopping has a scrollable version (links target the wrapper). Dead easy way to alter too from now on

Menus = Software & UK Shopping

By the way got some cracking website design and checking tools on the site now - under 'Technical Menu'.

 

[Maljonic]

Okay I've had a go at suckerfish menus here: http://www.driverskills.com/

It's all pretty neat I think; does anyone know how to get rid of the dots next to the menu list in Netscape etc though, or add them in IE? I've had to shift everything over to the left a bit so it fits right in both.

 

[MKJ]

Doing a good job on that site Maljonic. Nice and fresh and dynamic. As far as the menu is concerned with Netscape - probably take quite a bit of messing around to get rid of them white dots. Is it worth it? How does the menu look if you line everything up on the left as opposed to centered? I suppose doing so alters the lettering along the top as well? I think if the menu lined up the links on the left the white dot wouldn't be so noticeable as it would appear very even and neat then.

 

[SheepCow]

list-style-type: none;

Will remove the dots. You'll want this site a lot:
http://www.w3schools.com/css/css_reference.asp

 

[Shovel]

The menu implementation is fine, though you should make ‘courses’ link to a page duplicating the list that drops down normally. That way, anyone with an old browser/no script that applies the CSS styles but doesn't allow the hovering will still be able to access the site.

 

[Maljonic]

Thanks I'll mention that, it's not my site though so I just do what I'm told to do. All the pages can be got at from other pages though, it's just a bit confusing - which is why he wanted the menus that way I think. There's also a proper site map page now, which I may suggest linking to from the top too.

 

[Maljonic]

list-style-type: none;

Will remove the dots. You'll want this site a lot:
http://www.w3schools.com/css/css_reference.asp

No it wont, I already have that in there.

 

[Maljonic]

Oh wait, I think it might be something to do with conflicting styles, I'll look into it.

Edit: it was, sneaky additional styles when I'm not looking.