Ta siatka to zabawny i przyjemny sposób na pokazanie wielu informacji w tej samej ilości miejsca, poprzez przesunięcie każdej sekcji siatki po kliknięciu lub najechaniu i wyświetlenie dodatkowej zawartości.
W procesie tworzenia przyjrzymy się niezbędnym znacznikom, niektórym stylom i sprawimy, że sieć stanie się responsywna, a także zaimplementujemy czcionkę internetową z ikonami. Przeanalizujemy również potrzebne jQuery oraz różne dostępne opcje.
Tak będzie wyglądać po zakończeniu:
Jak widać, jest to całkiem proste! Istnieje element div z identyfikatorem "usług" i nazwą klasy float. Wewnątrz jest sześć różnych
Jest to tak proste, jak to zrobimy ze znacznikiem, co oznacza, że jeśli nie ma JavaScript i nie ma CSSów, to nie będzie on łamał naszych treści, ale nadal będzie widoczny (oprócz ikon, ale ponieważ są to puste spacje i tak ich nie zobaczymy). To jest nasza kopia zapasowa, brak stylów i brak treści JavaScript:
Teraz jesteśmy pewni, że zawartość jest bezpieczna. Możemy przejść do naszego CSS, aby wyglądał ładnie, ale co ważniejsze, ustawić go na funkcjonalność jQuery.
Złamajmy CSS na trzy części; niezbędny do wykonania naszej pracy jQuery, kodu czcionki ikon, a następnie końcowych stylów, aby wyglądały ładnie. Oto pierwsza sekcja:
#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; }
Przejdźmy więc przez to, co się tutaj dzieje. Najpierw celujemy w poszczególne opakowania pudełek (.service) i układamy je w kształt kratki, nadając im szerokość płynu, minimalną wysokość i unosząc je w lewo (dlatego ogólna owijka ma poprawkę clearfloat). Następnie ważne jest, aby ich przelew został ukryty (w przeciwnym razie przez cały czas widzieliśmyby dodatkową zawartość) i ich względną pozycję. Następnie sprawiamy, że sieć jest bardziej responsywna dzięki zastosowaniu kilku zapytań o media dla różnych rozmiarów ekranu i zwiększania szerokości każdej komórki. Ten kod oznacza, że nasza siatka rozpocznie się od projektu z 3 kolumnami w pełnym rozmiarze pulpitu i przejdzie przez dwie kolumny, a następnie w końcu jedną kolumnę przy zmniejszaniu rozmiaru ekranu.
Teraz, gdy zewnętrzne pola są na miejscu, celujemy w wewnętrzne sekcje, .service-icon i .service-description. Wykonujemy te pozycje absolutnie (stąd minimalna wysokość w poprzednim stylu) i umieszczamy je w lewym górnym rogu (za chwilę zmieniamy pozycję opisu). Następnie robimy je w 100% szerokimi i wysokimi, więc wypełniają swój element macierzysty, a reszta służy wyłącznie efektowi wizualnemu. Na koniec kierujemy się wyłącznie do opisu div, a lewą wartość podajemy w 100%. Spycha to całe pudełko w prawo, a poza zasięgiem wzroku z powodu przelewu ukrytego na div .service. Ta "lewa" wartość pozycji jest tym, co będziemy celować i animować za pomocą jQuery, i dlatego ważne jest, aby ją teraz zdefiniować.
Przejdźmy do następnego kroku, tutaj użyjemy @ font-face, aby pobrać czcionkę ikony i zdefiniować nazwy klas, które już używaliśmy w kodzie HTML, aby pojawiły się jako odpowiednie ikony. Pierwszym krokiem jest znalezienie zasobu online, który może stworzyć czcionkę ikonową dopasowaną do twoich potrzeb. Jest ich sporo, ale dla tego przykładu zdecydowałem się użyć Fontastic . Na stronie najpierw wybierasz ikony, które chcesz użyć, to oczywiście zmienia się dla każdego projektu, nad którym pracujesz. Ale możesz zmienić niektóre informacje, takie jak nazwy klas ikon i nazwa czcionki w ten sposób:
Jak widzisz, wybrałem nazwy klas, które wykorzystaliśmy w kodzie HTML, aby dopasować je bez kłopotów. Usługa ta umożliwia pobranie folderu "fonts" i trochę kodu. Umieść folder "fonts" w folderze css (lub w dowolnym miejscu). Następnie weź kod, który podają, i dodaj go do swojego pliku css. Oto czego potrzebujesz:
@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";}
I tam to masz. Po przeładowaniu projektu pojawią się ikony. Teraz pozostaje tylko wykończenie stylu, aby wyglądało jak ostateczne demo.
Zakończmy szybko końcowymi stylami, które pozostały. Tutaj nie ma nic istotnego, tylko projekt, który sprawi, że będzie wyglądał tak, jak chcemy, więc wszystko to jest dość wymowne. Oto kod do wyśrodkowania siatki i podania jej maksymalnej szerokości. Aby również uzyskać miły efekt na ikony:
@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;}
Naszym celem z jQuery jest ponowne użycie tego samego fragmentu kodu dla całej siatki. Będziemy słuchać zdarzenia kliknięcia (w polu serwisowym), a kiedy to się stanie, będziemy animować położenie ikony, aby je przenieść, i przynieść opis, dodamy też nazwę klasy, aby pomóc funkcjonalność. Najpierw włącz jQuery na swoją stronę, a następnie dodaj nasz kod w innym pliku skryptu lub wewnątrz