menü simgesi tıklandığında içeriği karartmak için siyah kapak olan “solma” kimliğine sahip.
Sonunda jQuery’de Google’dan ve kendi yazı dosyamızdan bahsedeceğiz. Ama önce stilleri gözden geçirelim.
CSS ile şekillendirme
Dolayısıyla, tüm CSS stillerinden geçmeyeceğiz (eğer isterseniz demoda teftiş veya kaynak görüntüleyebilirsiniz). Genelde, sayfanın genel stilini oluşturmak için kullanılırlar. Bu makalenin Bunu çözeceğiz ve etki için önemli olan birkaç kod parçasına bakacağız. Yani, her şeyden önce:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Kullanıcının tarayıcısı JavaScript'in mevcut olmaması durumunda (Modernizr'i kullanarak daha önce gördüğümüz HTML öğesinde bu sınıf adı) emin olmamızla baş başa kalacağız. Daha sonra başlıkta # fallback-nav göstereceğiz. #fade DIV 'ini ve navigasyon ikonunu saklayacağız. Bu bizim geri dönüş çözümümüzdür, bu yüzden geri dönüş menüsünün daha geleneksel bir şekilde biçimlendirilmesi gerekir. JavaScript mevcutsa, son satırda da görebileceğiniz gibi bu çözümü saklıyoruz.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Yani bu bölümde başlığımızdaki menü ikonumuza stil veriyoruz, oldukça basit, sadece göreceli bir pozisyon ve yüksek bir z indeksi veriyoruz (daha sonra içeriğin geri kalanı soluklaştığı zaman işe yarayacaktır) üst). Ayrıca jQuery'yi kullanarak ekleyip çıkaracağımız bir “açık” sınıfına geldiğinde rengi beyaza değiştiriyoruz. Ayrıca, “solma” kimliğine sahip tek bir divun tüm ekranı doldurması ve% 50 şeffaflık ile sağlam bir siyahla doldurulduğunu görebiliyoruz. Kullanıcının JavaScript'i yoksa, bu siyah filtre gizlenir, eğer değilse jQuery ile gizleriz. Şimdi menüye bakalım:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Öyleyse son ama en az ana menü. İlk olarak şunu eklemeliyim ki, bu, çapraz tarayıcı uyumlu hale gelmeden önce birkaç satıcı önekine ihtiyaç duyan basitleştirilmiş koddur. Bunu başarmak için harika bir araç kullanmanızı öneririz. Autoprefixer sizin için tüm doğru önekleri eklemek.
Öyle söyleniyor ki, neyin gerekli olduğuna bakalım: her şeyden önce, bu sayfanın üst kısmında sabit konumlandırma ve sağa 250px negatif var. Bu, orada olduğunu ancak sadece "ekran dışı" anlamına gelir (maksimum 250 piksel genişliğe sahip olduğu için). Yükseklik de% 100'dür, böylece tüm pencereyi yukarıdan aşağıya doldurur. Menüde ayrıca 0 ile 9 arasında (siyah filtrenin üstünde) bir z-indeksi gerekir. Sonra, burada sihir gerçekleşir, bir ekrana sahiptir: flex; 'esnek-yön' özelliğine sahip başka bir özellik (buradaki 'sütun' olarak adlandırdığımız, varsayılan "satır" yerine bu, esnek öğe olan çocuklar (menüdeki bağlantılar) anlamına gelir. Ebeveynler eşit parçalarda).
Bu yüzden tüm bunlar menü tutucusu # main-nav'ı hedefliyordu, daha sonra bağlantıyı şekillendirirken onlara 1'lik esnek bir değer veriyoruz. Bu, bağlantıların tüm yüksekliği eşit olarak doldurmasını sağlıyor. Daha sonra bu linklere 'flex' görüntü değeri de verilir, bu da linklerin içindeki herhangi bir elemanın bundan etkileneceği anlamına gelir. Esnek yönün hala 'sütun' olduğundan emin olduktan sonra “haklı içerik: merkez” özelliğini ekliyoruz. Bu, metnin kendisini dikey olarak da merkezlenmiş olan bağlantıların içinde yapar. ![]()
# main-nav etiketlerinin tam anlamıyla semantik olmayan, ancak öğeleri dikey olarak ortalamak için çok hızlı ve kolay bir yoludur.)
Şimdiye kadar yaptığımız hiçbir şeyi göremiyoruz, şimdi daha önce aradığımız kendi scripts.js dosyası ile işlevselliğimizi eklememiz gerekiyor.
JQuery ile işlevin eklenmesi
Bu efektin betiği çok küçük ve basit, ama önce hepsini buraya koyacağım ve sonra neler olduğunu açıklayacağım:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"taşma": "gizli"}); $ ('# main-nav'). Canlandırma ({right: "0"}, 400); $ (this) .removeClass ('kapalı' .) .addClass ( 'açık') html ( 'x');. $ ( '#' fade) fadeIn (); } else ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"taşma": "scroll"}); $ ('# main-nav'). Canlandırma ({right: "-250px"}, 400); $ (this) .removeClass ('open ') .addClass (' kapalı ') html (.' ☰. '); $ (' # 'fade) fadeOut (); }});});
Öncelikle siyah filtreyi saklıyoruz. Daha sonra yaptığımız her şey, menü simgesi bağlantısına bağlı bir tıklama olayına eklenmiş bir fonksiyonun içinde yer alacaktır. Bu tıklandığında iki farklı durum veya durum var; Biri, menü zaten gizli (varsayılan durum gibi) veya menü görüntülendiğinde birdir. Bu yüzden, menü simgesi bağlantısının eklediğimiz bir kapalı sınıf adı var ve ayrıca açık için de tarzımız var. İlk “if” ifademiz, link kapalıysa (bu yüzden varsayılan). Eğer durum buysa, o zaman bütün
öğe sola 250px animasyonludur ve sayfanın kaydırılmasını durdurur. # Main-nav div da canlandırılıyor, doğru değeri -250px'den 0'a değiştiriyoruz. Sonra bağlantıdan 'kapalı' sınıfını kaldırıyoruz ve 'açık' dan birini ekliyoruz. html'yi üç satırın özel karakterinden "x" 'e çevirerek. Son olarak, içeriğin geri kalanını karanlık yapmak için siyah filtremizde soluyoruz. Ve bu kadar! Bu bize menünün açık durumunu verir.
Şimdi “else if” ifadesi, menü bağlantısındaki açık sınıfı hedefliyor. Yaptığımız zaman, daha önce yaptığımız her şeyin tersini yapıyoruz, bedeni tekrar pozisyonuna getiriyoruz, ayrıca menüyü ekran dışı bırakıyoruz. 'Açık' sınıfının menü simgesinden kaldırılması, 'kapalı' eklenmesi ve içeriğin simgeye geri döndürülmesinin yanı sıra #fade div'inizin silinmesi. Her şey plana göre giderse, işlevsellik şöyle görünmelidir:
Sonuç
İşte orada var! Bu, modern web tasarımının tarzıyla, özellikle de mobil tasarımlarda giderek daha fazla gördüğümüz bu harika etkiyi yapmanın bir yoludur. Bu etki, herhangi bir eklenti gerektirmeyen ve her projenin ihtiyaçlarına göre tamamen özelleştirilebilen güzel ve basit bir çözümdür. Ayrıca, bazı diğer faydalı araçların yanı sıra esnek kutudan da yararlanma şansı oldu. Farklı bir şekilde yaptığınız veya sadece düşündüğünüz bir şey varsa yorumlarda bana haber verin!
Öne çıkan görsel / küçük resim, sürgülü kapı görüntüsü Shutterstock üzerinden.
