There's an element you'll find in almost every website or web application in one way or another. And that's the Drop Down effect or "element", usually sharing its name with the HTML select element, also known as select tag or select box.
The select element is an HTML tag that allows us to select one or multiple options, usually in forms.
While the Drop Down effect or "element" can also make reference to the visual effect that allows us to navigate submenus in headers, sidebars, or other menu-kind of elements.
Here's a great example of what a simple Dropdown menu looks like.
A very simple yet effective way to create a super simple collapsable menu.
This kind of dropdown menu mimics the behavior of an HTML Select input by allowing users to select a single option.
The custom style makes it look minimalists and clean. It uses white and blue colors and subtle use of shadows to avoid using hard borders.
A beautiful list of 8 different dropdown menus with different styles.
Four of them react on click while the other 4 do it in mouse hover.
A great example of a menu dropdown with multiple submenus.
This dropdown menu will display the main items when moving the mouse over it. And, on top of that, the cool thing about this menu is that it provides you with a way of adding submenus within the items on the list.
A great solution to a very common problem that developers face when designing menu headers.
This is a beautiful collapsable menu for a sidebar element. Ideal for menus that contain items grouped in different categories.
The menu uses group headings that toggle the collapsable items on the submenu when clicking on them.
It can be a very good option for large side menus with plenty of options. It helps limiting the options for the visitor.
A gorgeous example of a submenu that showcases a dropdown with social media icons.
Adding images or icons is usually a great way to improve the user experience on any website. It makes it way faster for users to visualize the items and select the one they need.
This dropdown menu doesn't use any external library, making it ideal for those who don't want to depend on any particular framework.
If you use the Alpine.js framework, this select box might be for you.
It also uses TailwindCSS for styling. (Which, might not be ideal for all, but has a simple solution )
If you are looking for a dropdown menu to work as a context menu for your web application, then this example is for you.
A beautifully implemented menu that admits icons, grouping categories, and submenus within the menu.
It uses React and the vendor library Popper.js.
If Bootstrap is your thing, then you should consider using this menu.
This bootstrap dropdown is perfect for buttons that provide users with multiple actions to choose from.
It admits grouping categories and switch toggles on the list.
If using jQuery is ok with you, then check out this beauty!
This is a great example of how a dropdown can contain, not only list of items, but also text or images.
This example shows how you can configure this dropdown menu to display on hover and on click, left or right aligned, on the top or at the bottom.
The select box uses a very simple styling making it ideal for minimalistic and white-themed websites.
This example is a work of art.
Not only do we have a responsive menu, but a responsive dropdown menu where every single detail has been taken into account.
On the desktop, the submenus will get displayed on mouse hover. On responsive, on click.
I personally love the effect that the menu has on the desktop, and the simplicity it is on responsive mode. Which makes it perfect for all kinds of devices!
Here's another example of a jQuery dropdown, but this time, mimicking the behavior of an HTML select box.
Perhaps is not what you were looking for, but definitely, something to consider if you are looking for a sidebar menu.
The menu includes categories, icons for those, and arrows indicating the state of the submenu.
In order to use them, simply choose the dropdown menu that you like the most and copy the code to apply it to your website.
- 20 CSS Progress Bar [CodePens]
- 10+ CSS Hamburger Menu [CodePens]
- Beautiful CSS styles for your checkboxes
- Check If Checkbox Is Checked using jQuery
Join 2,000+ readers and learn something new every month!