Duyarlı Bir Gezinme Nasıl Oluşturulur

En zorlu parçalardan biri responsified bir web sitesinde “Gezinme”, Bu bölüm, web sitelerinin erişilebilirliği için gerçekten önemlidir, çünkü ziyaretçilerin web sayfalarına atlamasının yollarından biridir..

Yanıt veren web sitesi gezintisi oluşturmanın aslında birçok yolu vardır ve hatta bazı jQuery eklentileri bile bunu bir saniyede yapabilir..

Ancak, anında bir çözüm uygulamak yerine, bu yazıda, size yol göstereceğiz yerden basit bir gezinti nasıl yapılır ve akıllı telefonlar gibi küçük bir ekran boyutunda görüntülemek için CSS3 medya sorgularını ve küçük bir jQuery'yi kullanma.

Öyleyse, daha yeni başlayalım..

• gösteri
• Kaynak İndir

HTML

Her şeyden önce, meta görüntüleme penceresini içine ekleyelim. kafa etiket. Bu meta görüntüleme penceresi Sayfamızın, özellikle mobil görünüm alanında, herhangi bir ekran boyutunda uygun şekilde ölçeklenmesi için bir etiket gerekir..

… Ve ardından aşağıdaki snippet'i, içindeki gezinti işaretlemesi olarak ekleyin. vücut etiket.

Yukarıda gördüğünüz gibi, altı ana menü bağlantımız var ve bunlardan sonra bir bağlantı daha ekledik. Bu ekstra bağlantı için kullanılacak Çek Küçük bir ekranda gizlendiğinde menüde gezinme.

Daha fazla okuma: Viewport meta etiketini unutma.

stiller

Bu bölümde, navigasyonu şekillendirmeye başlıyoruz. Buradaki tarz sadece dekoratif, istediğiniz herhangi bir rengi seçebilirsiniz. Fakat bu durumda bizzat (bizzat) vücut yumuşak ve kremsi bir renge sahip olmak.

 gövde background-color: # ece8e5;  

nav Gezintiyi tanımlayan etiket 100% tarayıcı penceresinin tam genişliği ul birincil menü linklerimizi içerdiği yer 600px genişlik için.

 nav yükseklik: 40 piksel; genişlik:% 100; arkaplan: # 455868; yazı tipi boyutu: 11pt; font ailesi: 'PT Sans', Arial, sans-serif; yazı tipi ağırlığı: kalın; pozisyon: göreceli; sınır-alt: 2 piksel katı # 283744;  nav ul doldurma: 0; marj: 0 otomatik; genişlik: 600px; yükseklik: 40px;  

Sonra yapacağız şamandıra Menü sola bağlanır, böylece yan yana yatay olarak görüntülenirler, ancak bir öğeyi yüzmek üst üste çökmelerine neden olur.

 nav li ekran: satır içi; şamandıra: sol;  

Yukarıdaki HTML işaretlemesinden fark ederseniz, zaten ekledik Clearfix içinde sınıf her ikisi için de öznitelik nav ve ul Bu CSS clearfix hack'i kullanarak içindeki elementleri yüzdüğümüzde etrafı temizlemek için. Öyleyse, stil sayfasına aşağıdaki stil kurallarını ekleyelim:.

 .clearfix: before, .clearfix: after content: ""; ekran: masa;  .clearfix: after clear: both;  .clearfix * zoom: 1;  

Altı tane menü bağlantımız olduğu için, konteyneri de 600px, her menü bağlantısında 100px genişlik için.

 nav a color: #fff; ekran: satır içi blok; genişlik: 100px; metin hizalama: orta; metin dekorasyon: yok; hat yüksekliği: 40px; metin gölgesi: 1 piksel 1 piksel 0 piksel # 283744;  

Menü bağlantıları ile ayrılacak 1px son sınır hariç, sağ sınır. Önceki kutu modelindeki yazımızı hatırlayın, menünün genişliği genişletilecektir. 1px gerçekleştirmek 101px sınır ekleme olarak, yani burada kutu boyutlandırma modellemek border-box Menü kalmasını sağlamak için 100px.

 nav li a sınır-sağ: 1 piksel katı # 576979; kutu boyutlandırma: border-box; -moz-box boyutlandırma: border-box; -webkit-box-boyutlandırma: border-box;  nav li: son çocuk bir border-right: 0;  

Sonra, menü içindeyken daha parlak bir renge sahip olacak : hover veya :aktif belirtmek, bildirmek.

 nav a: vurgulu, nav a: etkin background-color: # 8c99a4;  

… Ve son olarak, ekstra bağlantı gizlenecektir (masaüstü ekranı için).

 nav a # pull görüntüleme: yok;  

Bu noktada, yalnızca gezinmeyi şekillendiriyoruz ve tarayıcı penceresini yeniden boyutlandırdığımızda hiçbir şey olmuyor. Şimdi bir sonraki adıma geçelim.

Daha fazla okuma: CSS3 Kutu-boyutlandırma (Hongkiat.com)

Medya sorguları

CSS3 medya sorguları, stillerin bazı kesin kesme noktalarında veya özellikle cihaz ekranı boyutlarında nasıl kayacağını tanımlamak için kullanılır.

Navigasyonumuz başlangıçta beri 600px sabit genişlik, önce görüntülendiğinde stilleri tanımlayacağız 600px veya daha düşük ekran boyutu, pratik olarak, bu ilk kırılma noktamız.

Bu ekran boyutunda, iki menü bağlantısının her biri yan yana görüntülenir; ulburada genişliği olacak 100% Menü bağlantılarının % 50 genişlik için.

 @ media screen ve (maksimum genişlik: 600px) nav height: auto;  nav ul genişlik:% 100; Ekran bloğu; yükseklik: otomatik;  nav li genişlik:% 50; şamandıra: sol; pozisyon: göreceli;  nav li a sınır dibi: 1 piksel katı # 576979; sınır-sağ: 1 piksel katı # 576979;  nav a text-align: left; genişlik:% 100; metin girintisi: 25 piksel;  

… Ve ardından, ekran küçüldüğünde gezinmenin nasıl görüntüleneceğini de tanımlarız. 480 piksel x veya daha düşük (yani bu bizim ikinci sınır noktamız).

Bu ekran boyutunda, daha önce eklediğimiz ekstra bağlantı görünmeye başlayacak ve ayrıca bağlantıyı “Menü” simgesi sağ tarafındaki :sonra sözde eleman, Ana menü bağlantıları ekranda daha fazla dikey alan kazanmak için gizlenecek.

 Sadece @media ekran ve (en-genişlik: 480px) nav sınır-alt: 0;  nav ul görüntüleme: yok; yükseklik: otomatik;  nav a # pull görüntüleme: blok; arka plan rengi: # 283744; genişlik:% 100; pozisyon: göreceli;  nav a # pull: after content: ""; background: url ('nav-icon.png') tekrar yok; genişlik: 30px; yükseklik: 30px; ekran: satır içi blok; pozisyon: mutlak; sağ: 15px; üst: 10 piksel;  

Son olarak, ekran küçüldüğünde 320px ve alt menü yukarıdan aşağıya doğru dikey olarak görüntülenecektir.

 @ sadece medya ekranı ve (maksimum genişlik: 320px) nav li ekran: blok; şamandıra: yok; genişlik:% 100;  nav li a sınır dibi: 1 piksel katı # 576979;  

Şimdi tarayıcı penceresini yeniden boyutlandırmayı deneyebilirsiniz. Şimdi ekran boyutunu uyarlayabilmeli.

Daha fazla okuma: Standart Aygıtlar için Medya Sorguları.

Menüyü Gösterme

Bu noktada, menü hala gizlenecek ve yalnızca üzerine dokunarak veya tıklatarak gerektiğinde görünebilecek “Menü” link ve jQuery kullanarak etkisi elde edebilirsiniz slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', function (e) e.preventDefault (); menu.slideToggle (););); 

Bununla birlikte, tarayıcı penceresini, menüyü küçük bir ekrana henüz gördükten ve gizledikten hemen sonra yeniden boyutlandırdığınızda, menü görüntü yok jQuery tarafından oluşturulan stil, öğeye hala ekli.

Bu nedenle, pencereyi yeniden boyutlandırma üzerine bu stili aşağıdaki gibi kaldırmamız gerekiyor:

 $ (window) .resize (function () var w = $ (window) .width (); eğer (w> 320 && menu.is (': hidden'))) menu.removeAttr ('style'); ); 

Tamam, ihtiyacımız olan tüm kodlar bu, artık navigasyonumuzu aşağıdaki bağlantılardan görüntüleyebiliyoruz ve bunu aynı anda çeşitli genişlikte görebilmeniz için Responsinator gibi duyarlı bir tasarım test aracında test etmenizi öneririz..

• gösteri
• Kaynak İndir

Bonus: Alternatif Bir Yol

Bu yayında daha önce belirttiğimiz gibi, bunu yapmanın ve denilen bir JavaScript kütüphanesini kullanmanın başka yolları da var. SelectNav.js en kolay yollardan biri. Bu, jQuery gibi başka bir üçüncü taraf kütüphanesine güvenmeyen saf bir JavaScript'tir..

Temel olarak, liste menünüzü çoğaltır ve bir açılan menüden, hangisinin gizleneceğini veya ekran boyutuna bağlı olarak medya sorguları aracılığıyla gösterilebileceğini seçebilirsiniz.

Bu uygulamada sevdiğim avantajlardan biri de navigasyon tarzı konusunda endişe etmememiz gerekmiyor.

Menü, yerel kullanıcı arayüzünü cihazın kendisinden kullanacaktır..