Blog Request tutorial? klik disini!

  • Cara Membuat Efek Hover Vertikal Pada Menu Menggunakan CSS3

    Ditulis oleh: Faizal Rafik
    3059 kali dibaca
    29 Jul / 2014 01:07

    Hallo teman-teman ketemu lagi dengan saya di blog DUMET School. Apa kabar nih semuanya mudah-mudahan sehat semuanya ya, amin. Oh iya selamat hari raya idul fitri ya teman-teman, mohon maaf lahir dan batin, semoga kita semua kembali Fitri dan dipertemuka kembali di Bulan Ramadhan Tahun depan, amin. Oke ditutorial kali ini saya ingin mengajarkan bagaimana caranya membuat efek hover vertical pada Menu atau Navigasi hanya menggunakan CSS tanpa bantuan jQuery. Baiklah langsung saja kita praktekan ya teman-teman.

    Pertama kalian bisa membuat HTML nya ditext editor kalian masing-masing, seperti dibawah ini :

    Kemudian CSS nya seperti gambar dibawah ini :

    Pada CSS diatas kalian bisa lihat saya menggunakan Pseudo Element :nth-child(n), n bisa kalian isikan berdasarkan urutan list (li) yang akan diberikan style misalnya list 1, 2, 3, dst. Fungsi pseudo element ini adalah untuk memberikan style pada anak (child) dari sebuah deretan item yang tersedia didalam sebuah susunan daftar list dan cara menghitungnya dimulai dari list yang paling atas atau list pada urutan no 1.

    DEMO | DOWNLOAD

    Sekian dulu tutorial dari saya sampai ketemu ditutorial berikutnya. Terima Kasih.






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