İçindekiler
Ancak sorun şu ki, bu görev için CSS3 kullanılıyorsa, bu formların çoğu bazı tarayıcılarla tam olarak uyumlu değildir.
Javascript sayesinde bu tür efekt ve animasyonları tarayıcılarla çok daha uyumlu hale getirebilmekte ve bu sayede onlara gerekli desteği verebilmekteyiz.
Bu eğitimde, Javascript Responsive Nav eklentisini kullanarak tamamen duyarlı bir gezinme çubuğunun nasıl oluşturulacağını göreceğiz.
Bu eklenti açık kaynak kodludur ve herhangi bir projede kullanabiliriz, onu özelleştirebilmek için stil sayfası ile birlikte gelir ve tamamen jQuery gibi diğer Javascript kitaplıklarına bağlıdır.
HTML'de sadece menüyü kullanmak için bir liste oluşturmamız ve eklentinin gerektirdiği komut dosyası aracılığıyla seçebilmek için ona bir tanımlayıcı vermemiz gerekecek.
Ayrıca Responsive Nav eklentisini de bağlayıp belgeye bağlıyoruz, bu resmi sayfasından veya doğrudan Github'dan indirilebilir, sadece .js dosyasını indirebiliriz veya isterseniz .zip dosyasının tamamını indirebilirsiniz, bunun için öğretici Yalnızca responsive-nav.min.js dosyasını kullanacağım.
responsive.html dediğimiz bir demo web sitesi oluşturuyoruz.
Duyarlı Navigasyon
- Başlangıç
- Hakkında
- Hizmetler
- Blog
- Temas etmek
Lorem ipsum ağrı otur amet, ciltte yağlanma.
Ol egestas, ante et vulputate volutpat
Ardından css'yi bir style.css dosyasına aşağıdaki kod ile ekleyeceğiz.
gövde {kenar boşluğu: 0; dolgu: 0; arka plan: # 3d3d3d; yazı tipi ailesi: Arial, sans-serif; } img {maks-genişlik: %100; } #content {arka plan rengi: # E6E6FA; kenar boşluğu: 20 piksel otomatik 0; dolgu: 20 piksel; genişlik: %80; } #nav {arka plan rengi: # 4C76AE; } #nav ul {kenar boşluğu: 0; dolgu: 0; genişlik: %100; Ekran bloğu; liste stili: yok; } #nav ul li {genişlik: %100; Ekran bloğu; liste stili: yok; } #nav ul li a {ekran: blok; dolgu: 10 piksel 9 piksel; genişlik: %100; yazı tipi boyutu: 1.1em; yazı tipi ağırlığı: normal; arka plan: # 4c76ae; renk: # cad7ea; metin-dekorasyon: yok; } #nav ul li a: vurgulu {arka plan: # 00567f; } .js #nav {klip: doğru (0 0 0 0); maksimum yükseklik: 0; pozisyon: mutlak; Ekran bloğu; taşma: gizli; yakınlaştırma: 1; } # nav.opened {maksimum yükseklik: 9999 piksel; } # nav-toggle {yazı tipi boyutu: 1.2em; yazı tipi ağırlığı: kalın; dolgu: 3px 9px; sol kenar boşluğu: 15 piksel; metin-dekorasyon: yok; sınır yarıçapı: 3 piksel; renk: #fefefe; arka plan: # 4c7ab6; kenar boşluğu-alt: 15 piksel; }Buraya kadar genel stil sayfası olacak, şimdi ekran 640 piksele veya daha azına indirgenirse menüyü uyarlayacak bir stil sayfası oluşturacağız, bunun için css3'ün Medya Sorguları özelliği içinde uygulanacak bazı stiller uyguluyoruz 640 pikselde minimum çözünürlüğe sahip cihazlarda. Çözünürlük daha yüksekse, tanımlanan genel css kullanılacaktır.
@medya ekranı ve (min-width: 640px) {.js #nav {konum: göreceli; } .js # nav.closed {maks-yükseklik: yok; } # nav-toggle {ekran: yok; } #nav ul li a {sınır-sağ: 1px katı # 5E88BF; Ekran bloğu; yüzer: sol; genişlik: otomatik; arka plan: yok; dolgu: 11 piksel 15 piksel; yazı tipi ağırlığı: normal; metin-dekorasyon: yok; renk: # E6E6FA; } #nav ul li a: vurgulu {arka plan: # 00567f; renk: # cad7ea; } h1 {renk: # 90b9a0; yazı tipi boyutu: 2.5em; metin hizalama: merkez; }}Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
