با سلام
در این مطلب کد ایجاد تب بسیار شیک و ساده و زیبا رو براتون آموزش میدم.
همیشه تب‌های CSS زیادی در سایت‌های ایرانی و خارجی وجود داشته اند که هر کدام به صورت خشک بودند و اصلا کاربر پسند نیستند.
در این تب بسیار خوب از تکنیک‌های CSS استفاده شده است و بسیار کاربرپسند نیز میباشد.
آموزش ایجاد تب CSS
برای این کار کد CSS زیر رو به فایل CSS سایت خوب اضافه کنید:
کد:
[FONT=Tahoma][COLOR=Navy][SIZE=2][COLOR=#000000][FONT=Tahoma]
[/COLOR][/SIZE][/COLOR][COLOR=#000000].tabs [/COLOR][COLOR=#000000]{[/COLOR][FONT=Tahoma][COLOR=Navy][SIZE=2]
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eee"]#eee[/URL]
padding: 10px;
border: 1px solid [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ccc"]#ccc[/URL]
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ccc"]#ccc[/URL]
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
[COLOR=#000000][FONT=Tahoma]}[/COLOR][/SIZE][/COLOR]سپس کد HTML زیر رو در جایی که میخواهید نمایش دهید قرار دهید:
HTML:
<div class="tabs">
<div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab One</label>
<div class="content"> stuff </div> </div>
<div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab Two</label>
<div class="content"> stuff </div> </div>
<div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Tab Three</label>
<div class="content"> stuff </div> </div>
</div>- دموی آنلاین تب
- منتشرکننده : تارمستر