Cara Membuat Efek Hover Vertikal Pada Menu Menggunakan CSS3

29/07/2014    Faizal Rafik    2963     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More