We’re long past the days of every business website being a simple 5-page static design. These still exist, but most sites prioritize high volume content and navigation menus have to support a dozen different page links.
There’s only so much room on a monitor for links and that’s why dropdown menus are so popular. They have been for decades and in recent years they’ve become a staple in web design. You can build them with JavaScript plugins and even pure CSS.
But how you code a menu doesn’t matter as much as the design and user experience.
I want to delve into some modern dropdown navigation trends for web designers. You’ll find plenty of examples using many different design styles that you can replicate, clone, and reframe to suit your own needs.
Tiered Menus
This is perhaps the most obvious dropdown style that most people recognize. It’s pretty simple to create a single dropdown that flows from one link in the navigation.
But how do you add a second dropdown attached to links in the first dropdown? This follows a tiered system where you have 1st and 2nd tier navigation menus, and in modern web design this is basically the norm.
Take a peek at the “features” dropdown in the Newshub design. This theme uses many different dropdown styles to showcase what it can do, notably the multi-tier effect which is very common for business websites.
You’ll notice those links have a right bracket icon signifying they have an attached dropdown menu. Granted you don’t always need a symbol for tiered menus. But the symbol clarifies intent and makes browsing the navigation a whole lot easier.
I also like the small animation you get when hovering over these links. The text animates to the right and an arrow icon slides into view. Again not necessary but a nice addition for a tiered menu.
For a different flyout style check the Admiral demo theme. Each link uses a right facing double arrow known as a guillemet.
These icons can draw more attention to the links but any icon will do. One thing about this menu is that it feels much more firm.
When you hover a tiered link the flyout menu just appears without any animation effect. This can feel harsh or strict because most dropdown menus have some type of fading or sliding animation.
The only thing you’ll find is the orange border that slides into view on each menu. It’s a nice highlight but certainly not perfect.
These two demos work similarly but they’re designed with different aesthetics. You can find literally thousands of dropdown menu styles on the web so I encourage you to search around and find as much inspiration as you can.
Multi-Column Menus
Modern browser specs allow for some crazy dropdown styles. The newest trend is a multi-column dropdown menu that spans the entire page body with multiple columns of links. Some designers call this a “mega menu”.
I find this works best on larger blogs or magazine-style sites, but can also work for companies that have dozens of sub-links in each section.
The Nota theme is a nice example of different multi-column menus in action. If you hover the “shop” and “portfolio” links you’ll find the sub-links organized into columns. But the shop menu includes a small feature on the right-hand side.
If you want a simple multi-column menu then the “portfolio” link dropdown in the screenshot above is perfect. Each link column has its own header and the internal links are easy to browse. Sometimes this can even save you from building a tiered nav menu because all the links can fit into multiple columns.
Sometimes these menus are fixed to the content width so they’ll only be as wide as the page. Other times, like with the Creativa theme, you’ll find column dropdowns that take up the entire page width.
This design is crystal clear and uses high contrast colors to draw attention to the links. Again each column has its own title and the links are placed prominently in a line.
Some of the lengthy menus like the “portfolio” dropdown actually have more columns beneath the existing columns. Even with super wide menus it can still be difficult keeping all these links together. But there’s no harm in dropping columns underneath if there’s room for them.
I also like the News/Magazine theme dropdown which you can see by hovering the “more” link. This technique is handy for sites with dozens of categories that should be in the navigation but can’t squeeze together.
A “more” link with a dropdown lets visitors check out all the categories at once. And the column structure works well so links can be organized into rows which makes them easier to skim.
Consider each project you design from a content-first approach. How many pages need to be linked in the navigation? How much room is available for links in the dropdown?
By asking these questions you’ll have a much easier time designing the dropdown and customizing link placement.
Custom Menu Animations
There’s no shortage of animation on the web and new techniques are constantly finding their way into modern layouts. Dropdown navigations can use all sorts of animations that draw attention to the menu and breathe life into the page.
The Grayson layout uses a very simple animation that’s common on most websites. The dropdown menus slide down into view and they slide up to hide.
You’ll rarely go wrong with this effect because it’s the natural idea of a “drop” down menu. But the dropping animation has to feel natural and it should be super basic to blend into the design.
There are many other animations you can try but none are better or worse. Just different solutions for different designs.
For example Educa uses fade-in effects for menus that appear underneath the main nav bar and showcase lists of links. These menus have a combo of fading into view and moving up towards the navbar.
This animation can feel contradictory to the idea of dropping down. But this contraction also makes the animation stand out.
In the Fixit theme you’ll find a more natural version of the dropdown effect.
This uses a lengthier animation to slowly drop every link into view over a couple seconds. Depending on how fancy you want to get this might be a little “too much” since it forces visitors to wait around for the effect to complete.
But one other minor animation effect is with the tiered menus. In some of the dropdowns you’ll notice links have a small plus sign next to the text.
If you hover over the links these plus signs animate into minus signs and then a sub-menu appears off to the side. This is a very small effect but it’s noticeable enough to clarify intent and give the user some feedback to their action.
But simple dropdown animations aren’t the only limitations. You can actually push much further and even create 3D animations with JS/CSS3.
Take for example the VG Labo theme. It actually has two different drop down menus, one in the top bar and the other in the left-hand menu.
If you hover any links in the top navigation you’ll get a 3D dropdown effect. This is becoming much more common with the advancement of 3D transforms in CSS.
But don’t go with 3D just because it’s fancy. You should always design with each site’s best interest in mind. If you’re willing to branch out then 3D can be a really fun area to explore.
Thankfully with so many animation styles your options are practically endless.
Well-Designed Menu Content
What good is a nav menu if nobody can use it? Fancy animations and huge mega menus are only as good as their designs and functionality.
But it doesn’t take much to create a brilliant navigation. Most ideal design features are true with all areas of web design: use high contrast text, legible typography, and make sure the menu takes precedence over the surrounding content.
The Cosmic theme is a great example of a simple dropdown menu design.
Each menu has lighter text on a darker background making the links easy to read from a distance. They also use all caps to distinguish from other text on the page.
Since these menus drop down over the page it’s easy to lose focus and find yourself scanning nearby text. But this simple yet distinct style is exactly what you need to keep attention where it belongs.
However you can design menus with the same BG color so long as they stand out and feel like they’re on top of the page. The Jolie dropdown menus all use white backgrounds on top of a white webpage.
But the menus all have subtle drop shadow effects off the sides. This is useful for two reasons.
First the shadows distinguish the menu background from the page background. And the shadows also visually create depth on the page making the dropdown menu feel like it’s spatially above the rest of the page.
Even a subtle dropdown effect with a light border is enough to bring attention where it belongs. One other thing I like about this design is the extra white space found between each link.
This keeps users focused on a much larger dropdown menu and it makes clicking the links a whole lot easier. Why cram everything together in a tiny box? If you have space on the page you might as well use it.
Another example on the GrandBlog theme uses white backgrounds for the dropdowns and the main page. This dropdown menu includes horizontal borders to break up the individual links. Visually this defines the dropdown menu as a separate element on the page.
These link dividers help a lot with pattern recognition while browsing the menu.
And the nav menu stays fixed while you scroll, so these dropdowns can be triggered anywhere on the page. That’s why some distinction is vital to keep the content visible and easy to browse regardless of what’s in the background.
Ultimately a dropdown menu should be designed with contrast and some differentiating factor to make it sit atop the page. Keeping the menu above the page is accomplished through the CSS z-index property.
But design-wise you’ll want to create some sort of depth to show that the menu is above the page, or that it’s connected with the top navigation bar. Either way it’s a very simple process once you recognize the rules and see what works in practice.
Split Menu Styles
If you want a real creative menu then you can try splitting up content based on varying menu styles. This lets you create dropdowns with diverse content like thumbnails, columns, and other link styles combined into one box.
Hub theme has an interesting example under the “portfolio” link. This uses one very large feature thumbnail to draw attention to a relevant story or portfolio item.
But the other half of the menu organizes links into two columns side-by-side. These might be ancillary links related to the post or they could be related categories.
I like this design because it’s diverse yet not too complex. Any typical viewer should be able to navigate through the menu with ease. And it’s very simple on the eyes too.
Whenever you work with diverse menu styles try to keep them complex within reason. It’s easy to go overboard and confuse half your visitors.
The Success theme offers a great example that businesses can adopt in their layouts.
The “about us” dropdown menu features three different sections. The far left has links to individual about pages, the center has a couple links with thumbnails, and the far right area has content info like address, phone, and e-mail.
Not every business will like this idea. It can be very complex to use and will offer a challenge for responsive design.
But this is exactly the type of split menu design that moves away from the norm to bring a unique user experience to the webpage.
Ecommerce shops can earn a lot using this technique as well. The Fashion Store theme uses a mixed dropdown menu under the “accessories” link in the top navigation.
This dropdown uses columns for content organization but it also has featured images above these columns. Each image represents a larger category of products while the column links delve into greater detail.
Images always catch the user’s attention and draw them towards other elements nearby. This dropdown menu is a very simple design strategy and it can work well for visually-appealing products.
Now if you want something really crazy check out the Labella dropdown menu under the “megamenu” link.
This has basically everything from social profiles to recent products and even a small paragraph for shopper info. I would personally call this menu a bit too cluttered and unfocused to be usable on a real website.
But the beauty is how each part of the menu works together. You can design sites that work with this type of menu, just so long as you have enough links that this makes sense in context.
Try not to think of specific features as bad or unusable. Instead think of your current project goals and consider what type of dropdown menu(s) would fit best. From there you can combine features like style, position, and animation effects.
Wrapping Up
Every site has different goals and uses dropdown menus for different reasons. But the strategies for creating and designing them are often similar regardless of the content.
All the trends in this guide feature modern dropdown menu ideas for modern website designs. Most layouts work with dropdown menus and revert to a responsive solution for smaller screens. If you follow these trends combined with your own ideas you’ll have no trouble creating user-friendly dropdowns for a stellar user experience.
Featured image: KannA
The post Examining Dropdown Menus: UX Animations & Content Structures appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2fiJngs
envato.com coupon
Tidak ada komentar:
Posting Komentar