Author: | bennettfeely |
---|---|
Views Total: | 6,038 views |
Official Page: | Go to website |
Last Update: | October 21, 2014 |
License: | MIT |
Preview:

Description:
A creative pure CSS navigation system that expands to a drop-down menu list with subtle CSS3 transitions when hovered, inspired by Google Material Design.
How to use it:
Create a regular navigation with a menu icon and a list of menu items.
<nav> <div class="navicon"> <div></div> </div> <a>Home</a> <a>Categories</a> <a>Recommended</a> <a>Blog</a> <a>Contact</a> </nav>
Animated the navigation using CSS3 transitions.
nav { width: 300px; background: white; color: rgba(0, 0, 0, 0.87); -webkit-clip-path: circle(24px at 30px 24px); clip-path: circle(24px at 32px 24px); -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s; transition: -webkit-clip-path 0.5625s, clip-path 0.375s; } nav:hover { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-duration: 0.75s; transition-duration: 0.75s; -webkit-clip-path: circle(390px at 225px 24px); clip-path: circle(390px at 150px 24px); } a { display: block; line-height: 50px; padding: 0 20px; color: inherit; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a:hover { background: #ffe082; } a:active { background: #ffca28; } .navicon { padding: 23px 20px; cursor: pointer; -webkit-transform-origin: 32px 24px; -ms-transform-origin: 32px 24px; transform-origin: 32px 24px; } .navicon div { position: relative; width: 20px; height: 2px; background: rgba(0, 0, 0, 0.87); } .navicon div:before, .navicon div:after { display: block; content: ""; width: 20px; height: 2px; background: rgba(0, 0, 0, 0.87); position: absolute; } .navicon div:before { top: -7px; } .navicon div:after { top: 7px; }
it is beautiful but not practical cause it’s not a menu. its simply a mask over a menu!
the menu content should be inside the circle btn and just appear after hover on it. not like this