UI Elements: Search Box with Filter and Large Drop Down Menu

Comment: 0 Comment | Hit: 3736 | Date: 21 Jul 2010 00:07 | Category: CSS

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. UI Elements: Search Box with Filter and Large Drop Down Menu

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.

Search Box with Filter

Search Box with Filter

Demo:

http://tympanus.net/Tutorials/UIElements/SearchBox/

Download:

http://tympanus.net/Tutorials/UIElements/SearchBox/SearchBox.zip

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.

Large Drop Down Menu

Demo:

http://tympanus.net/Tutorials/UIElements/LargeDropDown/

Download:

http://tympanus.net/Tutorials/UIElements/LargeDropDown/LargeDropDown.zip

 

http://digg.com/submit?phase=2&url=http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&title=UI Elements: Search Box with Filter and Large Drop Down Menuhttp://delicious.com/post?url=http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&title=UI Elements: Search Box with Filter and Large Drop Down Menuhttp://www.facebook.com/sharer.php?u=http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&t=UI Elements: Search Box with Filter and Large Drop Down Menuhttp://twitter.com/home?status=UI Elements: Search Box with Filter and Large Drop Down Menu via @nvitou http://bit.ly/bublUhhttp://www.google.com/bookmarks/mark?op=edit&bkmk=http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&title=UI Elements: Search Box with Filter and Large Drop Down Menuhttp://www.stumbleupon.com/submit?url=http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&title=UI Elements: Search Box with Filter and Large Drop Down Menuhttp://www.myspace.com/Modules/PostTo/Pages/?u=http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&t=UI Elements: Search Box with Filter and Large Drop Down Menuhttp://www.squidoo.com/lensmaster/bookmark?http://www.nvitou.com/en/article/ui-elements-search-box-with-filter-and-large-drop-down-menu/&title=UI Elements: Search Box with Filter and Large Drop Down Menu

Comments

Name:

Email/Website:

Your comment:

nVitou.com in brief

nVitou.com was founded in July 2010 by a Cambodian, NOUV Vithou, located in Phnom Penh. The mission is to exchange knowledge and experiences on code and design.