ساخت تب متحرک محتوا با CSS3

در این مقاله آموزشی به پیاده سازی چند تب متحرک ساده محتوا با CSS3 با استفاده از دکمه‌های رادیویی می‌پردازیم.


تب‌های محتوا المان‌های بسیار رایج و شناخته شده در طراحی سایت هستند و اغلب بسیار مفید می‌باشند. بنابراین، در آموزش امروز لیداوب، می‌خواهیم چند تب متحرک ساده محتوا با CSS3 را پیاده سازی کنیم که در آن از checked pseudo-class و sibling combinatory استفاده می‌کنیم. توجه داشته باشید که خصوصیات CSS3 تنها در مرورگرهایی اجرا می‌شوند که از آن‌ها پشتیبانی می‌کنند.

ایجاد تب متحرک محتوا با CSS3

کدهای HTML

ما از المان‌های input برای ارتباط با بخش کلاس content استفاده می‌کنیم. بخش content شامل تمام "tab pages" می‌باشد. برای هر یک از المان‌های input ما یک المان label خواهیم داشت. تمام lableها استایلی مشابه با تب‌ها خواهند داشت:

<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
	<label for="tab-1" class="tab-label-1">About us</label>

	<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
	<label for="tab-2" class="tab-label-2">How we work</label>

	<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
	<label for="tab-3" class="tab-label-3">References</label>

	<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
	<label for="tab-4" class="tab-label-4">Contact us</label>

	<div class="clear-shadow"></div>

	<div class="content">
		<div class="content-1">
            <p>Some content</p>
		</div>
		<div class="content-2">
            <p>Some content</p>
		</div>
		<div class="content-3">
            <p>Some content</p>
		</div>
		<div class="content-4">
            <p>Some content</p>
		</div>
	</div>
</section>

هر یک از عناصر input دارای یک مقدار هستند و ما همیشه می‌توانیم با افزودن خصوصیت checked، یک ورودی را به صورت پیش‌فرض در حالت انتخاب قرار دهیم.

کدهای CSS

اولین کاری که باید انجام دهیم این است که ابعاد را مشخص کرده و inputها را با تنظیم درجه کدری روی صفر، پنهان کنیم:

tabs {
    position: relative;
	margin: 40px auto;
	width: 750px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
	cursor: pointer;
}
.tabs input#tab-2{
	left: 120px;
}
.tabs input#tab-3{
	left: 240px;
}
.tabs input#tab-4{
	left: 360px;
}

inputها، لیبل‌ها را پوشش می‌دهند. به نظر می‌رسد که ما روی لیبل کلیک کرده‌ایم اما در واقع ما روی input کلیک می‌کنیم. این یک ترفند است که در مرورگرهای موبایل هم اجرا می‌شود (در برخی از مرورگرهای موبایل، کلیک روی لیبل، روی محتوای مربوطه تمرکز نخواهد کرد).

سپس، با تعریف چند استایل تمیز برای لیبل‌ها، به آن‌ها ظاهری مشابه با تب‌ها می‌دهیم:

.tabs label {
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 80px;
	color: #385c5b;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs input:hover + label {
	background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

از آنجایی که نمی‌خواهیم بخش پایینی سایه کادر نمایش داده شود، با استفاده از یک شبه المان :after که هیچ محتوایی ندارد، آن را می‌پوشانیم:

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

وقتی روی یک تب (label) کلیک می‌کنیم، استایل و رنگ آن با دیگر تب‌ها متفاوت خواهد بود. آنچه اهمیت دارد این است که مطمئن شویم لیبل "checked" در روی تمام لایه‌های دیگر در تب‌ها قرار بگیرد. بنابراین، ما بالاترین z-index را به آن می‌دهیم:

.tabs input:checked + label {
    background: #fff;
	z-index: 6;
}

همانطور که قبلا هم گفته شد، بخش content یا محتوا حاوی تمام صفحات تب است و ما z-index آن را روی ۵ تنظیم می‌کنیم تا درست زیر لیبل انتخاب شده قرار بگیرد. به این روش، سایه کادری بخش محتوا، تمام لیبل‌های دیگر را خواهد پوشاند. در داخل بخش محتوا چهار بخش وجود دارد که هر کدام از آن‌ها دارای محتوای مربوط به خود هستند. به صورت پیش‌فرض (وقتی لیبل مربوط به آن‌ها در حالت انتخاب یا کلیک شده قرار ندارد)، پنهان هستند. بنابراین، ما درجه تاری آن را روی صفر و z-index آن را روی ۱ تنظیم می کنیم. ما نمی‌توانیم از خصوصیت display: none استفاده کنیم چون در این تغییر، پشتیبانی نمی‌شود:

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    transition: all linear 0.1s;
}

.content div h2,
.content div h3{
	color: #398080;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid rgba(63,148,148, 0.1);
}

وقتی می‌خواهیم محتوا نمایش یابد (لیبل در حالت کلیک شده قرار بگیرد)، درجه تاری را روی ۱ قرار داده و z-index را افزایش می‌دهیم چون می‌خواهیم این بخش از محتوا روی بقیه بخش‌ها قرار بگیرد:

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    transition: all ease-out 0.2s 0.1s;
}

مطالعه مقالات بیشتر در لیداوب:

در این مقاله به یک نمونه ساده از نمایش دادن و پنهان کردن محتوا پرداختیم. امیدوارم این آموزش برای شما مفید واقع شود. برای مطالعه مقالات بیشتر، کتابخانه آنلاین لیداوب را دنبال کنید.