Bu ızgara, aynı alandaki birden fazla bilgi parçasını göstermenin eğlenceli ve hoş bir yoludur, ızgaradaki her bir bölümü tıklama veya gezinme üzerinde uzaklaştırarak ve fazladan içerik görüntüler.
Oluşturma işleminde, gerekli işaretlemeye, bazı stillere ve ızgaraya yanıt vermenin yanı sıra bir simge web fontunun uygulanmasına bakacağız. Ayrıca, mevcut olan farklı seçeneklerin yanı sıra gereken jQuery'yi de inceleyeceğiz.
Bitirdikten sonra nasıl görüneceği budur:
Gördüğünüz gibi, oldukça basit! 'Servisler' kimliğine ve net float sınıf ismine sahip bir div var. Sonra bunun içinde altı farklı
Bu, biçimlendirme ile gideceğimiz kadar basittir, yani, JavaScript yok ve CSS yoksa, içeriğimizi gerçekten kırmayacaksa, yine de görünür olacaktır (simgelerden başka, ancak boş alanlar gibi) biz onları zaten görmeyiz). Yani bu bizim yedeğimiz, stil yok ve JavaScript içeriği yok:
Artık içeriğin güvenli olduğundan eminiz. Güzel görünmesini sağlamak için CSS'imize geçebiliriz, ancak daha da önemlisi jQuery işlevselliği için ayarlayabiliriz.
CSS'yi üç parçaya ayıralım; jQuery'mizi, ikon yazı tipini ve daha sonra güzel görünmesini sağlamak için son stilleri yapmak için gerekli olan temel. İşte ilk bölüm:
#services .service {width: 33%;float: left;padding: 0.5em;min-height: 200px;overflow: hidden;position: relative;border: 1px solid #eee;}@media screen and (max-width: 600px) {#services .service {width: 50%;}}@media screen and (max-width: 320px) {#services .service {width: 100%;}}#services .service .service-icon, #services .service .service-description {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #fff;padding: 50px 0;color: #222;}#services .service .service-description {left: 100%;background: #249EC2;color: white;padding: 50px;}#services .service .service-description:hover { cursor: pointer; }
O zaman burada neler olup bittiğini inceleyelim. İlk olarak, tek tek kutu sarmalayıcıları (.service) hedefliyoruz ve onları ızgara biçiminde düzenliyoruz, onlara bir akışkan genişlik, minimum yükseklik ve onları solarak veriyoruz (bu yüzden genel sarıcı net bir file fikrine sahip). Daha sonra önemli ölçüde taşmaları gizli hale getirildi (aksi takdirde ekstra içeriği her zaman görebilirdik) ve bunların konumları göreceli. Daha sonra bu ızgarayı, farklı ekran boyutları için bir çift medya sorgusu kullanarak ve her hücrenin genişliğini artırarak daha duyarlı bir hale getiriyoruz. Bu kod, ızgaramızın tam masaüstü boyutunda 3 sütun tasarımında başlayacağı ve iki sütundan geçtiğini ve daha sonra ekran boyutunu azaltarak bir sütun oluşturduğunu gösterir.
Artık dış kutular yerinde, iç bölümleri, .service-icon ve .service-description'ı hedefliyoruz. Bunları mutlak olarak konumlandırıyoruz (bu nedenle önceki stildeki minimum yükseklik) ve her ikisini de sol üstte konumlandırıyoruz (açıklamanın bir andaki konumunu değiştireceğiz). Daha sonra onları% 100 geniş ve yüksek yaparız, böylece ebeveyn elemanlarını doldururlar ve kalanlar sadece görsel efekt içindir. Son olarak, yalnızca açıklama divini hedefliyoruz ve sol değerini% 100 yapıyoruz. Bu, tüm kutuyu sağa, ikincisi de .service div'inde saklanmış taşma nedeniyle iter. Bu 'sol' konum değeri, jQuery ile hedefleme ve animasyon yapmamız gereken şeydir ve bu yüzden şimdi tanımlamak önemlidir.
Bir sonraki adıma geçelim, burada ikonumuzun fontunu almak için font-face'i kullanacağız ve HTML'de kullandığımız sınıf adlarını doğru simgeler olarak görünecek şekilde tanımlayacağız. İlk adım, ihtiyaçlarınıza uygun bir simge yazı tipi oluşturabilen bir çevrimiçi kaynak bulmaktır, orada bir kaç tane var ama bu örnek için kullanmaya karar verdim Fontastic . Sitede, kullanmak istediğiniz simgeleri ilk seçtiğinizde, bu, üzerinde çalıştığınız proje için açıkça değişir. Ancak, simgelerin sınıf adları ve yazı tipi adı gibi bazı bilgileri değiştirebilirsiniz:
Görebildiğiniz gibi, HTML'de kullandığımız sınıf isimlerini seçtim, böylece hiçbir güçlükle eşleşecekler. Servis daha sonra size bir 'font' klasörü ve bazı kodların indirilmesini sağlar. 'Fonts' klasörünü css klasörünüze (veya size uygun olan her yere) yerleştirin. Sonra verdikleri kodu alın ve css dosyanıza ekleyin. İhtiyacınız olan şey:
@font-face {font-family: "slidable-grid";src:url("fonts/slidable-grid.eot");src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),url("fonts/slidable-grid.woff") format("woff"),url("fonts/slidable-grid.ttf") format("truetype"),url("fonts/slidable-grid.svg#slidable-grid") format("svg");font-weight: normal;font-style: normal;}[class^="icon-"]:before,[class*=" icon-"]:before {font-family: "slidable-grid" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;font-size: 4em;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-web:before {content: "a";}.icon-graphic:before {content: "b";}.icon-logo:before {content: "c";}.icon-dev:before {content: "d";}.icon-3d:before {content: "e";}.icon-illustration:before {content: "f";}
İşte buyur. Projeyi yeniden yüklerseniz, simgeler görünecektir. Artık geriye kalan tek şey, son demoya benzemesi için stilin bitmesidir.
Bırakılan son stilleri hızlıca bitirelim. İşte hiçbir şey gerekli değil, sadece istediğimiz gibi görünmesini sağlamak için tasarım, bu yüzden hepsi oldukça açıklayıcı. Izgarayı ortalamak ve maksimum genişlik vermek için kod. Ayrıca ikonlarda güzel vurgulu etkisi yapmak için:
@import url(reset.css);* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }.cf:after { clear: both; }.cf { *zoom: 1; }body {font-family: 'Exo 2', sans-serif; /* Google Font http://google.com/fonts */text-align: center;color: #999;background: #444;-webkit-font-smoothing: antialiased;}#services {max-width: 850px;margin: 0 auto;}#services .service .service-icon:hover {cursor: pointer;color: #249EC2;}#services .service .service-icon span {display: block;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;transition: all 0.1s linear;}#services .service .service-icon:hover span {position: relative;bottom: 5px;}
JQuery ile hedefimiz, tüm ızgara için aynı kod snippet'ini yeniden kullanmaktır. Bir tıklama etkinliğini (servis kutusunda) dinleyeceğiz, sonra bu olduğunda, simgeyi hareket ettirerek konumlandıracağız ve açıklamayı getireceğiz. Ayrıca, size yardımcı olacak bir sınıf adı da ekleyeceğiz işlevsellik. Bu nedenle, önce sayfanızda jQuery'yi, ardından kodumuzu başka bir komut dosyasında veya bir