Главная
Красивые табы(вкладки) для сайта на чистом CSS
 Скриншот Красивые табы(вкладки) для сайта на чистом CSS

  <ul class="tabs" role="tablist">
 <li>
 <input type="radio" name="tabs" id="tab1" checked />
 <label for="tab1" 
 role="tab" 
 aria-selected="true" 
 aria-controls="panel1" 
 tabindex="0">Ваше название</label>
 <div id="tab-content1" 
 class="tab-content" 
 role="tabpanel" 
 aria-labelledby="description" 
 aria-hidden="false">
 <p>Ваш текст</p>
 </div>
 </li>
 
 <li>
 <input type="radio" name="tabs" id="tab2" />
 <label for="tab2"
 role="tab" 
 aria-selected="false" 
 aria-controls="panel2" 
 tabindex="0">Ваше название</label>
 <div id="tab-content2" 
 class="tab-content"
 role="tabpanel" 
 aria-labelledby="specification" 
 aria-hidden="true">
 <p>Ваш текст</p>
 </div>
 </li>
</ul>
 .tabs {
 width: 650px;
 float: none;
 list-style: none;
 position: relative;
 margin: 80px 0 0 10px;
 text-align: left;
}
.tabs li {
 float: left;
 display: block;
}
.tabs input[type="radio"] {
 position: absolute;
 top: 0;
 left: -9999px;
}
.tabs label {
 display: block;
 padding: 14px 21px;
 border-radius: 2px 2px 0 0;
 font-size: 20px;
 font-weight: normal;
 text-transform: uppercase;
 background: #8e44ad;
 cursor: pointer;
 position: relative;
 top: 4px;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -webkit-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
.tabs label:hover {
 background: #703688;
}
.tabs .tab-content {
 z-index: 2;
 display: none;
 overflow: hidden;
 width: 100%;
 font-size: 17px;
 line-height: 25px;
 padding: 25px;
 position: absolute;
 top: 53px;
 left: 0;
 background: #612e76;
}
.tabs [id^="tab"]:checked + label {
 top: 0;
 padding-top: 17px;
 background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
 display: block;
}

p.link {
 clear: both;
 margin: 380px 0 0 15px;
}
p.link a {
 text-transform: uppercase;
 text-decoration: none;
 display: inline-block;
 color: #fff;
 padding: 5px 10px;
 margin: 0 5px;
 background-color: #612e76;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 -webkit-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
p.link a:hover {
 background-color: #522764;
}

Добавил:
Категория:
Поделись:
Всего комментариев: 0
avatar