Duyarlı Gezinmeler Oluşturmak için 10 CSS ve JavaScript Kod Parçacığı

İyi, duyarlı bir sitenin en karmaşık kısımlarından biri navigasyondur. Bunu anlamak biraz zaman alabilir ve buna yardımcı olacak çok sayıda öğretici var. Ama aynı zamanda bu makale için topladığımız gibi kod parçacıkları kullanmanın da hayranıyım.

Tüm bu duyarlı gezinme snippet'lerini kendi projeleriniz için düzenlemek ve kopyalamak için ücretsizdir. Ayrıca çeşitli stiller içerirler, bu nedenle burada her tür web sitesi için çalışacak bir şey olacaktır.

1. Johnny Mango'dan Duyarlı Tam Sayfa Düzeni

Bu duyarlı örnek, bir web sitesinin prototipleme aşamasını ne kadar ileri götürebileceğinizi gösterir. Fareyle üzerine geldiğinizde ve bağlantılara otomatik olarak odaklandığınızda, navigasyonun ilginç bir özelliği olduğunu fark edeceksiniz. Bu efekt, aynı navigasyona sahip "canlı" bir web sitesinde değiştirilebilir, ancak bu örnekte sayfanın UI/UX'ini göstermek yararlıdır.

Johnny Mango'nun kaleme duyarlı navigasyon demosunu Kube ile izleyin

2. Tania Rascia tarafından açılan Navbar

Navigasyonunuzda daha uzun açılır öğelere ihtiyacınız varsa, bu menü daha iyi çalışabilir. Yalnızca birkaç menü öğesi içeren daha temel gezinmelere güçlü bir alternatiftir. Bu durumda, çok küçük bir açılır menü içeren basit bir bağlantı listesi bulacaksınız. Alt menü bağlantıları yalnızca jQuery tarafından işlenen bir tıklama olayında görünür. Bunu yalnızca CSS olarak değiştirebilirsiniz, ancak tıklama tetikleyicisini kaybedersiniz.

Yine de, böylesine temiz bir tasarım için bu snippet'in geliştiricilere ne kadar çok yönlülük sunduğuna şaşırdım.

Tania Rascia'nın Kalem Duyarlı Açılır Gezinme Çubuğuna Bakın

3. Jan Czizikow'dan Tek Sayfa Düzeni

Tek sayfa gezinme menüleri, tıpkı diğerleri gibi sevgiye ihtiyaç duyar. Bu, eylem halindeki tek sayfalık gezinmenin mükemmel bir örneğidir. Bağlantılar düzgün bir animasyonla aşağı kayar ancak sizi çok fazla bekletmez.

Ayrıca tarayıcı boyutunuz ne olursa olsun, otomatik olarak mükemmel uyum için yeniden boyutlandırılırlar. Bir satış sayfası veya basit bir portföy sitesi için çoğunlukla bu tür gezinmeyi öneririm. Temizdir ve duyarlı tekniklerin yanı sıra bazı mükemmel animasyon özelliklerine sahiptir.

Jan Czizikow tarafından kaleme alınan CSS animasyonları ve jQuery ile tamamen duyarlı gezinmeyi görün

4. Stephanie Walter'dan Kırmızı Açılır Menü

Geliştirici Stephanie Walter, web için bazı heyecan verici projeler geliştirdi. Bu snippet, parlak kırmızı, duyarlı gezinme özelliğine sahip yalnızca bir örnektir.

Bağlantılar, özel olarak seçilmiş bir özellik ve önyükleme yapmak için güzel bir fareyle üzerine gelme efekti ile biraz daha fazla pizzazz'a sahip. Yeniden boyutlandırıldığında, navigasyonun bunun yerine kayan bir açılır menü kullandığını fark edeceksiniz. Neredeyse mobil cihazlar için blok düzeyinde bir bağlantı listesini tercih ederdim, ancak bu, alt menü göz önüne alındığında çok daha iyi çalışıyor.

Stephanie Walter tarafından kaleme duyarlı navigasyon çok düzeyli bakın

5. Ahmed Hjazy'den Saf CSS Tasarımı

İşte navigasyon için saf CSS kullanan benzersiz bir tasarım. Periyodik element tablosunu taklit eden gezinme bağlantılarına sahip dikey bir menüdür.

Vurgulu efektler biraz gecikmeli ama şüphesiz ilginç. Duyarlı stilden bahsetmiyorum bile şaşırtıcı bir şekilde kullanılabilir. Belki de en etkileyici kısım, bu örneğin tamamının yalnızca CSS kullanmasıdır .

Ahmad Hjazy'nin Kalem CSS Duyarlı Gezinme Menüsüne bakın

6. Marc Libunao'dan Duyarlı Yapışkan Başlık

Daha önceki bir pasajda tek sayfa tasarımından bahsetmiştim ve bu duyarlı başlık da benzer bir yol izliyor. Tek fark, bu navigasyonun sayfada biraz daha büyük bir bloğu olması ve duyarlı sayfa tasarımını biraz farklı şekilde ele almasıdır.

Tarayıcıyı yeniden boyutlandırdığınızda, bu örneğin hamburger simgesini eğlenceli bir animasyonla kullandığını fark edeceksiniz. Tarzı düşünüldüğünde güzel, ama herkes olmayabilir.

MarcLibunao tarafından kaleme duyarlı yapışkan başlık navigasyonuna bakın

7. Duyarlı ve Dokunmatik Dostu Dragoeco

Tüm iyi web siteleri varsayılan olarak dokunma dostu olmalıdır ve bu gezinmeyi tasarımcılar için daha da çekici kılan da budur.

Her bağlantı yeni bir sayfaya götürür, ancak dokunmatik tabanlı herhangi bir cihazda açılır menülerin üzerine gelmek için hafifçe dokunabilirsiniz. Bu özellik genellikle gezinme menülerinde bulunmaz ve açılır menülerin tasarlanmasının zor olmasının bir nedeni de budur.

Dragoeco'nun Kalem Açılır Menüsünde Gezinme: Duyarlı ve Dokunmatik Dostu'na bakın

8. AnabolicHippo'dan Basit Gezinme Bağlantıları

Basit navigasyon menüleri deyince aklıma şöyle bir tasarım geliyor. Her bağlantı, daha küçük ekranlarda bile kendi blok öğesi olarak görünür. Hamburger menüsü ve gizli animasyonlu menü özelliği yoktur. Bunun yerine, bağlantılar yeniden boyutlandırılır ve ayrı satırlara bölünür.

En zor kısım, mobil cihazlarda açılır menü efektini kullanmaktır. Bağlantıların birçoğunun alt menüleri vardır ve bunlar daha küçük ekranlarda aynı şekilde çalışır.

Bunun, alt menüsü çok az olan veya hiç olmayan siteler için en iyi sonucu verdiğini söyleyebilirim, ancak deneyim hakkında ne düşündüğünüzü görmek için mobil cihazlarda denemeye değer.

AnabolicHippo'nun Kalem Duyarlı Gezinme Menüsüne bakın

9. Louis Chenais'ten Playstation Perde Menüsü

Geliştirici Louis Chenais, PlayStation web sitesini temel alarak en sevdiğim duyarlı navigasyonlardan birini yarattı. Louis buna "perde menüsü" adını vererek, tüm sayfayı geçerek görünüme kayıyor. Bu, mobil arayüzler için yaygındır ve web tasarımcıları için de hızla popüler hale gelmiştir.

Gerçekten sevdiğim bir şey, animasyon stili. Kullanıcıları sıkmadan bağlantıları görüntülemek için yeterince şık ve hızlıdır. Ve hepsinden iyisi, bu bir üretim web sitesinde işe yarayabilir gibi geliyor.

Kaleme Duyarlı Gezinme İlke #3'e bakın – Louis Chenais'in Perde Menüsü

10. Samir Alley'den Duyarlı Mega Menü

Web'de arama yapabilir ve yüzlerce mega navigasyon menüsü örneği bulabilirsiniz. Bunlar genellikle daha büyük bloglarda ve haber web sitelerinde görünür, ancak e-ticaret mağazalarında veya büyük ajans sitelerinde de popülerdir. Bir mega menünün en zor kısmı, onu tamamen duyarlı hale getirmektir. Bu küçük parça sayesinde, mega menü tasarımını herhangi bir ekrana kolaylıkla sığdırmak için yeniden düzenleyebilirsiniz.

Mobilde, tüm dahili bağlantıları tek bir menüde görüntülemek için kayan bir gezinme kullanır. Bu biraz can sıkıcı görünebilir, ancak mantıklıysa alt bağlantıları gizlemek için jQuery'yi de kullanabilirsiniz. Mobil kullanıcıları yabancılaştırmadan masaüstünde bir mega menü çalıştırmak için hala gördüğüm en iyi yanıt veren çözümlerden biri.

Kalem Duyarlı Mega Menüye bakın - samir alley tarafından navigasyon