http://losangeles.kijiji.com/c-SelectCategory
That page's search menus on upper left.
Best with jQuery.
You don't need jQuery for this. You can use plain 'ol CSS.
This article from pixelspread shows how to create a CSS Drop Down Menu resulting in this. You might also want to look into these following:
CSS Horizontal Drop-Down-Menu
Simple JavaScript Drop Down Menu ( If you really want a JavaScript based one. )
jQuery Drop Down Menu ( Written with jQuery if you like that.. )
Another one in jQuery + CSS with very good examples and help around it.
You could also check out this page, which provides you with code for a jQuery Drop Down Menu ( provided in the other posters link )
For a really simple & lightweight solution, check the Son of Suckerfish dropdowns. Silly name but very elegant. It uses the :hover pseudo-class to accomplish its magic.
Related
This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?
You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify
You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.
I am very often write menu like that:
User clicks on menu item and see div block for this item.
Well it's not hard to code but take some time and very boring.
Is there any JS library which can make my life a little easy and automate writing typical UI elements?
The functionality you need is very similar to the one provided by jQuery UI tabs. Take a look at the demo here.
I'm looking for some input on a certain element of a project I'm developing. I want to include multilevel menus that easily manageable in the back end. I really like the structure wordpress uses in their back end to let users create menu's intuitively by dragging the menu items around. I'm looking for a bit of guidance with the multilevel part. I have made sortable lists before using jquery ui, but I'm a bit lost on the multilevel functionality (the js part)
I'd appreciate any input (plugins, examples, concepts) on this.
Thanks.
jsTree is a plugin designed to do this. It's a good bet that there are others -- try searching the jQuery plugins.
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.
Ok on meebo.com there is instant messages that when you click at the top you can move around i wanna make something like that?
So how do I make Movable forms in JS?
I recommend the jQuery UI plugin called Draggable.
You first need to create your form. Your form will most likely be a div (with solid color or image for the background). Within the div, you have all your form content. The div will also need to be position absolutely (i.e. style="position:absolute")
The JavaScript is fairly straight forward; however, I would personally use something like jQuery to do the work. I'm not sure how familiar with JavaScript you are, but even for an advanced user, using something like jQuery just makes sense. There is a library of tons of already built forms etc with great instructions on how to use them. Let me know if you need more info on how to use a library like jQuery (you can find it here:
http://jquery.com/
You can see all the plugins here:
http://plugins.jquery.com/ (look at 'windows and overlays' - lots of them!)
Click on one that looks interesting, and click on 'demonstration' to see if you like it. For example, the third link down - (mb)ConteinersPlus, a jQuery component for fully customizable and featured container layout (DIV box model) - would let you do this (with almost no work on your end)
http://pupunzi.com/ (this is the example link)
Obviously, if you want to learn how to script it by hand, let me know.