Cara Membuat Menu Navigasi Horisontal Animasi CSS3
- Tutorial kali ini saya pastikan akan membuat tampilan blog sobat
lebih bergairah, setelah beberapa waktu yang lalu menerbitkan artikel
tentang
membuat menu horisontal animasi menyamping ( KWICKS )
kali ini kembali saya akan memposting artikel serupa namun berbeda.
Bedanya dimana?? nanti sobat blogger yang nilai sendiri. Silahkn ikuti
tutorial singkat berikut untuk
membuat menu animasi mendatar dengan CSS3.
DEMO
1. Login ke akun blogger sobat
2. Klik Rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode
]]></b:skin>
.Hansuperanima{
position:relative;
margin:15px 0 0 10px;
overflow:hidden;
margin:0;
float:left;
padding:0;
background:#1d1d1d
url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{
width:599px;
margin:10px 0 20px;
padding:0;
margin:3px 4px 3px 4px;
clear:both;
float:left;
}
ul#superAnima li{
margin:0;
padding:0;
overflow:hidden;
float:left;
height:40px;
}
ul#superAnima li a.anima{
padding:10px 10px;
font:10px Arial;
float:left;
color:white;
text-decoration:none;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
clear:both;
height:18px;
line-height:20px;
background:white
url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif)
top left repeat-x;
text-align:center;
transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
font-weight:bold;
border:1px solid #999;
}
ul#superAnima li a.anima:hover{
transform:scale(1.0) rotate(0deg) translate(0, -40px);
-o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
-moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
-webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
-ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span{
padding:10px 9px;
color:transparent;
opacity:0.2;
filter:alpha(opacity=20);
border:2px solid transparent;
transition:all 1.6s ease-out;
-o-transition:all 1.6s ease-out;
-moz-transition:all 1.6s ease-out;
-webkit-transition:all 1.6s ease-out;
-ms-transition:all 1.6s ease-out;
transform:scale(8.0) rotate(0deg) translate(0,-10px);
-o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
-moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
-webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
-ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}
ul#superAnima li a.anima span:hover{
opacity:1.0;
filter:alpha(opacity=100);
padding:4px 9px;
height:18px;
transform:scale(1.0) rotate(0deg) translate(0,0);
-o-transform:scale(1.0) rotate(0deg) translate(0,0);
-moz-transform:scale(1.0) rotate(0deg) translate(0,0);
-webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
-ms-transform:scale(1.0) rotate(0deg) translate(0,0);
color:#FF0;
border:2px solid #000;
background:#555;
text-shadow:1px 1px 1px #000;
box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
border-radius:4px;
}
ul#superAnima li{
border:1px solid transparent;
background:#CC9933
url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover{
background:#000
url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
border:1px solid #777;
}
Catatan:
Sesuaikan kode angka yang berwarna
biru dengan ukuran template.
4. Klik save dan lanjut ke tahap ke 2.
5. Klik Rancangan --> Elemen laman
6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript..
7. Masukkan kode berikut kedalam kotak HTML/Javascript.
<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="
http://fiqih96.blogspot.com">
Home<br /><br /><span>
Home</span></a></li>
<li><a class="anima" href="
http://Fiqih96.blogspot.com/feeds/comments/default">
Comment<br /><br /><span>
Comment</span></a></li>
<li><a class="anima" href="
http://fiqih96.blogspot.com">
fiqih Community<br /><br /><span>
Fiqih Community</span></a></li>
<li><a class="anima" href="
http://facebook.com/fiqih99">
My Facebook<br /><br /><span>
My Facebook</span></a></li>
<li><a class="anima" href="
http://twitter.com/fiqih96">
My Twitter<br /><br /><span>
My Twitter</span></a></li>
<li><a class="anima" href="
http://fiqih96.blogspot.com/feeds/posts/default">
Feed Blog<br /><br /><span>
Feed Blog</span></a></li>
</ul>
</div>
Silahkan ubahsuaikan semua kode yang bercetak
tebal ( bold ) sesuai keinginan. Sekian tutorialnya dan semoga membantu..
