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

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-23 12:32:48

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

می توان از تب ها برای بخش جعبه دانلود، نمایش بخش هایی مانند نظرات سایت و اطلاعات بیشتر مطالب و ... استفاده کرد.

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

مرحله اول: کدهای HTML

قدم اول قرار دادن کدهای HTML برای نمایش تب ها در سایت است. این کد را باید در فایل های قالب، دقیقا در همان مکانی که قصد نمایش تب را دارید قرار دهید.

<div class="warpper">
  <input class="radio" id="one" name="group" type="radio" checked>
  <input class="radio" id="two" name="group" type="radio">
  <input class="radio" id="three" name="group" type="radio">
  <div class="tabs">
  <label class="tab" id="one-tab" for="one">CSS</label>
  <label class="tab" id="two-tab" for="two">Skills</label>
  <label class="tab" id="three-tab" for="three">Prerequisites</label>
    </div>
  <div class="panels">
  <div class="panel" id="one-panel">
    <div class="panel-title">Why Learn CSS?</div>
    <p>Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art!</p>
  </div>
  <div class="panel" id="two-panel">
    <div class="panel-title">Take-Away Skills</div>
    <p>You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need!</p>
  </div>
  <div class="panel" id="three-panel">
    <div class="panel-title">Note on Prerequisites</div>
    <p>We recommend that you complete Learn HTML before learning CSS.</p>
  </div>
  </div>
</div>

در کد بالا، Lable ها همان متن کلید تب هستند و پایین تر، محتوای هر کدام از تب ها که با ID هایی مثل one-panel و two-panel به هم متصل می شوند.

 

قدم دوم: کدهای CSS

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

@import url('https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap');
body{
  background:#CDDC39;
  font-family: 'Arimo', sans-serif;
}
h2{
  color:#000;
  text-align:center;
  font-size:2em;
}
.warpper{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.tab{
  cursor: pointer;
  padding:10px 20px;
  margin:0px 2px;
  background:#000;
  display:inline-block;
  color:#fff;
  border-radius:3px 3px 0px 0px;
  box-shadow: 0 0.5rem 0.8rem #00000080;
}
.panels{
  background:#fffffff6;
  box-shadow: 0 2rem 2rem #00000080;
  min-height:200px;
  width:100%;
  max-width:500px;
  border-radius:3px;
  overflow:hidden;
  padding:20px;  
}
.panel{
  display:none;
  animation: fadein .8s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.panel-title{
  font-size:1.5em;
  font-weight:bold
}
.radio{
  display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel{
  display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab{
  background:#fffffff6;
  color:#000;
  border-top: 3px solid #000;
}