Berjalan Di Kegelapan dengan Cahaya Ilmu: Efek Animasi Sederhana pada Menu dengan JQuery

Salah satu keunggulan jQuery adalah “keluwesan” dan kemudahannya dalam berkolaborasi dengan CSS (Cascading Style Sheet) sehingga penampilan halaman web menjadi semakin indah. Selain itu jQuery juga dapat menjembatani “kesenjangan” beberapa browser dalam mengimplementasikan CSS.

Disisi lain, animasi, merupakan hal yang masih diminati dalam dunia web karena menjadi salah satu hal yang akan menarik perhatian pengunjung. Dalam tutorial ini, kita akan mencoba
menambahkan efek animasi sederhana pada menu yang dibuat dengan CSS. Kita akan memanfaatkan fungsi animate() yang sudah disediakan oleh jQuery.

Buat sebuah file dan copy kan script dibawah ini pada notepad, atau macromedia dreamweaver, dan simpan dengan nama jquery_menu.html

<html>
    <head>
        <title>Animasi pada Menu dengan JQuery</title>

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">
        $(document).ready(function() {
            $('ul.menu a')
                .hover(function() {
                    $(this).stop().animate({ left: 20 }, 'fast');
                }, function() {
                    $(this).stop().animate({ left: 0 }, 'fast');
                });
        });
        </script>
        <style type="text/css">

        ul.menu{
            margin:0 0 1em; /* atas, kiri, bawah */
            width:125px;
            list-style:none
        }
        ul.menu li {
            margin:0;
            background:#000;
        }
        ul.menu li a {
            position:relative;
            display:block;
            padding:6px 0;
            width:125px;
            background:#000;
            color:#fff;
            text-align:center;
            text-decoration:none;
        }
        ul.menu li a:hover {
            border:0;
            background:#000;
            color:#ff0;
        }

        </style>
    </head>
    <body>
        <h1>Animasi pada menu dengan JQuery</h1>

        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Materi Kuliah</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Downloads</a></li>
            <li><a href="#">Friends</a></li>
        </ul>

    </body>
</html>

Pengaturan yang dilakukan dengan CSS diatas dapat dijelaskan secara singkat sbb:

Atur tag <ul> dengan class menu yaitu margin 0 dari atas dan kiri serta 1em dari bawah, lebarnya adalah 125px (default 100%) dan hilangkan bullet (titik) untuk setiap list didalamnya.

Untuk setiap <li> di dalam <ul> atur margin di semua sisi menjadi 0 dan atur background list menjadi hitam (#000)
Untuk link (<a>) yang ada di dalam list (<li>) atur display menjadi block, warna tulisan menjadi putih (#fff) dan hilangkan garis bawah di link.
Untuk link (<a>) yang di-hover, ubah warna tulisan menjadi kuning (#ff0).

Sertakan file utama jQuery (download versi terakhir di http://jquery.com). Dan tambahkan sedikit animasi dengan perintah berikut ini.

Lihat versi demo : View
Download Source code : Download

by ; Elgamar Syam

Berjalan Di Kegelapan dengan Cahaya Ilmu

Sabtu, 04 Februari 2012

Efek Animasi Sederhana pada Menu dengan JQuery

Tidak ada komentar:

Posting Komentar