Drop Down menus are a common and almost ubiquitous UI element, and yet, I find it really hard to "pick one". before heading down the long road of rolling and "battle testing" my own, I'd like to put it out there and find out what others are using.
What are the most popular solutions for jquery, or javascript dropdown menus ?
Should be, lightweight, easy to customise and properly cross browser compatible, and at least function appropriately down to IE8.
Ones I've tried and used in the past with the best experience that meet this criteria inlcude :
Super fish - http://users.tpg.com.au/j_birch/plugins/superfish/
Dynamic Drive Smooth Menu http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
To Clarify: looking specifically for multilevel drop down menus similar to the examples above. I'm also open to "avoid these they're sh*t" type answers if you feel so inclined.
PS: please avoid adding 5 from one of the 500 drop down menu articles that appear when first searching on google, I'd like to know about what YOU"RE using, what dropdown menus YOU love and hate.
have you tried this may be this can give you what you want
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
I personally have used SuperFish, in it's standard form, it's not too pretty but with quite a bit of adjustments I find it can look quite nice.
Then using something like this: http://snook.ca/archives/javascript/jquery-bg-image-animations
Demo: http://snook.ca/technical/jquery-bg/
Can make them look very cool!
After a fair amount of research and messing about, quite honestly I'm fairly disappointed with the options in this area there are a couple options but as commented above rolling my own seems to be the best way forward.
Related
Might not be the BEST fit for Stack Overflow, but I trust you guys, and a lot of you are the best web devs around, so here goes:
I have a web app with several groups of phrases. For each group, you put 4 "answers" in order of most like you (it's a personality test).
I made a fancy svg and responsive, game-like system where there are 4 clouds that you click on in the order that you want. But it's html5/css3/svg effects with a lot of transformations and it only works on some browsers
I don't know any design "theory", but what I need to figure out is how to make an extremely simple, fully cross-browser and cross-device way to do the same TYPE of thing.
examples:
list each group of 4 answers with a dropdown box next to each one where you can select 1-4
drag and drop them to put them in order (jquery. but this won't work on touchscreens)
put and "up/down" arrow next to each one (like some windows dialogs)
use radio buttons?
YOUR SUGGESTION HERE
I hope the question is clear. I'm a web developer looking for a cross-device "ui widget" (or idea) for putting sets of 4 "answers" in order.
Any suggestions?
I have an idea regarding this. Hope this will be helpful.
Please do comment if you have any problem to understand my above image.
I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.
Basically I would like to archive results like that: http://www.pixelapse.com/#
Does someone know any nice plugins for that or good articles explaining how to do such effect. I'm able to google http://flowplayer.org/tools/scrollable/ but maybe you know some alternatives?
This effect is called a carousel. Typically you shift through elements in a list with some sort of animations and controllers.
This article from Tripwire Magazine should give you a pretty good overview of what's out there. As you can see, a lot of the carousels out there are intended for displaying picture galleries, so it might require a bit of hacking on your part to get the result you want.
I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!
I've found a feature on two different websites that I'd like to include on one of my web projects, but I can't figure out how they're doing it. I think they're using either jQuery or mootools, but I'm not sure.
http://www.x-plane.com/index_desktop.html
I'm new here so I don't have the reputation to post the other link, but if you do a Google search for "Andrews Institute of Orthopaedics" its the top result. I'll see if I can answer a few questions to earn my keep.
The thing that I like about these is that the images and text (including links) are all rotated together. I've done a few web searches related to cycle, rotate and slide but it's not coming together for me. Can anyone give me a nudge in the right direction?
The page you linked is using prototype for this (usually because that's what the author knew, as with most libraries), and it is custom script they've written. However, jQuery has a lot of plugins with various styles, just see what one fits your taste best. I'd suggest taking a look here and a look here.
Anything you find can be automated on a timer like the site you linked, or use buttons, or both. These are all pretty flexible, I'd start by finding the plugin you want, try and get it going, then asking a question here if you have problems getting it to behave exactly how you want.