Tutorial : Navigation with Hover (Part Three)

Assalamualaikum & Salam Sejahtera

Yoo. dah lama nak bagi dekat korang tutor menu tab with hover atau pon simple navigation . version ni agak unik sikit , sikit jela . tak banyak pon . actually aku belajar dekat SINI . so dah edit code dia sikit sikit macam yang korang tengok dekat live preview . kalau nak guna , sila komen . dah guna sila credit . sebab code nya agak complicated . 

 LIVE PREVIEW HERE

Amacam . berminat tak ? haha . meh sini nak ajarkan .

Template Designer :

Dashboard > Layout > Add a Gadget > HTML / JavaScript .

Pastu copy and paste code dekat bawah ni .

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}.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; }
</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>

Save and siap .


Classic Template :

Dashboard > Template 

Copy code bawah ni . PASTE dekat ATAS </style>

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}.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 . 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>

Save and siap .

p/s : anda tak disarankan untuk ubah mana mana code selain dari code color . sebab takut dia tak jadi macam mana yang aku punya preview . :)