امروز : سه شنبه ۳ مهر ۱۳۹۷ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

برای استعلام یا ارسال سفارش اینجا کلیک کنید.

بخش دانلود

آموزش ساخت تب با استفاده از HTML و CSS

nice-clean-tabs-component آموزش ساخت تب با استفاده از HTML و CSS

ساخت تب با استفاده از اچ تی ام ال و سی اس اس

در برخی از سایت دیده اید که بسیاری از طراحان مطالب را در یک باکس و بصورت تب نمایش میدهند. این نوع نمایش هم کلاس کاری رو بالا میبره و هم اینکه از اسکرول زیاد صفحه جلوگیری میکنه و بهتر نمایش داده میشه. امروز آموزش ساخت تب رو در سایت ارائه میدهیم امیدوارم مفید واقع باشیم. با ما همراه باشید.

آموزش ساخت تب با استفاده از HTML و CSS

برای اینکار ابتدا یک فایل html باز کنید و لیست تب های خود را بصورت زیر وارد نمایید.

<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">  
<input type="radio" id="tab4" name="tab-control">
<ul>
  <li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>
  <li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>
  <li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>
  <li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li>
</ul>

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

<div class="content">
  <section>
    <h2>Tab 1 content</h2>
  </section>
  <section>
    <h2>Tab 2 content</h2>
  </section>
  <section>
    <h2>Tab 3 content</h2>
  </section>
  <section>
    <h2>Tab 4 content</h2>
  </section>
</div>

سپس تگ های زیر را قرار دهید این کار باعث ایجاد افکت اسلایدر مانند با انتخاب تب ها می شود.

<div class="slider"><div class="indicator"></div></div>

حالا نوبت فراخوانی کدهای استایل یا همان سی اس اس css رسیده.
کدهای زیر رو در یک فایل به نام style.css بریزید و سپس از طریق فایل html فراخوانی کنید.

.tabs {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: relative;
  background: white;
  padding: 50px;
  padding-bottom: 80px;
  width: 70%;
  height: 250px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  border-radius: 5px;
  min-width: 240px;
}

.tabs input[name="tab-control"] { display: none; }

.tabs .content section h2, .tabs ul li label {
  font-weight: bold;
  font-size: 18px;
  color: #428BFF;
}

.tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 10px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tabs ul li {
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 25%;
  padding: 0 10px;
  text-align: center;
}

.tabs ul li label {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #929daf;
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tabs ul li label br { display: none; }

.tabs ul li label svg {
  fill: #929daf;
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  outline: 0;
  color: #bec5cf;
}

.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; }

.tabs .slider {
  position: relative;
  width: 25%;
  -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.tabs .slider .indicator {
  position: relative;
  width: 50px;
  max-width: 100%;
  margin: 0 auto;
  height: 4px;
  background: #428BFF;
  border-radius: 1px;
}

.tabs .content { margin-top: 30px; }

.tabs .content section {
  display: none;
  -webkit-animation-name: content;
  animation-name: content;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  line-height: 1.4;
}

.tabs .content section h2 {
  color: #428BFF;
  display: none;
}

.tabs .content section h2::after {
  content: "";
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background: #428BFF;
  margin-top: 5px;
  left: 1px;
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
  cursor: default;
  color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; }

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
  cursor: default;
  color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; }

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
  cursor: default;
  color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
  -webkit-transform: translateX(200%);
  transform: translateX(200%);
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; }

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
  cursor: default;
  color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
  -webkit-transform: translateX(300%);
  transform: translateX(300%);
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; }
@-webkit-keyframes 
content {  from {
 opacity: 0;
 -webkit-transform: translateY(5%);
 transform: translateY(5%);
}

to {
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}
}
@keyframes 
content {  from {
 opacity: 0;
 -webkit-transform: translateY(5%);
 transform: translateY(5%);
}

to {
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}
}
@media (max-width: 1000px) {

.tabs ul li label { white-space: initial; }

.tabs ul li label br { display: initial; }

.tabs ul li label svg { height: 1.5em; }
}
@media (max-width: 600px) {

.tabs ul li label {
  padding: 5px;
  border-radius: 5px;
}

.tabs ul li label span { display: none; }

.tabs .slider { display: none; }

.tabs .content { margin-top: 20px; }

.tabs .content section h2 { display: block; }
}

برای فراخوانی فایل استایل هم میتونید از کد زیر استفاده کنید.
دقت کنید که این کد را قبل از بسته شد کد هدر head اضافه کنید.

<link href="style.css" rel="stylesheet" type="text/css">

فایل نهایی رو میتونید دانلود و الگو برداری کنید.

موفق و سلامت باشید.

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 1,738 بار دسته بندی : آموزش ، آموزش css ، آموزش html ، قالب ، قالب html دیدگاه : ۱ تاريخ : ۱۷ آبان ۱۳۹۵
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما

دیدگاه کاربران تعداد دیدگاه : ۱

تورکاربر سایت
پاسخ دهید
چهارشنبه , ۲ فروردین ۱۳۹۶

ممنون از آموزش خیلی خوب و مفیدتون 🙂