Menüleri Link ve Resimlerin Üzerinde Gösterme
Gönderilme zamanı: 10 Mar 2011 [ 14:29 ]
Menüleri Link ve Resimlerin Üzerinde Gösterme
Birçok tasarımcının sık sık karşılaştığı bir sorun olan özellikle açılır menülerin (navigasyon menü) aşağıya veya sağa doğru açıldığında resimin ya da yazının altında kalma sorununu bir satırlık CSS koduyla çözmek mümkün.
Sorunun mantıken açıklaması ise yukarıdaki resimde güzelce açıklanmış. Resimleri z ekseni üzerinde bir sıraya sokarak bu sorunu çözüyoruz.
İŞTE ÇÖZÜMÜ!
Çözüm Z-index kodu ile ilgili. aşağıdaki kodu menülerinizin style kodları içinde uygun bir yere ekleyiniz. Böylece menüleriniz katman olarak en üstte kalacaktır.
(Şayet .css dosyaları üzerine deneyimli değilseniz, kodu menününüzün .css uzantılı dosyasında tüm { } tagları arasına koymanızı öneririm.)
Örnek Yerleştirme:
Çözüm bu kadar…
Anahtar Kelimeler: açılır menü, Altında, ayarları, CSS, CSS3, flashın, Kalıyor, katman, Linkerim, menü, navigasyon menü, Resimlerin, z-index, menülerim linklerin altında kalıyor, menülerim resimlerin altında kalıyor, menülerim düzgün görünmüyor, menülerim bozuk görünüyor, menüler düzgün görünmüyor linklerin altında kalıyor
>>
Birçok tasarımcının sık sık karşılaştığı bir sorun olan özellikle açılır menülerin (navigasyon menü) aşağıya veya sağa doğru açıldığında resimin ya da yazının altında kalma sorununu bir satırlık CSS koduyla çözmek mümkün.
Sorunun mantıken açıklaması ise yukarıdaki resimde güzelce açıklanmış. Resimleri z ekseni üzerinde bir sıraya sokarak bu sorunu çözüyoruz.
İŞTE ÇÖZÜMÜ!
Çözüm Z-index kodu ile ilgili. aşağıdaki kodu menülerinizin style kodları içinde uygun bir yere ekleyiniz. Böylece menüleriniz katman olarak en üstte kalacaktır.
Kod: Tümünü seç
z-index : 1 ; (Şayet .css dosyaları üzerine deneyimli değilseniz, kodu menününüzün .css uzantılı dosyasında tüm { } tagları arasına koymanızı öneririm.)
Örnek Yerleştirme:
Kod: Tümünü seç
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
z-index : 1 ;
} Çözüm bu kadar…
Anahtar Kelimeler: açılır menü, Altında, ayarları, CSS, CSS3, flashın, Kalıyor, katman, Linkerim, menü, navigasyon menü, Resimlerin, z-index, menülerim linklerin altında kalıyor, menülerim resimlerin altında kalıyor, menülerim düzgün görünmüyor, menülerim bozuk görünüyor, menüler düzgün görünmüyor linklerin altında kalıyor
>>