There’s no denying to the fact that menu bar are the first thing on the list while designing user interface. This is because of the fact that menu play a significant role in user experience as well. Key to management is an effective categorization. The dropdown menu is the same key. They provide easy and efficient navigation option. Users know exactly where to go to find the content or action they are looking for. Achieving this is relatively easy with HTML and pure CSS dropdown menu. Stay till the end of article to find on different ways and ideas to include one for your project.
We’ll not get sufficient time to explain importance of menu on any website and application. We have covered a number of articles dealing with menu and related topics that highlight on its importance. However, few of the significance include good navigation option, driving more traffic, professional web layout and proper utilization of the space. You’ll just need some basic knowledge of HTML and CSS to fully understand the examples. However, you can still dive in to get general idea without considering the implementation aspect.
Related
- React Menu Component Code Snippet
- Sticky Header Elements for React App
- Flipping Menu Examples With CSS and JavaScript
- React Loader, Spinner and Progress Bar
- Tab Components Example for React
Amazing Pure HTML and CSS Dropdown Menu Examples
You’ll just need HTML and CSS knowledge to get some cool dropdown menu. The principle for the menu design is fairly simple. In HTML, you’ll need to put the menu components in an unordered list while relevant sub menu are kept as nested list inside the main menu. CSS offers dropdown effect for menu. The idea is that you main menu is always visible while the sub menu are initially hidden. This means that you need to play with hidden block and inline block display element in the CSS. Along this, you can choose to include animation effect for better results. These are basically it, you can add additional contents or effects as you desire to meet your needs. Finally, let’s dive into the actual examples of dropdown menu.
1. Menu – Gradient Menu
We are getting started with a pure CSS dropdown menu in the list of incredible dropdown menu. The menu uses gradient of colors escaping the limitation of single color type while adding beautiful effect. The dropdown menu includes the animation of zoomed rectangular box while hovering. The new rectangular box aligns slightly above the original menu bar with sub menus following below. The animation also includes a 360 degree rotation of the icon if present. Additionally, an animated line originating from the center towards both side appear for hovered component. Each component has a separate gradient background. This makes the website appearance more dynamic.
Considering the colors and animations used, the menu bar could be used in creative websites. For example image sharing platforms, fashion design related sites and so on. Instagram can consider the use of this menu bar for their next web design.
Author: Halida Astatin
Demo | Code
2. Responsive navigation menu Pure CSS
We shall continue the list with another example of pure css dropdown menu. While the previous example showed magnification effect for selected menu component, this one doesn’t separate contents. It looks like sub menu are is attachment to the menu bar. Upon hovering the sub menu bar slides down in a construction like pattern. Construction pattern in the sense that that the first child appears paving the way for next child menu and so on until all sub menu appears. Moreover, just a single dot appears for active menu component. Nothing much fancy but efficiently delivers the meaning.
Author: Jenning
Demo | Code
3. Menu cpc-menus
CPC-menus is a combination of multiple animation effect on a gradient menu bar. The dropdown css menu appears in a sequence of steps rather than concurrently. This means there’s some delay during appearance for one child menu and the one below it. Basically, there are two animation effects to users attention. The first animation is the slider effect. That is the component currently under hover are highlighted by a mid opacity black background with focused tab head. Moreover, hovering to another component gives a sliding transition effect. The menu component selection doesn’t give a sudden background appearance but shift from previous component. The second animation is the dropdown menu. The first sub menu seems to appear from microscopic size to desired size with delay between each.
Author: Vincent Durand
Demo | Code
4. Pure CSS Menu
The dropdown menu gets the motivation from slider wallet. The sub menu appearance is the main attraction here. While most of the animation in a menu bar consists of top-bottom slider effect, this one consists of a quick unique effect. The sub menus look to be held by a pivot on left side of the menu bar component. Moreover, on hover the sub menus become free to appear on screen while making an arc and creating a pendulum effect just for a moment. There’s no other extra indicator within the menu component to show active status besides different color background. However, sub menu component container slightly expands to show current selection.
HTML and CSS contribute to entire content and effect for this dropdown menu. We haven’t seen JavaScript implementation yet making examples very simple to understand and create.
Author: Adam Kuhn
Demo | Code
5. Fancy Menu
There’s something wrong with this dropdown menu bar. Its the one thing I may complain about. It may not be what you might be thinking. Don’t worry, I’ll tell you. The gradient background selection using css for the menu gives you vibes of a vegetarian content while offering kebabs in the menu. Confusing isn’t it? Besides this there’s not much author has done wrong. The inclusion of relevant icons for menu label makes a good layout. The hovering animation effects include smokey white background with focus on icon and text. This also means that other menu bar components have a default color before selection. The dropdown menu animation is a pull down effect where sub menu slides down from bottom of relevant menu component.
Author: Jesus Rodriguez
Demo | Code
6. Recursive Hover Nav
JavaScript lovers get your head up we finally have a menu besides pure CSS dropdown menu. Along with inclusion of JavaScript we have an additional animation effect. The effect causes the sub menu to appear slowly from either below or from right hand side (for grandchild menu) after hover. Similarly, the sub menu fades away in same direction. However, recognizing the current selection could be a trouble since almost all the menu component are similar. For this reason, you may want to customize the CSS to some extent or implement as it is if you’re happy with it.
Author: sean_codes
Demo | Code
7. Cool Dropdown Menu Effects Pure CSS
Sorry JavaScript lovers we are back to pure CSS menu example. This one looks to be a prototype for twitter. Menu bar itself doesn’t contain anything fancy just a darkened background to show active component. However, there’s two types of dropdown animation. The first dropdown animation is as if the sub menu are folded. Further hovering results the folded content to be released by holding the first sub menu child. The next dropdown animation illustrates top view of a stairs construction. You can choose one or both of the animation effects to give a dynamic feeling to viewers.
Author: Ruslan Pivovarov
Demo | Code
8. Simple Pure CSS dropdown menu with subnav
This type of simple dropdown menu can be seen in some of the native websites specially something relevant to education. The animation effect includes a bottom bar that can be used as a slider to navigate through menu component. The bar also serves as a holder of sub menu. They appear to slide from there on selection or hover. Different but related set of color combination for menu and sub menu bar tends to differentiate them from each other. The menu bar doesn’t require too much effort making it an easy selection for beginners to learn or implement a simple design.
Author: Robert Borghesi
Demo | Code
9. Dropdown Menus
The dropdown menu example is a way to show the creativity in the menu bar. While other menu bar have been a rectangular container, this one contains an irregular shape on the bottom. The irregular bottom is a wave like shape curved downward on normal state and upward with sub menu list on selection. Further, the dropdown animation is a sliding effect from the wave shaped bottom layer.
The menu layout seems to suit website for kids or site offering something fun under different category. Children park as one of the example. The design could also be used for educational sites providing tutorials in a child friendly manner.
Author: Kevin
Demo | Code
10. Menu CSS Only
The idea behind is the use of large menu bars in a grid size. This makes the menu bar the top focus on the website. Hovering on those menu components not only changes the background color but also sets a boundary on two sides: right and bottom. Along with this icons tend to shift up a bit allowing menu label to appear. Initially the menu labels are not present. The component on the menu slightly overlap each other that can be seen when sub menu slides down. Hover on sub menu has similar effects as for main menu with labels shifting slight right.
Author: Ahmed Nasr
Demo | Code
11. Zigzag dropdown menu concept
If you’re looking for to present uniqueness in your website then you need to have a look at this one. You might not have seen something like this before. As you can see below the dropdown sub menu is in a zigzag order. However, they just don’t directly appear in this order. As you select a component from the menu the sub menu move towards slight left and right in an alternate style. They happen in an instant just visible to eyes.
The style can also be used to present something about speed or quick service since inclined structure usually mean the same. Reminds me of Fast & Furious movies. Same for you ?
Author: Catalin Rosu
Demo | Code
12. Pure CSS Drop Down Menu
The plus sign on the menu component aren’t placed manually at first place. The design consists of normal content definition on HTML for menu as well as dropdown menu. You need to include plus sign to appear form the CSS code. For this you need to use the pseudo element which checks if a parent has any child components or is empty. Thus reducing user burden to check menu component for any sub menu. The plus sign makes it very clear in the beginning that sub menu is present and you don’t have to mention it manually.
Author: Andor Nagy
Demo | Code
13. CSS Dropdown Menu
We have another example of simple css dropdown menu. Like the previous example we have a dynamic indicator as ” << ” to show a menu component consists of sub menu. The coding is relatively simple. In HTML you just need to include the menu components and its sub menu in required order. CSS defines the layout, background color along with dynamic indicator after acknowledging the sub menu is present. Moreover, sub menu dropdown is also a simple animation appearing as attachment of menu header. You can use this menu design for any website which is not trying to complicate things.
Author: Amr Subzero
Demo | Code
14. Full CSS3 Dropdown Menu
You have probably seen this stack like side menu example before. They are a popular menu style for sites preferring a simple and beautifully crafted side bar of different utilities action. However, for multiple menu component which will obviously be the case for web apps the design needs to implement similar effect to hold other menu components when sub menu appears. This case might be ignored if you choose to use it as classic menu bar instead in a horizontal tab. The HTML and CSS code for dropdown menu are quite similar to previous list with animation addition for dropdown menu. The design surely reminds of some discussion forum in the web. You have the option to perform actions for certain topic with privileged authorities if signed in as administrator.
Author: daniesy
Demo | Code
15. Main Menu CSS Only
The grid like menu design was first brought by Microsoft. Still, the current OS of Microsoft offers similar view on clicking windows icon at the left bottom corner. While, windows 8 heavily used such menu layout windows 10 uses it relatively less. Furthermore, this type of layout is not limited to header menu. We have seen a number of examples where such style is used for designing mobile themes. It is a default theme for windows phone but is also available in play store.
In this example of menu bar we can see two types of animation. The first one shows a rotating sub menu appear to take required position. The next animation is like releasing a folded papers from top. Nevertheless, both of the contribute to amazing effect.
Author: Mohamed Ayman
Demo | Code
16. Transparent Drop Down Navigation Menu
This dropdown menu bar creates a spotlight of its own without talking the entire focus of the background. This is because the background for menu and dropdown are transparent to some degree. The example illustrates a menu bar for online shop for electronic media or review site for same. Nevertheless, offers a great addition to website with simple HTML and CSS code fro dropdown menu.
Talking about the animation for dropdown menu they seems to appear from a fixed point for each component diverging until they reach the desired size.
Author: Neat Designs
Demo | Code
17. CSS Dropdown Menu
While we have a seen a majority of dropdown menu for the top menu this one is most common for a form or search like operation. You can either choose to set action on hover or on toggle as per your requirement. Besides, HTML and CSS there’s some room for JavaScript code as well to allow users to lock a dropdown menu. Until and unless user doesn’t clicks on outer area the dropdown menu remains intact. Animation is smooth spreading of the the dropdown for pleasant effects. You can use this design in any context of accepting from the listed components from the users.
Author: Eric Sadowski
Demo | Code
18. Molten menu
Molten menu is a unique way to showcase the menu bar. The background animation shows twinkling effects for a number of rhombus. Moreover, the dropdown menu on hover brings the sub menu from inside the icon and then slide them down. The shape is unlike regular box structure rather combination of rectangles with arc dimension on one side. The achievement comes with a price of comparatively lengthy CSS code. With the looks of the layout it seems to be a good element for website dealing with some shapes. They might be engineering consultants, decorators or even a math tutorial site.
Author: Zealand
Demo | Code
19. Simple Pure CSS Dropdown Menu
How about a simple pure CSS dropdown menu with child indicator and highlight on content sound to you? Pretty decent and effective menu isn’t it? A content sharing site and e-commerce sites are likely to use this menu style. It is because the visitors will get to know a slight description or should I say amount of contents offering. You’re looking to purchase a new mobile and say visit a site for same. If you see n number of mobile sets available for xyz model in the menu itself you see then you’re more likely to check on them. This comes from the fact that users immediately get to know about the major contents.
Whenever someone is looking for something, they prefer to have some set of variable available like few examples on recursive function or multiple solutions to a math problem. Hence, this brings a sense in users that they are most likely to find a match for them within such variation.
Author: Connor Brassington
Demo | Code
20. Menu By Marco Besagni
The appearance and styling for this dropdown menu makes it a good component for a game menu. You have obviously played some video games in the past and don’t you think this one resembles to few of them. Mostly, games related to outer space, games including techs we may seen in the future or classic combat games such as Tekken seems to have similar style.Furthermore, even character selection can make use of this layout with characters available appearing focused and ones to be unlocked as faded.
Author: Marco Besagni
Demo | Code
21. Pure CSS dropdown menu
The pure CSS dropdown menu offers a professional way to present a business. It gives you a vibe that the organization, company or individual means serious business. Why so? For the answer go and search a number of law firms and compare the number of counts. Majority of them will resemble this layout. The menu design is straight to the point. You have a logo in the beginning for short introduction of yourself, on the menu tab you can find about component for further introduction details, work or portfolio comes next to say why you should choose us and then contact us if we can work together. Thus, that’s it; no messing around, you exactly know what we do, what we have done and what we can do for you. Subsequently resulting in simple, clear and effective message delivery.
Author: Sathish Kumar
Demo | Code
22. Simple, CSS only, responsive menu
The responsive dropdown menu gives a animated feeling without even showing any animation. With the background color selection and initial header layout its hard to say there’s no animation involved at any time. Initially, the layout is like that of a food truck with tents in the front. In addition to that header menu is like an actual food menu. So maybe this could be a food ordering side or restaurant management system layout as most common use. However, in on way the layout is just limited to that.
Talking more about the effects in the layout, the sub menu occupies size to two main header with focus only on hovering. The responsive menu bar has a black background changing into white for current menu component selection and its sub menu. A good choice of color usage to say the least.
Author: John Urbank
Demo | Code
23. CSS Dropdown Menu
The final HTML and CSS dropdown menu on the list offers a good way to include the main menu and a supporting slider or cover image intact. This simple design visually enhances the website. Animation effects include a simple hidden and block display for sub menu upon hovering. Furthermore, simple darken background for current component selection makes it easy to distinguish from others. Additionally, a feature that we discussed previously on number of content offering shown on sub menu itself is helpful.
You can simple implement the HTML and CSS code for the dropdown menu from link below.
Author: Genesis Gabiola
Demo | Code
Conclusion
Having a dropdown menu on your website is a huge game changer. Navigation link should be within the reach of users anytime and in a clear way as well. This improves user readability and in term results a good user experience. So, that’s it for playing with HTML and CSS for great dropdown menu for the day. Check our contents for more articles for designers.