Tutorial : Kiut Leaves Menu

Template Designer :

• Copy code di bawah dan paste ke dalam HTML/Javascipt

<style>.top-menu li {display: inline-block;text-align: center; font: Trebuchet MS; margin:10px 24px;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: 10px 24px; }
.top-menu li:active {margin: 10px 33px; }
.top-menu li a  {width: 95px;height: 90px;position:absolute;z-index:9999;top:42px;display:block;text-decoration: none;text-align:center; font: Trebuchet MS;font-size:12px;color: white;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li a:hover  {color:#000}
.top-menu li:active a {font-size:12px; top:37px;text-shadow: none;text-align:center;}
.top-menu li div.menu-item {width: 90px;height: 90px;display: block;border:3px solid #fff;box-shadow:0px 0px 2px #333;-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);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.top-menu li:hover div.menu-item{-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(225deg);-moz-transform: rotate(225deg);-o-transform: rotate(225deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;}
.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; }
#tutor{ background:#fbb1b1; }
#affies { background:#fbb1e5; }
#facebook { background:#e2b1fb; }
#twitter { background:#b1bcfb; }
#tumblr { background:#b1fbb3; }
</style>
<div class="separator" style="clear: both; text-align: right;">
<img border="0" src="http://data.whicdn.com/images/58012712/tumblr_m9fyueXQq01qh6ydvo1_400_large.png" /></div><div class="top-menu"><li><a href="LINK GOES HERE">Tutorial</a><div class="menu-item" id="tutor"></div></li><li><a href="LINK GOES HERE">Affies</a><div class="menu-item" id="affies"></div></li><li><a href="LINK GOES HERE">Facebook</a><div class="menu-item" id="facebook"></div></li><li><a href="LINK GOES HERE">Twitter</a><div class="menu-item" id="twitter"></div></li><li><a href="LINK GOES HERE">Tumblr</a><div class="menu-item" id="tumblr"></div></li></div>

Classic Template : 

• Copy code bawah ni dan paste di atas </style>

.top-menu li {display: inline-block;text-align: center;margin:10px 24px;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: 10px 24px; } .top-menu li:active {margin: 10px 33px; } .top-menu li a  {width: 95px;height: 90px;position:absolute;z-index:9999;top:42px;display:block;text-decoration: none;text-align:center;font-family:tt;font-size:8px;color: white;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-webkit-transition-duration:500ms; -moz-transition-duration:500ms;} .top-menu li a:hover  {color:#000} .top-menu li:active a {font-size:20px;top:37px;text-shadow: none;text-align:center;} .top-menu li div.menu-item {width: 90px;height: 90px;display: block;border:3px solid #fff;box-shadow:0px 0px 2px #333;-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);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;} .top-menu li:hover div.menu-item{-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(225deg);-moz-transform: rotate(225deg);-o-transform: rotate(225deg);-webkit-transition-duration:500ms; -moz-transition-duration:500ms;} .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; } #tutor{ background:#fbb1b1; } #affies { background:#fbb1e5; } #facebook { background:#e2b1fb; } #twitter { background:#b1bcfb; } #tumblr { background:#b1fbb3; }

• Code bawah ni pulak dan paste bawah </style>

<div class="top-menu"> <li><a href="LINK GOES HERE">Tutorial</a><div class="menu-item" id="tutor"></div></li> <li><a href="LINK GOES HERE">Affies</a><div class="menu-item" id="affies"></div></li> <li><a href="LINK GOES HERE">Facebook</a><div class="menu-item" id="facebook"></div></li> <li><a href="LINK GOES HERE">Twitter</a><div class="menu-item" id="twitter"></div></li> <li><a href="LINK GOES HERE">Tumblr</a><div class="menu-item" id="tumblr"></div></li> </div>

• Preview dan save jika puas hati
• Edit code mengikut kesesuaian dan keinginan :-)