CSS Drop downs

HTML & CSS
1

Would it be that much more difficult to create drop downs like the ones on this site (with images) compared to the ones sitepoint folks helped me create on [URL=“http://www.sineathconstruction.com/”]this site (hover over “Our Work” tab)? No JS; only CSS?

Thanks so much!

2

The hover effect will be easy to do, so will the images. So in short terms, it’ll take you like 10 extra minutes to get everything in place.

The JS can be done via Jquery, that’d be the simplest route :).

3

So it is doable using CSS only?

4

it just a change in the CSS style. ( you may need js/ or CSS3 if you want that timed transition… but the lack of it would be too subtle to notice). Essentially what you need to do is change your LI UL. W/O going into specifics it would be something like:

#top-navi li ul { width: [width of your image]; background: url(yourImage.jpg) left bottom no-repeat #[some safe color]; min-height:[height-of your image];}
#top-navi li li {background:none;} /possibli needed if you had assigned a background to your LI LI before/

  • html #top-navi li ul { height:height of your image];}/hack for older IE/

That, roughly is the gist of what the code should look like. Hope that helps

5

The hover effect of fading in/out, no. Everything else, yes.

6

Cool. Thank you!!

7

No, thank you ;)!

Any questions just shout. I’m sure someone can whip up a solution…

8

Thanks. I didn’t notice the hover effect until you both pointed it out.

9

Is there a name for this type of menu that is more specific than just “horizontal drop down css”?

10

It’s using the jQuery hoverIntent plugin for the hover and menu open/close effect. So, if you disable javascript in the browser the menu will not drop down.

I searched out horizontal menus, but you know how that is, you’ll come back with a thousand sites to try to dig through. And of course searching the jQuery plugin site doesn’t return any type of preview. Is there a nickname for this specific style of horizontal navigation menu?

11

Hi,

You may be better off with superfish which builds on top of the standard suckerfish menu. It will give you [URL=“http://users.tpg.com.au/j_birch/plugins/superfish/#examples”]timed fades and shadows etc and keyboard accessibility.

12

Superfish looks like it’s the one. Is this difficult to do?

13

It bolts on quite easily to a standard suckerfish menu but customising can be difficult.

Just download it and play around with it for a few hours and you’ll soon get the hang of it.:slight_smile:

14

Okay, thanks Paul :-).

15

Is there a name for this type of menu that is more specific than just “horizontal drop down css”?

They are often called Mega Dropdowns.