Off-Canvas Menu Effects
By Mary Lou on
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. ...
menu
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. ...
Creative CSS3 Animation Menus
By Mary Lou on
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 ...
Blur Menu with CSS3 Transitions
By Mary Lou on
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 ...
Animated Text and Icon Menu with jQuery
By Mary Lou on
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 ...
Sliding Background Image Menu with jQuery
By Mary Lou on
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 ...
Moving Boxes Content with jQuery
By Mary Lou on
Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at ...
Expanding Image Menu with jQuery
By Mary Lou on
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 ...
Animated Content Menu with jQuery
By Mary Lou on
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 ...
Collective: Cursor following menu
on
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/ ...
Overlay Effect Menu with jQuery
By Mary Lou on
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 ...