Wednesday, May 22, 2013

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 :-) 

2 comments:

farah deena said...

assalamualaikum dan hye .
tahniah !! anda merupakan salah satu pemenang "FIRST GIVEAWAY BY NURANIS AMAR".anda telah menang tpap maxis RM 3.
sila beri maklumat detail nama, nama blog, no tel maxis di https://www.facebook.com/MissDeenaShop . thank you :)

Mas Erma Azni said...

Dah send. Terima Kasih :D