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 1
• Home 2
• 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>.
      Prantinjaulah terlebih dahulu 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!