Today we will show you some more UI elements: a search box with a filter and a large drop down menu. We will use jQuery in both elements for the effect. We will also use plenty of CSS3 properties to create some slick looking details. Search Box with Filter This search box reveals a drop ...
Today we will show you some more UI elements: a search box with a filter and a large drop down menu. We will use jQuery in both elements for the effect. We will also use plenty of CSS3 properties to create some slick looking details.
Search Box with Filter
This search box reveals a drop down menu after the user clicks into the input field. The menu is meant to act as a filter with several checkbox options that allow the user to select specific categories for his search. When the user hovers out of the input or the filter box, the drop down will disappear.
Large Drop Down Menu
The large drop down menu is a good option for sites with a lot of navigation items. When the user hovers over one of the list items, the item enlarges to the width of the submenu and the submenu appears.
Hoooaaahhh… once again this is something I can immediately see a use for on my projects.
One thing that I think would be an improvement is if the up-or-down arrow was clickable. Confused me when I tried to open or close the filter menu using the arrow, finding it only opened when you click into the search box.
I did the same thing on my site, but with a few less options. I got my idea from the themeforest.net redesigned search.
The drop down menu is fantastic – I will have to spread the word to all those I know you love beautiful coded things :-)
Yeep, I like your job …Mary Lou
always great and i waiting article and more ….
input have no ending tag />
thanks
I like the larger drop down menu too~
Loved the menu…
Nice !!!
It’s possible to add this with my favourite tutorial :
http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/
cool and modern UI Elements, thanks
Again awesome tutorial..I will use this on my next wordpress theme..
Thank you very much for providing us a good tutorials..
In demo i’ve found two issues:
1. Text label of checkbox isn’t marked with tag
2. When checking checkbox, focus doesn’t return to input text field – it will be wery useful.
wow…uhuk uhuk
thanks ^^
may any want different color like
http://1.bp.blogspot.com/_ALuJjudg6Rg/TEBVyTvR-fI/AAAAAAAACVU/V2VPT5qJ59A/large-dropdown-menu.png
hihihihi…:D come to my blog LoL
Thank you so much for the post!I was looking for a good searchbox with filter for some time and this is just wha I need!!Great work!! :)
Awesome!!!
That menu is awesome!
You should really use labels with ‘for’ attribute for checkboxes. :)
Excellent work.
A full blown, db driven php and ajaxified search using the filters would be awesome.
Love your Stuff Mary
hi
very nice. can you help me to change this menu for right to left language?
please help me
thanks
i change it and work correctly for right to left language
Many thanks
#ldd_menu {
direction: rtl;
text-align: right;
}
ul.ldd_menu > li {
float: right;
position: relative;
}
Collapse div in ie 6 and change the order admin template & happy kingdom. Can’t show sidebar specially right side in ie 9.