Home > Menengah > Web Desain > Tutorial CSS > Membuat Popup Menu hanya dengan CSS

.

11 Komentar Untuk Artikel Ini BYAdmin Ilmuwebsite

Dalam artikel sebelumnya tentang 10 Kesalahan SEO, ada satu hal yang membuat penulis terpanggil untuk memberikan solusi salah satunya. Apa itu ?? Yakni developer website biasanya melakukan kesalahan membuat popup menu dengan java script, hal ini cukup fatal, biasanya googlebot ataupun crawler yang lain enggan melewatinya.

Oke lalu bagaimana membuat googlebot maupun crawler lainnya mengindex page melalui popup menu? Yakni dengan mengubah popup menu dari yang tadinya menggunakan javascript menjadi menggunakan css saja. Menggunakan css untuk membuat popup menu jauh lebih ringan, dan tentunya jauh lebih disukai oleh googlebot maupun crawler yang lainnya. Hasilnya adalah index page jauh lebih maksimal.

ILMUWEBSITE 06-21-14 at 11.59 AM 001

Luar biasa bukan? Sungguh. :-) Sederhananya membuat popup akan segera kita bahas segera. Ya persiapkan satu file saja, misakan popup.html di bagian body, isinya kurang lebih seperti ini :

Sedangkan style di bagian headnya kira-kira seperti ini

Yang terjadi sebetulnya kita membuat popup menu memanfaatkan unordered list <ul>. Dimana di dalamnya terdapat kelas parent dan child seperti ini :

Dan yang membuat mereka menjadi terlihat popup adalah

Ketika kondisi normal, atau dengan kata lain li anak parent tidak di hover. Maka yang terjadi adalah ul.childnya disembunyikan.

dan ketika li anak parent di hover maka ul.childnya di tampilkan.

 

Untuk melihat demo silahkan klik button demo di bawah

Lihat Demo

Mudah sekali bukan? Ya begitulah cara membuat popup menu dengan menggunakan css saja. Selamat mencoba.

Salam.

http://www.ilmuwebsite.com/search-engine/artikel-search-engine/10-kesalahan-seo
DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



11 Response untuk Artikel Ini

  1. ahmad

    kok gak bisa bikin pop up nya knpa ya


  2. ahmad

    naha te bisa


  3. csr

    Keren tutorial nya… makasih om tutorial popup menu nya..


  4. eko

    pop up nya kagak muncul


  5. uwais

    link menampilkan hasil kq g bisa?


  6. fai

    wah. hebat.. tapi tak coba ada yg kurang nu mang sengaja apa ya ? hehe..

    tapi keren.. saya ko ga penah kepikiran ya..


  7. wisnu

    Sip deh.. css emang oke… hhe..
    btw pengen jadi patnernya ilmuwebsite deh..


  8. herman

    mas, klo menggunakan wordpress gimana? bingung neh…. ga tau cara editnya.


  9. jchris

    baru belajar bikin blog, saya udah ketemu yang membingungkan sekali. pusing mas ya, ternyata ga gampang seperti yang dibilang org. thx


  10. Ferdian Rahabista

    mas ada yg kurang child tu yg di bawah News, yg tadinya aja, di ubah jadi


  11. sayyid

    thanks mas bro tutorialsx :D


You must be logged in to post a comment.

eXTReMe Tracker