CSS menu vs JavaScript menu

Question

In making a drop down menu, there are jQuery menus like superfish and pure CSS menus. Is there any difference between JS menus and CSS menus?

I don't need onclick event to overwrite the default anchor. I just need to be able to click the menu item then follow the <a href="...">...</a> to another page.

Answer 1

Differences:

1. JavaScript break down if user has disabled JavaScript; CSS menus won't work if user has disabled CSS (which is less common)
2. JavaScript made via libraries like jQuery are more cross-browser, due to the fact that cross-browser issues are handled by library
3. JavaScript menus are more flexible, as CSS still is not enough mature for creating highly complicated effects (don't forget that JavaScript is a programming language, and a programming language means that you can do almost anything you want. But CSS is more like declarative fashioned)
4. CSS menus are usually lighter in size (see Thought Results for example), but this is not a big deal in today's Internet speeds users have.
5. Sometimes in a menu, you need grouping, which is not achievable via CSS, but can be done in JavaScript. (grouping means that you want to open a drop down on click of an item, not following the link address. Of course, in your case, this is not a requirement)

Answer 2

From a philosophical standpoint, CSS is really about styling, JS about interaction. However, now that WebKit has gone full-throttle with CSS transitions, that line has blurred quite a bit.

In the end, it's great to use CSS as much as you can, then add JavaScript for that added level of polished interaction. Things like keyboard navigation...subtle delays to allow a mouse to travel from one link to the next...animations, etc.

Answer 3

An obvious difference is that JS menus are a lot more customizable. You can't control things like how fast a menu appears using just CSS.

Answer 4

Even thought I am a developer, I always try to avoid programming at all.

I think I will go with a CSS menu that will show the drop menu DIV using the onHover event.

JavaScript could be influenced by other apps, maybe duplicating variables. And you can port it easily to mobile devices that usually don't support JS