Grow your CSS skills. Land your dream job.

Last updated on:

Spinny Leaf Menu

<nav>
  <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>
  </ul>
</nav>
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; }

Reference URL

Comments

  1. Chris
    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. That is awesome man Gona use it some where ! Just wow ..Users will keep on playing with it !

  3. sonusmac
    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. Bipin
    Permalink to comment#

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

  5. wahid
    Permalink to comment#

    Its awesome man!!

  6. Ben
    Permalink to comment#

    My screen flickers black at the end of each transition.

    Does anybody else get this issue? (Chrome 12.0.742.122)

    • Blake
      Permalink to comment#

      yep. thought i was blinking involuntarily or something.

    • Robbie
      Permalink to comment#

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

  7. 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. Ly
    Permalink to comment#

    This is very cool !

  9. Raj Kumar Mishra
    Permalink to comment#

    Hi,

    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. This is really awesome, great work! :)

  11. Permalink to comment#

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

  12. mayur
    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. Permalink to comment#

    This is really very nice! :)

  14. yogesh
    Permalink to comment#

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".