Membuat Menu Super Navigation Dengan CSS3

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?

Oke, sekarang langsung saja saya berikan tutorialnya tentang Cara Membuat Super Navigation Dengan CSS3

1. Masuk ke blogger dan pilih Template ----> edit HTML ----> Proceed---->
Centang Expand Widget Templates
(PERHATIAN: BACK UP DULU TEMPLATE KALIAN)
2. Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan,
3. Letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

.Hansuperanima{
position:relative;
margin:15px 0 0 10px;
overflow:hidden;
margin:0;
float:left;
padding:0;
}
ul#superAnima{
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;
}

4. Lalu simpan

5. Masuk lagi di Page Element (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang di bagian header atau di bawah header, baru kemudian KLIK "HTML/Javascript".
Copy Code Css Di bawah ini dan pastekan di box penambahan widget.

<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://asdharsyaputra.keren.la/" target="_blank">Home<span>Home</span></a></li>

<li><a class="anima" href="http://asdharsyaputra.keren.la/search/label/Tips dan Trik/" target="_blank">Tips dan Trik<span>Tips dan Trik</span></a></li>

<li><a class="anima" href="http://google.com">Google<span>Google</span</a></li>

<li><a class="anima" href="https://www.facebook.com/asdharsyaputrakerenla" target="_blank">Facebook<span>Facebook</span></a></li>

<li><a class="anima" href="http://asdharsyaputra.keren.la/search/label/CSS/" target="_blank">CSS<span>CSS</span></a></li>

<li><a class="anima" href="http://asdharsyaputra.keren.la/search/label/Software/" target="_blank">Software<span>Software</span></a></li>
</ul>
</div>

6.KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
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.

Okay.. Good luck guys. Moga bisa bermanfaat..

Suka dengan postingan ini.?

Follow @asdharsyaputra

Ditulis Oleh : asdharsyaputra di label CSS, Tips dan Trik, Trik Blogger : Facebook Aku

Artikel Membuat Menu Super Navigation Dengan CSS3 ini ditulis oleh asdharsyaputra pada hari Rabu, 11 Juli 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Membuat Menu Super Navigation Dengan CSS3 dapat Anda sampaikan melalui kotak komentar dibawah ini. Dan jangan lupa di like yea kawan. Terima Kasih...

Backlink Please !

URL

Code For Forum

HTML Code

<a href='http://asdharsyaputra.blogspot.com/2012/07/membuat-menu-super-navigation-dengan.html' target='_blank'>Membuat Menu Super Navigation Dengan CSS3</a>

Di Like Dulu Gan Sebelum Pergi..!!

Kritik Dan Saran Sobat Sangat Membantu Blog ini Dalam Menulis Artikel Berikutnya

asdharsyaputra

Rabu, 11 Juli 2012