Blog Request tutorial? klik disini!

  • Membuat Tampilan Menu Slide Menggunakan CSS Dan JQuery

    Ditulis oleh: Faizal Rafik
    12110 kali dibaca
    13 Apr / 2014 07:53

    Dalam membuat sebuah tampilan website yang lebih menarik menggunakan jQuery banyak sekali cara yang dapat kita lakukan seperti kita memberikan efek images slider, efek Images pada Gallery dan kita bisa juga memberikan efek slide pada menu/navigasi website kita agar terlihat seperti slide saat di hover pada menu tersebut. Nah pada tutorial kali ini saya akan ajarkan bagaimana cara membuat tampilan menu/navigasi seperti slide saat di hover menggunakan CSS dan jQuery. Langsung saja kita masuk ke pokok pembahasanya.

    Bahan yang perlu di siapkan adalah :

    1.       Plugin jQuery.js

    2.       Plugin jQuery slide-menu.js

    3.       Backgroud Image Pattren.

    Pertama buatlah struktur HTML nya di dalam tag Body seperti di bawah ini :

    Setelah kita membuat file HTML nya kita buat file CSS nya seperti di bawah ini :

    Panggil file jQuery di file HTML nya seperti di bawah ini:

    Setelah semuanya di buat dan file jQuery nya di gabungkan  dengan benar maka coba lihat hasilnya.

    Sekian dulu tutorial dari saya selamat mencoba teman-teman…

    Untuk melihat hasilnya di SINI dan DOWNLOAD source codenya.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155