Mobil cihazlar için CSS menüsü. Duyarlı navigasyon: menüyü akıllı telefonlarda nereye koyacağınız

Biri üzerinde çalışırken, ana yatay olanın yaklaşık iki düzine bağlantı içerdiği bir durumla karşılaştım. Web sitesinde, açılır listeler şeklinde kolayca düzenlenebilirler, ancak mobil versiyonda tüm bunlar tek bir blokta toplandı. Böyle bir öğe "dağınık" görünüyor ve muhtemelen bazı kullanıcıların yön bulmasını engelliyor.

Durumdan çıkmanın bir yolu, WordPress'te basitleştirilmiş bir görünüme sahip olacak ve yalnızca ana bölümlere bağlantılar içeren alternatif bir mobil menü oluşturmaktır. Bu, bazı modüller veya wp_is_mobile işlevi kullanılarak yapılabilir. Tüm seçenekleri ele alalım:

Wp_is_mobile işlevi

Bu koşullu operatör, bir kişinin sitenizi bir mobil cihazdan ziyaret edip etmediğini, Doğru veya Yanlış döndürüp döndürmediğini kontrol eder. Sözdizimi aşağıdaki gibidir:

if (wp_is_mobile ()) (/ * Mobil cihazlar için bilgileri görüntüler * /) else (/ * Aksi takdirde - normal bir sitenin bilgisi * /)

İşlev, ziyaretçinin tarayıcısındaki Kullanıcı Aracısı dizesinin değerini tanımlayarak çalışır - $ _SERVER ['HTTP_USER_AGENT'] (örneğin, Mobil, Kindle, Android, BlackBerry, Opera Mini, vb.). Bununla birlikte, aynı zamanda, ekran boyutu veya cihazın adı hakkında veri iletmez - yalnızca Doğru / Yanlış.

Wodpress'te wp_is_mobile, duyarlı tasarımı seçmek / biçimlendirmek için kullanılmaz. Ekran boyutundan bağımsız olarak yalnızca mobil cihazlarda görüntülenmesi gereken bir web projesinin öğelerini tanımlar - ilgili sınıflar, görünüm alanı, dokunmatik ekran komut dosyaları vb.

Dikkat! İşlevin 2 nüansı vardır:

1. Birisi Kullanıcı Aracısı değerini değiştirmeye karar verirse, sistem bunu tanıyamayacaktır.
2. Önbelleğe almayı etkinleştirdiğinizde, bilgiler her seferinde güncellenmez, bu nedenle her zaman aynı sonucu alırsınız ve çözüm işe yaramaz hale gelir (belki de bu nedenle, mobil sürümü görüntülemek için her seferinde tarayıcı önbelleğini temizlemeniz gerekir). geliştirici araçları).

Ve ilk durum oldukça nadiren meydana gelirse, o zaman pek iyi sonuç vermez (ziyaret edilen sitelerde onsuz yapamazsınız).

Alternatif bir mobil menü oluşturmak için algoritma

1. Öncelikle yönetici panelinin "Görünüm" - "Menü" bölümüne gidin. Burada her sürüm için farklı bir şeye ihtiyacınız var, örneğin:

• üst mobil menü - mobil cihazlar için seçenek;
• top-pc-menüsü - masaüstü normal sürümü için.

if (wp_is_mobile ()) (wp_nav_menu (dizi ("menu" => "en iyi mobil menü"));) else (wp_nav_menu (dizi ("menu" => "üst bilgisayar menüsü"));)

if (wp_is_mobile ()) (wp_nav_menu (dizi ("menu" => "en iyi mobil menü"));) else (wp_nav_menu (dizi ("menu" => "üst bilgisayar menüsü"));)

Düzeninizde, ek parametreler nedeniyle kod biraz farklı olabilir. Yöntemin özü, seçeneği bir WordPress mobil menüsü olarak görüntülemektir. üst mobil menü, her zamanki için - üst bilgisayar menüsü(gerekirse, adlarınızı değiştirin).

Uygulamadan sonra akıllı telefonlarda / tabletlerde navigasyonu kontrol edin. Yukarıda belirttiğim gibi wp_is_mobile işlevi User Agent'ı tanımlar bu yüzden siteye telefondan giriş yapmanız tavsiye edilir, Ctrl + Shift + I geliştirici paneli ile olan seçenek başarısız olabilir.

Eğer uğraşacak zaman yoksa, her zaman uygun bir modül vardır. Birkaç seçenek var, ancak yalnızca mevcut görev için gerekli olanı ele alacağız - mobil ve masaüstü sürümlerinde farklı WordPress menüleri görüntüleme.

Depodaki WP Duyarlı Menüyü buradan veya buradan indirin. Bu çözüm, akıllı telefonlar, tabletler ve daha fazlası için kolayca basit ve tamamen özelleştirilebilir bir açılır menü oluşturmanıza olanak tanır. Nihai sonuç yaklaşık olarak şöyle görünecektir (renkler özelleştirilebilir, bir arama bloğu vardır):

WP Duyarlı Menü çok popüler - 70 bin. indirmeler ve 4.5 derecelendirme puanı. Sidr jquery menü eklentisine dayanmaktadır. Son güncellemenin bir yıl önce olmasına rağmen, hatalar üzerinde çalışmalar (istatistiklere bakılırsa) aktif olarak devam etmektedir.

Ana fonksiyonlar:

• kaydırma desteği ile tamamen duyarlı çözüm;
• her türlü mobil cihazda çalışır;
• WP sistem menü işlevleriyle kolay entegrasyon;
• temanıza uygun bir renk paleti belirleme;
• mobil sürümde gereksiz öğeleri gizleme;
• menünün nereden görüneceğini belirlemek;
• içinde görüntülenen logo, satır ve metin seçimi;

Modülü kurduktan sonra, "WPR Menüsü" bölümünde tüm ayarları bulacaksınız, bunlar 2 sekmeye ayrılmıştır - Genel ve Görünüm.

WordPress yönetici panelinde alternatif bir mobil menü oluşturun ("Görünüm" bölümündeki önceki yöntemle benzer şekilde).

"WPR Menüsü" öğesine gidin ve Genel sekmesinde "Mobil Navigasyonu Etkinleştir" seçeneğinin önüne bir onay işareti koyun.

Aşağıdaki "Menü Seç" ayarında ikinci adımda oluşturulan menüyü seçin.

Sonraki "Mobil cihazlarda gizlenecek öğeler" alanında, standart gezinmeyi görüntülemekten sorumlu olan sınıfın veya kimliğin adını belirtin, örneğin: .topnav, # ana menü(virgülle ayrılmış, noktalı sınıflar, karma ile kimlik).

Kaydediyoruz - "Seçenekleri Kaydet" düğmesi.

Böylece, önce nesneyi seçersiniz ve ikinci olarak gereksiz öğeleri gizlersiniz (bizim durumumuzda bu ana gezinmedir). Sonuç olarak, masaüstü ve akıllı telefonlar için Wordpress'te farklı menüler uygulayabileceksiniz.

Eklenti parametrelerinin geri kalanını gözden geçirin ve istediğiniz gibi işaretleyin: kaydırma, yakınlaştırma, arama bloğu, logo gösterimi, öğenin yanı ve tetiklendiği ekran çözünürlüğü. Ayrıca "Menü Görünümü" sekmesinde bir arka plana ihtiyacınız var ve gerekirse çerçeveleri kaldırın.

Genel olarak, WP Responsive Menu ile çalışmak oldukça basittir. wp_is_mobile işlevi herhangi bir ezici komplikasyona neden olmamasına rağmen. Her iki seçeneği de test ettim ve iyi performans gösterdiler. Ancak, önbelleğe alma etkinleştirildiğinde wp_is_mobile koşullu ifadesinin işe yaramaz hale geldiğini unutmayın. Eklentinin ekran boyutları ile ayarları dikkate alındığında, Kullanıcı Aracısı'na herhangi bir bağlayıcılık yoktur, yani bu tür kısıtlamalardan korkmaz.

WordPress altında bir mobil menü uygulamak için başka ilginç çözümler biliyorsanız, yorumları yazın. Modüller için ayrı bir inceleme olacağını düşünüyorum.

Bir mobil cihaz için arayüz tasarımı geliştirirken özellikle dikkat edilmesi gereken alanlardan biri de navigasyon menüsüdür. Sitede çok sayıda bölüm veya sayfa varsa, tüm öğeleri küçük bir ekran çözünürlüğüne yerleştirmek için özel beceri gerekir. Çok sık olarak, gezinme üst üste yığılmış bir grup satıra veya bir grup düğmeye dönüşür. Bu eğitimde, jQuery kullanarak navigasyon oluşturmanın yollarından birine bakacağız.

Görev

Aşağıdaki ekran görüntüleri, mobil ekranlarda şablonlarla durumları göstermektedir. Navigasyonda 3 veya 4 düğme varsa, konumu bir satıra kaydedilir. Ancak menü 6 veya daha fazla öğe içerdiğinde, sonuç çirkin bir gruptur.

Çözüm

Yaygın bir yol, navigasyonu, seçili öğeye dayalı olarak bir açılır listeye dönüştürmektir. Bu çözümün dezavantajı, select öğesinin CSS ile biçimlendirilememesidir. Chosen gibi Javascript eklentileri menüyü özelleştirmenize izin verir veya açılır menü için sistem stillerinden memnun olmanız gerekir. Ayrıca menü yapısının geniş ekran versiyonu bir mobil cihazda açılır listeye dönüştürüldüğünde kullanıcının kafası karışabilir.

2) Blok olarak çıktı

Bir başka popüler yol, menü öğelerini dikey olarak yığılmış öğeler olarak şekillendirmektir. Ancak, bu yaklaşım çok fazla başlık alanı kaplar. Navigasyon çok sayıda düğme içeriyorsa, kullanıcının bilgiye ulaşmak için uzun bir listede gezinmesi gerekecektir.

3) Menü simgesi

Ve öğreticimizde inceleyeceğimiz son yöntem, navigasyonu etkinleştirmek için bir menü simgesi kullanmaktır. Bu yaklaşım, sayfada (bir mobil cihazda önemlidir) yerden tasarruf sağlar ve CSS ile görünüm üzerinde tam kontrol sahibi olmanızı sağlar. Menü simgesi ve gezinme, sitenin genel stiline uygun olarak sunulabilir.

jQuery ile birlikte gelen mobil navigasyon

Bu eğitimde, size küçük bir ekran için nasıl navigasyon oluşturulacağını göstereceğiz. Menü simgesini hazırlamak ve gezinmeyi etkinleştirmek için JQuery kullanılacaktır. Navigasyonun çalışması için ek HTML etiketleri gerekmez.

Menümüz için basit bir yapı kullanılacaktır:

Menünün çalışması için JavaScript kodu gerekir. İşlev, öğeyi hazırlar