One of the most important elements when designing a website to be mobile friendly is of course, the navigation. If you’re looking for excellent examples of navigation menu design, here’s some of cool techniques for handling navigation in responsive designs.
A responsive navigation menu that stacks items into a dropdown menu when they overflow. A hamburger style button with count badge appears when there are hidden items to reveal.
Menu in the shape of an hexagon. The menu items are featured on the burger click. A hover effect features title and subtitle. It uses CSS3 2D and 3D transitions.
Smooth circle animation for menus
A different approach
Click the hamburger icon and watch as the track list springs into the window.
Simple pulldown/hamburger menu
Just a really simple, reusable, pulldown menu that closes automatically with minimal code and opens with slick animations.
Navigation reveal idea
Collapsible nav with burger menu, no JS
Atomic Hamburger Menu CSS
Just pull down and release to jump between pages.
iOS style sliding menu
Here’s an easy way to create an iOS style, side sliding menu.
Responsive navigation menu
Responsive CSS3 Side Navigation Menu
Media Queries Transitions (resize the window slowly to see the transitions), nav items slide out on hover when it collapses on smaller screens.
Pure CSS off-canvas menu with flexbox
Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width.
Touch device jelly menu concept
Use PaperJS for the canvas graphics and TweenJS for the animations. Both of them tend to freak out some folks, but don’t worry, they are really intuitive and easy to understand.
Line Menu Icon that Expands Into Actual Menu
It’s smallen-ized through CSS transforms and then expands when you click on it by adding a class. Some elements are hidden when small to make it seem like a simplified icon.
The Backside Menu Flip
A responsive navigation pattern whereas the nav (under 768px) is located on the “backside” of the page content.
Offcanvas sidebar menu with a twist
Menu items will flow out of container given window height below roughly 700px.
Material Design Hamburger
Android’s Material Design hamburger animation built in CSS (with a sprinkle of JS).
Side Menu Staggered Animation
Full-Screen Menu Overlay
A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.
Elastic SVG Sidebar Material Design
Completed without any animation libs, just simple js with requestAnimationFrame and custom easings.