Web siteniz için üzerine gelindiğinde açılan ağaç menü yapmak istiyorsanız, bu ders tam size göre. Bu derste javascript kullanmadan CSS ile Menü Yapımını göstereceğim. Öncelikle yapacağımız menü sitenizin ana menüsü olduğunu varsayalım. Ve bu menüde yer alan butonlar üzerine geldiğimizde o menüye ait alt menüler açılsın istiyoruz. Bunu yapmak için öncelikle menümüzün HTML yapısını oluşturalım. HTML Kodları :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<nav id="myMainNavigation"> <ul> <li><a href="#">Anasayfa</a></li> <li> <a href="#">Kurumsal</a> <ul> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Marka Kimliği</a></li> <li><a href="#">Son Haberler</a></li> </ul> </li> <li> <a href="#">Ürünler</a> <ul> <li> <a href="#">Ürün Grubu 1</a> <ul> <li><a href="#">Ürün 1.1</a></li> <li><a href="#">Ürün 1.2</a></li> <li><a href="#">Ürün 1.3</a></li> </ul> </li> <li> <a href="#">Ürün Grubu 2</a> <ul> <li><a href="#">Ürün 2.1</a></li> <li><a href="#">Ürün 2.2</a></li> <li><a href="#">Ürün 2.3</a></li> <li><a href="#">Ürün 2.4</a></li> </ul> </li> <li> <a href="#">Ürün Grubu 3</a> <ul> <li><a href="#">Ürün 3.1</a></li> <li><a href="#">Ürün 3.2</a></li> </ul> </li> </ul> </li> <li><a href="#">İnsan Kaynakları</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> |
Yukarıdaki kodlar, [&hellip
Merhaba sizlere yeni karşılaşmış olduğum bir problemin çözümünden bahsedeceğim. Belki aynı sorunla karşılaşanlar için bir çözüm olur… Web sitenize Youtube‘tan embed olarak bir video eklediniz. Ve videonun üzerine denk gelen fixed veya absolute içeriğiniz var. (Bu açılır menünüz veya sayfa üzerinde açılan pop-up tarzı bilgilendirme içerikleriniz gibi içerikleriniz olabilir.) Ve bu içerik üstteki örnekte olduğu gibi videonun altında kalıyorsa ilk [&hellip
Site Tasarımlarını Her Tarayıcıya Uyumlu Hale Getirmek başlıklı yazıya başlamıştık ve bugün bu konunun 3. parçasına geldik.
Sitelerimizi her tarayıcı için uyumlu hale getirmek için göz önünde bulunduracağımız diğer bir maddede, CSS tarayıcı seçici kullanmak
Geçen dersimizde her tarayıcıya uyumluluğu sağlamak için CSS’i sıfırlamamız gerektiğinden bahsetmiştik. Sıfırlamalıyız, çünkü her tarayıcının ön tanımlı ayarları farklı olabilmektedir.
Örneğin ie,
etiketine margin verirken firefox vermemektedir. buda tasarımın kaymasına sebep olmaktadır
Tarayıcılar arasındaki uyumu sağlamak. ve düzgün tasarım oluşturmak
Konumuz, Sitenizde kulanıdığınız, <input/> elementlerini type’larına göre şekillendirmek.
Durumumuz söyle olsun ; Siteniz genelindeki textbox’larınızın 250px’lik genişliğe sahip olmasını zeminin açık sarı olmasını istiyorsunuz. Fakat bu etkinin butonlar gibi diğer input elemanları üzerinde gerçekleşmesini istemiyorsunuz.
Bunun için uygulayabileceğimiz 3 yöntem var