Off-Canvas Menu Effects
By Mary Lou
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. ... read more
menu
Perspective Page View Navigation
By Mary Lou
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 ... read more
Animated Border Menus
By Mary Lou
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. ... read more
Multi-Level Push Menu
By Mary Lou
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. ... read more
Google Nexus Website Menu
By Mary Lou
A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website. ... read more
Tooltip Menu
By Mary Lou
A simple tooltip menu where the submenu will either appear above or below the main menu, depending on available space. ... read more
Horizontal Slide Out Menu
By Mary Lou
A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices. ... read more
Responsive Retina-Ready Menu
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. ... read more
Simple YouTube Menu Effect
By Mary Lou
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 ... read more
Responsive Multi-Level Menu
By Mary Lou
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. ... read more
Slide and Push Menus
By Mary Lou
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. ... read more
Vertical Icon Menu
By Mary Lou
A fixed vertical icon menu that adjusts its size for smaller screens. ... read more
Horizontal Drop-Down Menu
By Mary Lou
A responsive horizontal drop-down menu inspired by the Microsoft.com menu. ... read more
How to create animated tooltips with CSS3
By Mary Lou
How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after ... read more
How to spice up your menu with CSS3
By Mary Lou
Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover. ... read more
Creative CSS3 Animation Menus
By Mary Lou
Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of ... read more
Blur Menu with CSS3 Transitions
By Mary Lou
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with tex ... read more
Animated Text and Icon Menu with jQuery
By Mary Lou
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the back ... read more
Sliding Background Image Menu with jQuery
By Mary Lou
Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all ... read more
Moving Boxes Content with jQuery
By Mary Lou
Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at ... read more
Expanding Image Menu with jQuery
By Mary Lou
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image sl ... read more
Animated Content Menu with jQuery
By Mary Lou
Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a c ... read more
Collective: Cursor following menu
A website navigation menu that follows the cursor, created with the jQuery framework and CSS that’s easy to implement and configure. Source http://manos.malihu.gr/ ... read more
Overlay Effect Menu with jQuery
By Mary Lou
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with ... read more