این به همان اندازه ساده است که ما با نشانه گذاری پیش خواهیم رفت، به این معنی که اگر جاوا اسکریپت و CSS وجود نداشته باشد، محتوای ما را شکسته نمی کند، همچنان قابل مشاهده خواهد بود (به غیر از نمادها، اما به دلیل اینکه دهانه های آنها خالی است. ما به هر حال آنها را نخواهیم دید). پس این ماست backup، بدون سبک و محتوای جاوا اسکریپت:

اکنون که مطمئن شدیم محتوا امن است. ما می توانیم حرکت کنیم روی به CSS ما تا زیبا به نظر برسد، اما مهمتر از آن آن را برای عملکرد jQuery تنظیم کنید.

استایل دادن به شبکه با CSS

بیایید CSS را به سه قسمت تقسیم کنیم. ضروری است که برای عملکرد جی کوئری ما لازم است، کد فونت آیکون، و سپس استایل های نهایی برای زیبا جلوه دادن آن. بنابراین این بخش اول است:

#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; }

پس بیایید از آنچه در حال رخ دادن است عبور کنیم روی اینجا. ما ابتدا بسته‌بندی‌های جعبه جداگانه (سرویس) را هدف قرار می‌دهیم و آنها را به شکل شبکه مرتب می‌کنیم، با دادن عرض سیال، حداقل ارتفاع و شناور کردن آن‌ها در سمت چپ (به همین دلیل است که لفاف کلی دارای یک فیکس شفاف شناور است). سپس مهم است که سرریز آنها پنهان شود (در غیر این صورت ما محتوای اضافی را همیشه می بینیم) و موقعیت آنها نسبی است. سپس با استفاده از چند پرسش رسانه ای برای اندازه های مختلف صفحه نمایش، و افزایش عرض هر سلول، این شبکه را پاسخگوتر می کنیم. این کد به این معنی است که شبکه ما با طراحی 3 ستونی در اندازه کامل دسکتاپ شروع می شود و از یک ستون دو ستونی عبور می کند و در نهایت از یک ستون در حالی که اندازه صفحه را کاهش می دهد.

اکنون که جعبه های بیرونی در جای خود قرار دارند، بخش های داخلی، نماد .service-icon و .service-description را هدف قرار می دهیم. اینها را در موقعیت مطلق قرار می دهیم (از این رو حداقل ارتفاع در سبک قبلی) و هر دو را در سمت چپ بالا قرار می دهیم (موقعیت توضیحات را در یک لحظه تغییر می دهیم). سپس آنها را 100% پهن و بلند می کنیم تا عنصر اصلی خود را پر کنند، و بقیه فقط برای جلوه بصری است. در نهایت ما صرفاً توصیف div را هدف قرار می دهیم و مقدار سمت چپ را 100% می کنیم. این کار کل جعبه را به سمت راست هل می دهد و به دلیل سرریز پنهان از دید خارج می شود روی بخش سرویس. این مقدار موقعیت «چپ» چیزی است که ما با جی کوئری هدف قرار داده و متحرک خواهیم کرد، و به همین دلیل است که اکنون تعریف آن مهم است.

فونت آیکون

بیا حرکت کنیم روی در مرحله بعد، در اینجا از @font-face استفاده می کنیم تا فونت آیکون خود را دریافت کنیم و نام کلاس هایی را که قبلاً در HTML استفاده کرده ایم به عنوان نمادهای مناسب تعریف کنیم. اولین گام یافتن یک منبع آنلاین است که می تواند یک فونت آیکون متناسب با نیازهای شما ایجاد کند، تعداد کمی وجود دارد اما برای این مثال تصمیم گرفتم از آن استفاده کنم. فوق العاده. در سایتی که ابتدا نمادهایی را که می خواهید استفاده کنید انتخاب می کنید، این به وضوح برای هر پروژه ای که کار می کنید تغییر می کند روی. اما سپس می توانید برخی از اطلاعات را تغییر دهید، مانند نام کلاس نمادها و نام فونت مانند این:

بنابراین همانطور که می بینید، نام کلاس هایی را که در HTML استفاده کرده ایم انتخاب کرده ام تا بدون هیچ مشکلی مطابقت داشته باشند. سپس این سرویس به شما یک پوشه “fonts” و مقداری کد را دانلود می کند. پوشه “fonts” را در پوشه css خود (یا هر جایی که مناسب شماست) قرار دهید. سپس کدی که می دهند را بردارید و به فایل css خود اضافه کنید. در اینجا چیزی است که شما نیاز دارید:

@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";
}

و شما آن را دارید. اگر پروژه را دوباره بارگذاری کنید، نمادها ظاهر می شوند. اکنون تنها چیزی که باقی مانده این است که یک ظاهر طراحی شده را تمام کنید تا شبیه نسخه ی نمایشی نهایی شود.

سبک های نهایی

بیایید با سبک های نهایی باقی مانده به سرعت کار را تمام کنیم. در اینجا هیچ چیز ضروری نیست، فقط طراحی کنید تا آنطور که می‌خواهیم به نظر برسد، بنابراین همه چیز کاملاً توضیحی است. در اینجا کدی برای وسط شبکه و دادن حداکثر عرض آن وجود دارد. همچنین برای ایجاد اثر شناور زیبا روی آیکون ها:

@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 استفاده مجدد از همان قطعه کد برای کل شبکه است. ما برای یک رویداد کلیک گوش می دهیم (روی جعبه سرویس) سپس وقتی این اتفاق می‌افتد، موقعیت نماد را متحرک می‌کنیم تا آن را جابجا کنیم، و توضیحات را وارد می‌کنیم، همچنین یک نام کلاس برای کمک به عملکرد اضافه می‌کنیم. بنابراین ابتدا جی کوئری را وارد کنید روی شما page، سپس کد ما را یا در یک فایل اسکریپت دیگر یا داخل یک تگ