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?
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.
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
They can be written using solely CSS. Check out this Pure CSS hover list.
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.
Related
I was practicing some jQuery when I found this tutorial. It does the exact same thing as I was trying with JavaScript but uses pure CSS3. I figure it is best to learn what's right then to have to relearn, so that is why I am asking if there is a benefit of one to another or is it just preference?
The CSS solution may be easier and will probably be more efficient, but it produces a much more basic solution.
For example, with the pure CSS solution, as soon as you move the mouse outside of an item, it loses focus and closes. This can be annoying for users if the menu has many levels or the items are small enough that the mouse may accidentally stray outside.
Using javascript, it is possible to keep menu items open even if the mouse moves outside. It also allows for more customization of options like animations and delays. There are plenty of jQuery plugins that make dropdown menus easy.
Always use CSS when given the opportunity except in cases where you need to use logic/arithmetic.
A similar question was asked here: Responsive design method for collapsing a div
I've read this thread,
Dropdown menus by CSS or JavaScript
but see that there are conflicting opinions over use of CSS only vs javascript for dropdowns.
Is the only argument in favor of using CSS only to accommodate people with javascript turned off?
Are there any other considerations?
Which method is more forgiving in a site that must work on desktop and most mobile browsers (iOS, android)?
Drop down menus tend to be designed for pointing devices. It is very rare to find one that can handle linear (e.g. keyboard tabbing through items) or touch interaction (although you can degrade gracefully if the top level items link to pages that provide onwards navigation).
I doubt it is possible to get one that works well for linear or touch without JavaScript.
And ideal solution for this is one that uses both. So it works for people without java script and it is improved for people with javascript (animation....)
Like you say it depends on the requirements and to be honest if the device targetted support CSS3 you can probably do a cool animated one in CSS only.
What is the best way or an easy way to create a javascript menu. When I say best, I mean there are many softwares that help in creating menus, for eg. Sothink DHTML menu. Isnt there a menu control available in javascript?
There is no reason to buy or even just install a program solely for the purpose of constructing a JavaScript menu.
First of all, the menu itself should not contain any JavaScript code. It should just be a nested list. You shouldn't need a program to write that code for you. If you do, then you're probably using a WYSIWYG editor anyways, and any WYSIWYG HTML editor will create an unordered list for you.
Once you've created the menu structure, you just need to add the display style and behavior to make it look/behave like a dropdown or flyout menu. This can be done either in pure CSS or with CSS + JavaScript. Some people prefer to use JavaScript to turn a regular list into a dropdown/flyout menu because they think using display: none is bad for SEO, and if you style items like that to begin with, then people without JavaScript will not be able to see the hidden menu items. However, there are ways around both of those problems using pure CSS.
If you're using jQuery, then there are a number of jQuery plugins that let you create your menus with just 1-2 lines of code. Otherwise, there are standalone scripts and that can do the same.
https://stackoverflow.com/questions/4177888/what-is-the-best-way-to-create-javascript-menu-closed
You just asked this question a couple of minutes ago?
Here is JQuery cool menus that you can reference.Anyway Javascript is client side script language.There is no control at all.
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.
My company had a website we're working on redone by a designer. It looks much better, but I've hit a snag implementing their design in HTML+CSS. They have a heavily styled <select> box, so much so that I couldn't recreate it with pure CSS. I found a solution that uses Javascript to replace the <select> box with a <ul>. This works almost perfectly, but there are two problems with it:
It doesn't scroll when there are many elements.
It doesn't close when you click outside of the dropdown.
I've played around with it in Firebug, but becuase the <li>s are styled with display:block, they don't seem to be contained by the surrounding <ul>, which means I can't set a maximum height.
Issue #2 is not as important, but it would be nice to know how to fix that as well.
Here's a link to the problem page: http://www.truwindshield.com/test2/
Since you're using jQuery and the solution isn't, you could consider replacing it with a relevant jQuery plugin. This one seems to be working and degrading nicely: jQuery SelectBox
This implementation also solves the two issues you're having and might save you some working trying to hack the other solution into doing what you want it to.