Spinny Leaf Menu

  <ul class="top-menu">
    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
    <li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
nav {
	width: 960px;
	height: 100px;
	margin: 120px auto;
	text-align: center;
.top-menu li {
	display: inline-block;
	text-align: center;
	margin: 30px 5px;
	position: relative;
	-webkit-transition: all 0.3s ease; 
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
.top-menu li:hover {
	margin: 30px 20px; 
.top-menu li:active {
	margin: 30px 33px; 
.top-menu li a  {
	width: 100px;
	height: 100px;
	z-index: 9999;
	position: absolute;
	top: 35px;
	font-weight: bold;
	display: block;
	text-decoration: none;
	font-size: 20px;
	color: #fff;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
	-webkit-transition: all 0.1s linear; 
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
.top-menu li:active a {
	font-size: 26px;
	top: 30px;
	text-shadow: none;
.top-menu li div.menu-item {	
	width: 100px;
	height: 100px;
	display: block;
	-webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-border-top-left-radius: 100px; 
	-webkit-border-bottom-right-radius: 100px; 
	-moz-border-radius-topleft: 100px; 
	-moz-border-radius-bottomright: 100px; 
	border-top-left-radius: 100px; 
	border-bottom-right-radius: 100px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
.top-menu li:hover div.menu-item{ 
	-webkit-border-top-left-radius: 80px; 
	-webkit-border-bottom-right-radius: 80px; 
	-moz-border-radius-topleft: 80px; 
	-moz-border-radius-bottomright: 80px; 
	border-top-left-radius: 80px; 
	border-bottom-right-radius: 80px; 
		-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-o-transform: rotate(225deg);
.top-menu li:active div.menu-item{ 
	-webkit-border-top-left-radius: 50px; 
	-webkit-border-bottom-right-radius: 50px; 
	-moz-border-radius-topleft: 50px; 
	-moz-border-radius-bottomright: 50px; 
	border-top-left-radius: 50px; 
	border-bottom-right-radius: 50px; 

#home { background: #41D05F; }
#cataloge { background: #E42B2B; }
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }


  1. User Avatar
    Permalink to comment#

    That’s pretty cleaver but me been me i like to find bugs and indeed i found one, if you hover your mouse close enough to the edge of the leaf the transition goes nuts and you get this kind of unexpected but cool looking 3D warp. Other then that it works very well :D

  2. User Avatar
    Ahmad Awais
    Permalink to comment#

    That is awesome man Gona use it some where ! Just wow ..Users will keep on playing with it !

  3. User Avatar
    Permalink to comment#

    This is really amazing thanks.. Ahmad is right users will keep on playing with it.. as I was playing for minutes!!

  4. User Avatar
    Permalink to comment#

    This intresting article.then thank u……this very clearly understand with my knowledge…

  5. User Avatar
    Permalink to comment#

    Its awesome man!!

  6. User Avatar
    Permalink to comment#

    My screen flickers black at the end of each transition.

    Does anybody else get this issue? (Chrome 12.0.742.122)

    • User Avatar
      Permalink to comment#

      yep. thought i was blinking involuntarily or something.

    • User Avatar
      Permalink to comment#

      I get the same exact problem for all CSS transitions, on any site, when I’m using Chrome.

  7. User Avatar
    Permalink to comment#

    Very cool! must find a place to use this.

    @Ben: With the exact same version of Chrome, I don’t get the flicker you mentioned.

  8. User Avatar
    Permalink to comment#

    This is very cool !

  9. User Avatar
    Raj Kumar Mishra
    Permalink to comment#


    awesome work! cool transition and eye catching too. but as usual(with IE) there is an issue with different versions of IE. None of the version of IE display proper menu. In IE8 and IE7 you can not even get the alignment and transition, some how it works on IE9 but misalignment. Rest browsers it works nice.

    Well Done :) !!!

  10. User Avatar
    Paul Santosh
    Permalink to comment#

    This is really awesome, great work! :)

  11. User Avatar
    Permalink to comment#

    This Indicates the power of CSS3. Awesome and great works. Thanks for sharing.

  12. User Avatar
    Permalink to comment#

    I found something unusual. Just click any leaf over there and do not release your mouse.
    Now drag your mouse out of leaf .
    Release your mouse click .
    The leaf and font remains expanded .

    Please try the same.

  13. User Avatar
    Permalink to comment#

    This is really very nice! :)

  14. User Avatar
    Permalink to comment#

    how to make it vertical? I have vertical menubar….

  15. User Avatar
    Permalink to comment#

    how can i change the shape?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.