Flashing Effect pada Menu Navigasi

Efek efek yang indah dan menarik pada menu navigasi tidak selamanya harus menggunakan flash. Sekarang efek efek itu dapat dilakukan dengan menggunakan javascript framework yaitu mootools. Saya akan membuat flashing effect pada navigation menu, ingin tahu seperti apa efek nya ?

The Requirement

• Kali ini hanya membutuhkan mootools-core 1.2 saja

The HTML

Untuk membuat menu navigasi pastinya menggunakan list. Buat list yang simple saja.

1.<ul id="menu-container">

2.  <li class="menu">Home</li>

3.  <li class="menu">About</li>

4.  <li class="menu">Portofolio</li>

5.  <li class="menu">Contact</li>

6.</ul>

The CSS

Hanya membutuhkan beberapa baris CSS

01.#menu-container {

02.    float:left;

03.    margin:10px;

04.    padding:0

05.}

06. 

07..menu {

08.    float:left;

09.    display:inline;

10.    list-style-image:none;

11.    padding:10px;

12.    text-align:center

13.}

The Javascript

Letakkan script ini di dalam header dan diapit diantara tag <script type="text/javascript">[simpan kode disini]</script>. Penjelasan ada pada comment tag di bawah ini.

01.window.addEvent('domready',function(){

02. 

03.//beri nama variable tween pada class menu

04.        var tween = $$('.menu');

05.                 

06./*pada saat mouseover warna akan berubah dari warna #fff ke #2e88e5, warna bisa diganti menjadi apa

07.saja sesuai keinginan*/

08.        tween.addEvent('mouseover',function() {

09.            this.tween("background-color","#ffffff", "#2e88e5");

10.        });

11. 

12.//pada saat mouseout, ubah ke warna semula

13.        tween.addEvent('mouseout',function() {

14.            this.tween("background-color","#06c");

15.        });

16.    })

Selesai!! Silakan di coba dan semoga bermanfaat. Untuk lebih jelasnya lagi, download file yang sudah saya sediakan.

Source : http://gadaguna.freevar.com/index.php/mootools/25-flashing-effect-pada-menu-navigasi-menggunakan-mootools12