UI Elements: Combo Box, Pop Out and Horizontal Slide Out Menu

Today we will show you some useful and neat UI elements that are focused on selecting content. We will be using jQuery and some CSS3 properties for the style to give the elements some edge. The first element is going to be a select box plugin that let’s you create an auto scrolling combo box. […]

Today we will show you some useful and neat UI elements that are focused on selecting content. We will be using jQuery and some CSS3 properties for the style to give the elements some edge.

The first element is going to be a select box plugin that let’s you create an auto scrolling combo box. The second element will be a popout menu that reveals its items once it’s clicked, and the third one is going to be a vertical slide out menu.

Auto Scrolling ComboBox


This plugin will transform a select element into a nice looking combo box. You just need to give an ID to the select box and call the plugin like this:

$(function() {
    $('#ui_element').scrollablecombo();
});

View demoDownload source

Popout Menu


The Popout Menu let’s you display menu options in a vertical manner. When clicked, the menu shows its items in a stack manner.
View demoDownload source

Horizontal Slide Out Menu


The horizontal slide out menu is positioned at the left hand side of the window and slides out its menu items once the arrow is clicked. The arrow bounces back once the mouse leaves and this creates a neat effect.
View demoDownload source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 23

Comments are closed.

Comments are closed.