Dropmenu 'ye hover yada click olunca body dark olması.
Merhabalar.. Başlıkta da belirttiğim gibi bu işlemi yapamadım. Dropmenü açıldığında menünün ön plana çıkması ve diğer görüntülerin opacity .7 olarak kararmasını istiyorum.
Jquery'nin 'hover'ı ile yapmaya çalıştım bu sefer açılan menüde arkada kaldı. z-index ile çözmeye çalıştım olmadı.
**** Tayfun hocamın css transform derslerinde anlattığı popup mantığı ile yola çıkarak bir şeyler yapmaya çalıştım ama olmadı. Tam istediğim görüntü aslında şu. oyunfor.com sitesindeki sağ üst tarafta olan sepete hover olunca sepeti gösterip diğer elementleri karartması.
Parent ına opacity uygulanan bir elemanı o opacity den mahrum bırakamıyoruz maalesef. Child eleman maksimum opacity: 1 alacağından en fazla kapsayıcısının gösterebildiğini gösterebilir.
Alternatif çözüm yolları denemelisin. Örneğin yukarıda attığım gibi bir overlay oluşturup bu overlayi senin de dediğin gibi z-index ve position yardımıyla tüm nesnelerin üzerine getir. Ovarlay in de üzerinde olmasını istediğin elemana da overlayden daha yüksek bir z-index değeri ver. Arka planda oluşmasını istedğin efekti ovarlay e uygularsan istediğine yakın bir sonuç elde edebilirsin. Örneğin siyahın .1 i kadar karartabilir veya biraz blur ekleyebilirsin.
Ama diyorsan ki ben sadece opacity düşürmek istiyorum, o halde dropmenu yu opacity uyguladığın parentten çıkarmalısın ki bu durumda body den çıkaramazsın. O halde body nin içerisindeki elemanları bir div içerisine topla drop menuyu de divin dışarısına çıkar ve opacity i elemanları topladığın div e uygula fakat böyle de drop menüyü konumlandırmada sıkıntı yaşayabilirsin.
<body>
<div class="arkadaKalacak">
<!-- Tüm sayfa içeriği -->
</div>
<div id="dropmenu2">Menu</div>
</body>