Bu jQuery Plugin ile Akıllı Duyarlı Navigasyon Menüsü oluşturun
Her modern site bir ihtiyaç duyarlı düzen ve bir kullanılabilir navigasyon. Bu verilen.
Ancak, hamburger menüleri sadece kadar ileri gidebilir ve onlar kullanılabilirliği kökten değiştirir değişen ekran boyutları için. Bununla baş etmenin en iyi yolu aşamalı olarak gizlenen bağlantılar gibi bir eklenti ile OkayNav.
Bu ücretsiz jQuery eklentisi çok basit bir menü özelliği ekler herhangi bir sayfaya ve ogezinme öğelerini çok az gizler, farklı görünümlere göre. Bu şekilde akıllı telefon kullanıcıları tek hamburger menüsüne sahipler, ancak tablet kullanıcıları da birkaç bağlantı görebiliyor.
Varsayılan olarak, bir eleman ve bir uzun sıralanmamış liste. Şimdiye kadar, bu eklentinin çok seviyeli açılanları desteklediğini sanmıyorum ama bir miktar jQuery biliyorsanız, bunu kendiniz de ekleyebilirsiniz.
OkayNav son derece basit ve basit web siteleri içindir Bu sadece bir avuç gezinti bağlantısına sahiptir. Bu bağlantılar ekran menüsünün arkasına yavaşça gizlen bir kere belli bir manzaraya çarptılar ve daha fazla bağlantı saklanmaya devam ediyor tarayıcı küçüldükçe.
İhtiyacınız olacak sıralanmamış listenizi kaydırın Bir gezinti öğesinde seçin ve ona belirli bir kimlik verin. O zaman yapabilirsin tüm geziyi hedefle ile okayNav () Bunun gibi fonksiyon:
var gezinti = $ ('# nav-main'). okayNav (); Not bu sadece en basit kurulum herhangi bir özel özellik olmadan. İle çalışabilirsin bir düzineden fazla özel seçenek simge stilini, menü animasyonunu, kaydırma desteğini ve geri arama işlevlerini kontrol etmek için bu kitaplığa yerleştirilmiştir.
Ve hatta menüyü arayabilirsiniz istediğinde aç / kapat işleve belirli değerleri ileterek. İşte basit bir örnek navigasyonu aç:
navigation.okayNav ( 'openInvisibleNav');
Bu kodların tümü GitHub deposu Ayrıca betiğin indirilmesini de içerir. CDN yolunu tercih ederseniz, RawGit bağlantısı bu betiği doğrudan GitHub'dan eklemek için.
TamamNay daha küçük siteler için harika Bu ilerici navigasyon tekniğinden yararlanır. Ancak, bunun nasıl çalıştığından hala emin değilseniz, bu küçük eklentinin neler yapabileceğini gösteren CodePen'deki bu gösterime bakın..
