Animated Outline menu adalah salah bentuk menu pulldown / dropdown yang mana ketika tombol mouse diarahkan ke sebuah teks atau tombol image maka akan menampilkan sub menu dengan outline (garis) yang memisahkan antara subĀ  menu yang satu dengan yang lain.

Menu / sub menu tersebut akan ditampilkan baik ketika mouse diarahkan ke teks yang bersangkutan atau ketiika mouse diklik pada teks tersebut. Contoh penerapan animated outline menu ini bisa Anda lihat di sini.

Untuk membuatnya tidak begitu susah, this site ikuti aja langkah berikut :

1. Buatlah sebuah File Menu.html melalui NOTEPAD

2. Tambahkan kode-kode berikut di bagian <head> pada script HTML Anda

2. Kode di atas mengacu pada 2 file yaitu, information pills jkoutlinemenu.css dan jkoutlinemenu.js yang harus Anda copy paste dan simpanlah dengan kedua nama file tersebutĀ  dan tempatkan pada tempat yang sama dengan file menu tersebut berada.

3. Habis itu, discount tambahkan tag Anchor <a href=..> pada bagian <Body> pada HTML Anda, seperti berikut :

 

 

 

 

 

 

 

 

 

 

 

4. Jalankan file menu.html diatas dan lihatlah hasilnya.

5. Apabila Anda ingin menambahkan 1 atau lebih menu lagi disebelah kanannya, maka Anda tinggal tag Anchor lagi dibawah

<a href=”#mymenu1″ id=”designanchor”>AmirohAdnan</a> is

Dan buatlah daftar sub menunya dengan meng copy paste tag-tag berikut :

 

<div id=”mymenu1″ style=”position: absolute; left: 190px; top: 92px”>

<ul>

<li><a href=”http://www.keren.com”>Keren Abis</a></li>

<li><a href=”http://www.sabar.com” >Sabar Banget</a></li>

<li><a href=”http://www.ibu.com”>Ibu yang baik</a></li>

<li><a href=”http://www.tantangan.com”>Suka Tantangan</a></li>

<li><a href=”http://www.manis.com”>Manis Kayak Gula Jawa</a></li>

<li><a href=”http://www.top.com”>T.O.P B.G.T</a></li>

<li><a href=”http://www.senyum.com” >Murah Senyum</a></li>

</ul>

</div>

Kemudian copy paste-kan lagi script berikut :

 

<script type=”text/javascript”>

//jkoutlinemenu.definemenu(“anchorid”, “menuid”, “mouseover|click”, optional_width, optional_height)

jkoutlinemenu.definemenu(“designanchor”, “mymenu1”, “mouseover”, 180)

</script>

Jangan lupa untuk mengganti mymenu1 dengan mymenu2 dan seterusnya..

6. Mudah kan??

Selamat mencoba…