Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Jangan lewatkan pokoknya. Nih, buka link demonya dan cermati sensasionalnya si menu.
View Demo
Bagaimana ? Bagus tidak ?
Mau buat seperti itu ?
Cara Membuat Super Animated CSS3 Navigation Menu
Langkah 1
Langkah 1
- Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
- Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
- Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
- Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.
.Hansuperanima{5. Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS di atas
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;
}
6. KLIK SAVE Template (Simpan Template).
Langkah 2
<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://deejayhan.blogspot.com">Tutorial Blogger<br /><br /><span>Tutorial Blogger</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://google.com">Google<br /><br /><span>Google</span></a></li>
<li><a class="anima" href="http://facebook.com">Facebook<br /><br /><span>Facebook</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
</ul>
</div>
- Simpan xHTMl melalui penambahan widget. Sampeyan ikuti seperti langkah di atas (login), hanya setelah masuk di Page Element (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang di bagian header atau di bawah header, baru kemudian KLIK "HTML/Javascript". Copy x-HTML dan pastekan di box penambahan widget.
- KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
- Sesuaikan width dengan jumlah menu dan lebar ruang yang ada dengan mengatur width pada syntax ul#superAnima {width: 590px;}
- Posisi navigasi menu dapat diatur melalui perubahan nilai margin di syntax .GRsuperAnima {margin: 15px 0 0 10px;}
- Secara berurutan dari 15px 0 0 dan 10px digunakan untuk mengatur jarak dari sebelah atas, kanan, bawah dan kiri. Margin juga bisa bernilai negatif.
Keterangan :
- Yang teks berwarna Merah adalah link / url anda
- Yang teks berwarna Kuning adalah teks sesuai anda inginkan
Semoga Bermanfaat :)
Description: Membuat Super Navigation Dengan CSS3
Rating: 4.5 4.5