20个实现响应式菜单的实用CSS代码片段
Responsive web design has been around for years but it’s still undergoing tremendous improvement. Not all designers have caught onto this technique and others who have are working hard to build it out further. Although responsivity should be applied to every part of a layout, the navigation menu is one area that deserves extra attention.
The following responsive code snippets are perfect for any type of layout. You’ll find vertical and horizontal navs with dropdowns and slideouts and all kinds of animation effects. Responsive design is an emerging technique with cool new trends every year. These useful snippets are perfect for designers to seize and use as a launch pad for other web projects.
If you’re looking for complete responsive navigation solutions, you should have a look at this post.
CSS-Only Dark Menu by John Urbank
I love the striped border and dark color scheme paired with this menu. Yet moving beyond the design we find an exceptional responsive dropdown. The navbar remains horizontal with typical dropdowns until the window resizes smaller.
Beyond this responsive breakpoint the navigation becomes fullscreen with each sub-menu differentiated by a lighter grey background. This is perfect for websites that don’t have too many links so they can display as block elements on the page.
Full Responsive Portfolio by Celine
Celine put together this full responsive portfolio layout which incorporates a simple yet efficient navigation bar. Once the layout becomes too small the links hide away behind a toggle menu. The user can then click to expand/contract the menu as a block of links slide down underneath the header.
Bootstrap Navbar by Bobby
Every developer should know about Bootstrap and its immense value to expedite frontend work. This code snippet holds multiple breakpoints and runs on top of the Bootstrap framework.
Nav links positioned alongside the logo will eventually drop down onto their own section of the header. Once resized even smaller the links hide away in a toggle menu. This is a very common technique because it works in all browsers and visitors typically know what to expect.
Clean Dropdown Toggle by Boyd Massie
If you’re looking for something simple that can work on any website then look no further. This flat responsive navigation includes dropdown menus built with pure CSS.
In a responsive state the navigation turns into a flyout menu where links appear in block format. Each internal dropdown menu can still be toggled which grants access to sub-nav elements without sacrificing screen space.
Animated Sliding Bar by Antoine Vinial
This expandable sliding bar is one of the most unique navigation examples. You’ll notice a light green tab that, when clicked, heightens the top navigation bar so links can be seen. Each link is fluid-width and designed to fit perfectly with any screen dimension.
On smaller screens this same effect holds true, but the menu appears vertically instead of horizontally. Take note of the beautiful animation effect which is controlled through a CSS .active class.
Basic Responsive Menu by Ash Neilson
At first glance this menu seems pretty generic: traditional links, hamburger sliding nav, and flat color scheme. Although it doesn’t have glam, the menu works and runs with the highest level of usability in mind. The entire pen has been coded with HAML and SASS which are both excellent additions to any web dev workflow.
Sliding Drawer Hamburger Nav by Hanlin Chong
Sliding drawer menus have created a storm of animosity between designers & developers. Some devs like the effect because the menu holds a lot of content. Other devs criticize this type of menu because the links are hidden from view.
For this reason sliding drawers should be used sparingly, primarily when a site has a lengthy navigation. And if you’re looking for a template then consider using this pen as your codebase. It’s a surprisingly simple effect to recreate and most visitors will be familiar with how it works.
Single-Page Mic Nav by Travis
Here’s an interesting recreation of the navigation effect found on Mic.com. The links take up a majority of the screen and use background patterns to create the dot-matrix effect. It’s not exactly practical but it can be restyled and put into creative projects or web portfolios.
Tuts+ have published a four part series that explores a number of responsive navigation patterns.
The four tutorials look into how to develop navigation systems yourself, and explores everything from top nav bars, through select dropdowns and footer patterns, to off-canvas navigations.
Morphing Circular Menu by Sergio
Let’s get a little experimental with this animated morphing circle navigation. Your initial assumption may be that the nav works as a typical sliding drawer. But after clicking the hamburger icon you’ll notice a heavily customized morphing effect.
This should be considered more avant-garde and less likely to find its way into commercial work. But it’s still a wonderful example of how responsivity can open the doors to creativity.
Pure CSS Flexbox Nav by Joe Watkins
CSS3 Flexbox is a term used by developers to reference the flexible model of CSS3 layouts. CSS-Tricks wrote a comprehensive Flexbox guide which is a must-read.
Anyways this navigation is built to run on the flexbox model where links are spaced evenly regardless of screen size. Everything has been coded using pure HTML/CSS and it even supports multi-level dropdown menus.
Animated Toggle by Joe Baggaley
If you like animated effects then you may enjoy this customized navigation. By default the links align next to each other and support a tier of dropdown sub-menus.
Once the browser is shortened the nav is hidden behind a toggle link. The menu converts into a large block which animates into view when toggled.
Flexible Nav Menu by gantit
Utilizing multiple breakpoints in a responsive design is one of the most pragmatic choices you can make. That’s why I really love this navigation because it demonstrates how a typical horizontal navigation can go through many different phases. This snippet offers a lot of flexibility and would fit perfectly into any website.
Pure CSS Tabs by Martin Gajdičiar
Tabs are considered a viable source of navigation for traversing pages and internal content. When these tabs are resized smaller they behave like a regular block-level navigation with animation effects. The design style is also quite simplistic and easy to expand on a whim.
Pure CSS Breadcrumbs by Oliver Knoblich
Breadcrumbs fall into a similar category as tabs since they’re not too popular, yet they can be used as reliable interfaces for navigation. These breadcrumbs don’t feature animated effects but they do render perfectly in CSS.
Batman Nav by Mighty Shaban
Although I’m not totally sure why this is called the Batman Nav, it’s definitely the hero we all deserve. The links are fitted to a single-page layout with scroll effects that slide to different areas of the screen. When resized, the horizontal links are positioned vertically behind a hamburger menu.
Every animation in this pen is relevant and on point. In fact the whole layout is simply beautiful. This could be a useful template for any single-page layout with the added bonus of Batman-approved animations.
Multilevel Dropdown by Stéphanie Walter
It takes careful planning to build a compatible multilevel navigation. This example not only works but also supports responsive effects via CSS. When the nav is resized users can click an icon next to certain links that display internal sub-menus. This technique will keep your responsive menu clean and easier to maneuver.
Pure CSS eBook Webapp by Andy Fitzsimon
Here’s yet another example of a fully customized webapp. The interface was designed to mimic a typical iOS application with navbars at the top and bottom of the screen. CSS Flexbox can be found in the whole layout as nav links and page elements resize proportionally to fit any browser window.
Equal-Width Navigation by Dorijan Covran
This classic design style focuses on equal-width links for the navigation bar. Each link takes up an equal percentage of the screen horizontally until the responsive breakpoint activates. A hamburger toggle opens & closes the responsive nav in a vertical fashion. Short, sweet, and definitely satisfying.
Stylized Multilevel Navbox by Andrew DeBroux
The blog Codrops published a multi-level nav tutorial which creates paged navigation for sub-menus. The effect was replicated and combined with a responsive menu to create this pen. The menu is surprisingly flexible and rather unique compared with other responsive examples.
Dynamic Sliding Menu Bar by Philippe Fercha
Last but not least is a personal favorite of mine found on CSS Deck. This nav is toggleable from any point on the site. The nav links expand into view but instead of coming out form the toggle icon they slide in from offscreen.
The links float horizontally on larger screens and break down into a vertical box when viewed on smaller screens. I particularly adore the animation because it’s so free-flowing and natural to the layout. This may be a somewhat complicated responsive menu but it’s sure to catch your eye.
Wrap-Up
The depth and breadth of responsive navigation is enough to leave any frontend developer giddy with exhilaration. Responsive design is more than just a design trend – it’s a complete layout style up there with fixed and fluid layouts. Navigation is often one of the trickier areas in responsive web design but these snippets can offer both inspiration and code samples for creating your own ideas.