Salı 24 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Bu jQuery Eklentisiyle Daha Akıllı Menüler Oluşturun
 Bu jQuery Eklentisiyle Daha Akıllı Menüler Oluşturun
Arayüz JavaScript

Bu jQuery Eklentisiyle Daha Akıllı Menüler Oluşturun

Yazar : Bilal UÇAR 14 Ağustos 2017 0 Comment

Her modern sitenin responsive bir düzen ve kullanışlı bir navigasyon menüsüne ihtiyacı vardır.

Hamburger menüleri mobildeki tüm bağlantıları tek bir butonda topladı. Şimdi Hamburger menü ve normal menülerin özelliğini taşıyan OkayNav‘dan bahsedelim. Bu eklentinin çalışma şekli şöyledir: Örneğin menünüzde 5 tane bağlantı var. Mobilde ekrana sadece 2 tane menü elemanı sığıyor. Bu eklenti menünün sonuna üç nokta koyarak tıklandığında devamında kalan menüleri göstermesini sağlar.

Bu ücretsiz jQuery eklentisi, herhangi bir sayfaya çok basit bir menü özelliği ekler ve yavaş yavaş farklı görünüm kaplamalarına dayanan gezinme öğelerini gizler. Bu şekilde akıllı telefon kullanıcıları tek bir hamburger menüsüne sahip ancak tablet kullanıcıları da birkaç bağlantı görebiliyor.

Varsayılan olarak, bir nav öğesine ve uzun süren sırasız bir listeye güvenir. Şimdilik, bu eklentinin çok seviyeli açılır kutuları desteklediğini düşünmüyorum ancak biraz jQuery biliyorsanız bunu kendiniz ekleyebilirsiniz.

OkayNav son derece basittir ve yalnızca birkaç bağlantı olan daha basit web siteleri içindir. Bu bağlantılar belirli bir görünüm alanına geldiğinde yavaşça ekran dışı bir menünün arkasına gizlenir ve daha fazla bağlantı tarayıcıyı küçültenleri gizler.

Sırasız listenizi bir gezinti öğesine sarmanız ve ona belirli bir kimliği vermeniz gerekecek. Daha sonra, bütün nav’u şöyle okayNav () işleviyle hedefleyebilirsiniz:

Not: Bu, herhangi bir özel özellik olmadan yalnızca en basit kurulumdur. Simge stilini, menü animasyonunu, hızlıca kaydırma desteğini ve geri arama işlevlerini kontrol etmek için bu kitaplığa yerleştirilmiş bir düzineden fazla özel seçenekle çalışabilirsiniz.

Ayrıca, menüye, işlevin belirli değerlerini ileterek istediğiniz zaman açıp / kapayabilirsiniz. Gezinmeyi açmak için basit bir örnek:

Bu kodların tümü, komut dosyasının indirilmesini de içeren GitHub repo’sunda belgelenmiştir. CDN rotasını tercih ederseniz, bu komut dosyasını doğrudan GitHub’dan eklemek için RawGit bağlantısını da kullanabilirsiniz.

OkayNav, ilerici navigasyon tekniğinden yararlanan küçük siteler için harika. Ancak, bunun nasıl çalıştığından emin değilseniz, bu küçük eklentinin neler yapabileceğini gösteren aşağıdaki CodePen demosunu kontrol edin.

Bu makalede sitenizde farklı ekran boyutlarına göre menülerin tamamının veya bir kısmının gösterilmesini sağlayan okayNav jQuery eklentisinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: hamburger menü oluşturmak jqery menü eklentisi mobil menü nasıl oluşturulur responsive menü oluşturma
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.