Discuss: Hybrid CSS Dropdowns
by Eric Shepherd
- Editorial Comments
12 Awful when you resize
Nice idea, but have you tried to resize this? It looks awful after a few larger text sizes.
Why can’t you specify most of your CSS paddings and so forth using ems, rather than pixels?
posted at 09:43 am on March 30, 2005 by Juan
13 like macromedia
ironic everyone’s speaking of flash yada. This is the best solution for a css version of the Macromedia dropdowns. Very elegent, and much room for style.
I definitely see this making it onto some of my future websites.
posted at 10:13 am on March 30, 2005 by Dustin Diaz
14 more on resizing
I was just thinking, isn’t there a way to compensate for the text resizing… maybe doing something like combining the sliding doors method with this one? might need an extra <span> or something, but I think it’s doable.
posted at 10:18 am on March 30, 2005 by Dustin Diaz
15 Still prefer the suckerfish
I must say that I still prefer the sucker fish drop downs, having both lists and sublists horizontal means that the entire thing is stuck on two lines whereas with suckerfish it is spread out ofther the page.
A nicer hybrid would be to see the submenu items (for the active section) as a side bar whilst having an old fasioned suckerfish at the top.
I suppose that would be achiveable by mucking about with the example in this article but it would take a lot of work.
posted at 10:45 am on March 30, 2005 by Paul Carpenter
16 Looks similar
The end result looks a lot like the navigation I created for a company back in July, only difference is the sub-nav reverts back to the originally selected sub-nav. Don’t know which one I like better from an usability point of view though.
Here is my implementation, degrades nicely in older browsers or browsers with finicky Javascript support:
http://www.lendingpartners.com/
posted at 11:03 am on March 30, 2005 by Justin Perkins
17 Very helpful...
Hey, this is a really helpful piece. Thanks.
posted at 11:04 am on March 30, 2005 by Miles
18 ...however
…the menu does seem offset to the right from the building image by about 50 pixels in IE 6. Not that I have any idea how to fix that, but just for the record.
posted at 11:14 am on March 30, 2005 by Miles
19 Resizing
Hey Dustin, take a look at my version I posted above. It uses a sliding doors technique and resizes OK, but I use relative positioning to place the navigation, so as you increase the text size the navigation drops down the page and exposes an unstyled area. I should probably fix that ;)
posted at 01:02 pm on March 30, 2005 by Justin Perkins
20 Hybrid CSS on Opera 8.0 build 7401
It doesn’t look so good on Opera 8.0 beta (build 7401) for Windows.
You can find a screenie here:
I know… opera 8.0 is beta, but still. I had to share it.
nerd out
posted at 01:08 pm on March 30, 2005 by Remco Vermeer
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






11 re: re: IE 6 Flashing
Whoops! Here’s a link!
http://www.aspnetresources.com/blog/cache_control_extensions.aspx
posted at 09:35 am on March 30, 2005 by Ben Vaughan