Expanding Grid Menu
By Mary Lou on
A CSS Grid powered menu with a box look inspired by the effect seen in the "Ableton Live 10: What's New" video. ...
menu
Dynamic Shape Overlays with SVG
By Yoichi Kobayashi on
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects. ...
Inspiration for Menu Hover Effects
By Mary Lou on
Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations. ...
Expanding Bar Navigation Concept
By Mary Lou on
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked. ...
Inspiration for Line Menu Styles
By Mary Lou on
Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection; contributions are welcome! ...
Multi-Level Menu
By Mary Lou on
A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button. ...
Animating an SVG Menu Icon with Segment
By Luis Manuel on
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating S ...
Page Stack Navigation
By Mary Lou on
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation. ...
Creative Gooey Effects
By Lucas Bebber on
A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components. ...
Off-Canvas Menu Effects
By Mary Lou on
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. ...
Perspective Page View Navigation
By Mary Lou on
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mob ...
Animated Border Menus
By Mary Lou on
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps. ...
Multi-Level Push Menu
By Mary Lou on
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. ...
Google Nexus Website Menu
By Mary Lou on
A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website. ...
Tooltip Menu
By Mary Lou on
A simple tooltip menu where the submenu will either appear above or below the main menu, depending on available space. ...
Horizontal Slide Out Menu
By Mary Lou on
A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices. ...
Responsive Retina-Ready Menu
By Stéphanie Walter on
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. ...
Simple YouTube Menu Effect
By Mary Lou on
A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item ...
Responsive Multi-Level Menu
By Mary Lou on
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. ...
Slide and Push Menus
By Mary Lou on
Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. ...
Vertical Icon Menu
By Mary Lou on
A fixed vertical icon menu that adjusts its size for smaller screens. ...
Horizontal Drop-Down Menu
By Mary Lou on
A responsive horizontal drop-down menu inspired by the Microsoft.com menu. ...
How to create animated tooltips with CSS3
By Mary Lou on
How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after ...
How to spice up your menu with CSS3
By Mary Lou on
Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover. ...