Dropdown Menus By Css Or Javascript

I'm a beginner WWW-developer and I'm wondering whether the dropdown menus should be written in CSS or JavaScript. What are the pros and cons between two techniques?

Solution 1:

You'll need to use CSS for the styling. That is what it is for.

When it comes to the logic of when to show and hide them, then you need JavaScript unless you want:

• The menus to be inaccessible to focused based navigation
  • Keyboard
  • Breath switch
  • etc
• The menus to require precision mouse control
  • e.g. if you have a shaky hand (e.g. from arthritis) and you slip outside the edge of the menu, then a :hover based solution will cause it to vanish without giving time to get back inside

Personally, I'd avoid drop down menus for most situations.

Solution 2:

I would like to recommend using just CSS as much as you can. As these will eliminate issues such as if someone got JS disabled and any other possible accessibility issues. Since menus are an integral part of you site navigation, it is important these are accessible to all the user segments. You can use this for pure CSS but also there are lots of tutorials online if you google "pure css menus". Also you can see here for jQuery & CSS menu example

Solution 3:

They can be written using solely CSS. Check out this Pure CSS hover list.

Solution 4:

JavaScript is often disabled by users, as a security measure, and the necessary code for drop-down menus can be quite involved. Also, a pure JavaScript menu is not available for browsers that don't support it, such as text-only browsers. CSS-based menus are always available, even with JavaScript disabled — browsers that don't handle it will just render a list.

With this technique, adding a menu to a page is as easy as creating an unordered list of links, with nested lists for the sub-menus, and including the appropriate style-sheet.