Cara Membuat Animasi Gambar Di Bawah Menu

Efek ini menggunakan teknik CSS untuk membuat
Menu Anda tampil lebih keren. Efek ini tidak
menggunakan gambar sebagimana yang biasa
digunakan sebagai penunjang sebuah animasi.
Lihatlah contoh berikut ini. Arahkan cursor Anda
pada deretan menu-menu yang ada di bawah ini :

• Home
• Tabel Warna
• Email Form

Ikuti langkah berikut, bila Anda ingin membuat :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<ul class="arrowunderline">
<li><a href="URL Menu 1 Anda di sini">Menu URL 1</a></li>
<li><a href="URL Menu 2 Anda di sini">Menu URL 2</a></li>
<li class="selected"><a href="URL Menu 3 Anda di sini">Menu URL 3</a></li>
<li><a href="URL Menu 4 Anda di sini">Menu URL 4</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda pada tempat yang disediakan.

Bila perlu, tambahkan lagi jumlah Menunya

dengan mengikuti kode yang sebelumnya.

1.   Terus Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      kemudian simpan template anda.

<style>

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 18px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:7px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent red transparent; /* create up arrow */
}

</style>

Selamat mencoba dan tetap good luck!