September 10, 2014

Cara Mengatasi Submenu yang Terhalang Image Slider

September 10, 2014

Cara Mengatasi Submenu yang Terhalang Image Slider
Cara Mengatasi Dropdown Menu, Submenu, atau Link Menu yang Terhalang Image Slider atau Konten.

POSTING cara mengatasi menu, submenu, atau dropdown menu yang terhalang, tertutup, atau "tertindih" Slider Image, Flash, atau Featured Post Slideshow ini terinspirasi pertanyaan seorang blogger yang tidak dijawab oleh admin blogger yang dikomentarinya.

Pertanyaannya begini: "Saya telah mencoba dan berhasil (membuat featured post slider di homepage blog), tetapi submenunya jadi terhalang. Bagaimana ya cara mengatasinya?"

Tidak ada jawaban, mungkin sang admin sibuk banget atau tidak sempat membaca komentar tersebut.

Dropdown menu tertutup slideshow biasanya terjadi saat kita memasang sendiri slider tersebut, bukan bawaan template yang digunakan.

Kalau kita Googling, minim sekali posting soal ini. Mungkin juga karena tidak banyak kasusnya, karena memang slider image itu tidak bagus buat SEO blog.

Mengatasi Navigasi Menu Terhalang Slider (Dropdown Menu Behind Slideshow)

Setelah "mengintip" atau mempelajari beberapa template blog yang Slider atau Featured Post Slideshow-nya yang normal, tidak menghalangi submenu/dropmenu, maka dipastikan penyebabnya adalah masalah css, yaitu properti z-index.

Di forum Stack Over Flow, solusinya juga yaitu dengan menambahkan z-index, yakni z-index: 999 di CSS Menu yang terhalang/tertindih Slider. Misalnya, #menu {z-index:9999;}

Ini dia contoh lengkap CSS Menu biar tidak terhalang Slider:

#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;}
#nav ul li {
width:100px;
float:left;
z-index:9999;border-top:1px solid #fff;
}

Menurut para pakar pemrogragam, z-index adalah property CSS yang fungsinya untuk mengatur posisi depan atau belakang suatu elemen.

Demikian Cara Mengatasi Submenu yang Terhalang Image Slider. Semoga bermanfaat dan semoga Anda tidak mengalaminya. Good Luck & Happy Blogging! (www.contohblog.com).*

Anda punya solusi paling jitu? Please share and leave a comment!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

17 comments on Cara Mengatasi Submenu yang Terhalang Image Slider

  1. Berhasil Gan....
    Thanks

    ReplyDelete
  2. Alhamdulillah, makasih banyak gan

    ReplyDelete
  3. tempaku berhasil, tapi slidernya gak jalan, kenapa ya?

    ReplyDelete
  4. Saya terapkan dan berhasil, makasih byk mas

    ReplyDelete
  5. gan cara masangnya gimana

    ReplyDelete
  6. makasih infonya, punya saya seperti ini:

    .menu-primary-container{z-index:10 !important;}
    .menu-secondary-container{z-index:99 !important;}
    embed, img, object, video {max-width: 100%;}

    z-index untuk menu scondary container asliya 10 kuubah jadi 99 dan berhasil.

    ReplyDelete
  7. maksih gan postinganya sangat membantu....skarng navigasi blog saya tidak terhalang lagi....sekali lagi terima kasih

    ReplyDelete
  8. Thank you mas broo, salam blogger

    ReplyDelete
  9. Thanks broo ,, working nih ...

    ReplyDelete
  10. terima kasih sangat membantu

    ReplyDelete
  11. hamsyong...
    ane kurang paham.

    ReplyDelete
  12. this what i looking for! Thanks!

    ReplyDelete
  13. Mantap sangat mass sangat membantu <3

    ReplyDelete

Contact Form

Name

Email *

Message *