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 […]

By Manoela Ilic in Playground on
Demo Download

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();
});

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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.

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.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

3D Perspective Glitch Hover Effect

Dynamic Tooltip Reveal Animations

How to Animate SVG Shapes on Scroll

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 23

Comments are closed.

  2. Superb scripts. I really like the horizontal slide menu. Thanks for sharing!

  10. Awesome. I love the first and the last ones.
    Also, great that it works flawlessly for IE too. Always had a hard time with styling s for IE

  14. Hello Mary Lou.

    First I liked the scripts, especially the 1st model.
    Well, only that it has a problem, select the link in not working.

    Could you help me?

  15. It looks great but what is the callback function to display the selected value when it’s a link to an html page?

    Thanks

  16. Please help:

    it posts an empty string although an option has been selected.

    How to post a data?

    Thanks in advance!

  17. Hi,

    Can anyone point me to where I can get further help with these tools? I would like to:
    – Stack the Horizontal slide out menu (eg to have a column of 5 copies on top of each other)
    – Make the menu open & stay open on mouseclick (not hover) instead of closing when mouse moves away.
    – Combine this horizontal menu with the combo box one so that if you click “Menu”, then horizontal menu appears, then if you click menu item A (as listed in demo), then combo box appears with submenu items.

    I tried muddling around but unsuccessfully -I’m a complete noob trying to create a quick search/browse page to link to a database for a business case demo.

    Thank you!

  18. on scrollableCombo: very nice, but how can I access to select value?

    thanks in advance,
    Fabio

  19. Nice script once again but i have got just one problem in working with it, and that is – how do still connect link my select option to the link… because i noticed that the script just takes the val(); of the option tag and displays it in a div.

  20. The Horizontal Slide Out Menu doesn’t work in Google Chrome is there any code modification to be done.. Please help – Rakesh