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.
Related article: Introduction to CSS3 Animation
CSS-Only Dark Menu By John UrbankI 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 CelineCeline 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 BobbyEvery 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 MassieIf 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 VinialThis 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 NeilsonAt 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 ChongSliding 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 TravisHere’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.