» »

Анимированные Табы - вкладки для сайта на CSS


Здесь представлены вкладки на сайт или как называют их табы которые созданы на чистом css. Они нужны для того, чтоб на вашем ресурсе было больше место и информации, что и применяют их. Ведь при нажатие будет вам открываться окно с любым описанием, зависит от того, какой заголовок вы напишите. Безусловно они переменяться для познавательного портала. Если взять за пример главную страницу, то можно отлично их использовать на карточках товара, на главной странице.

Установка:

Что первое нам нужно сам каркас, устанавливаем там где вам нужно.

Код
<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">О нас</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2"/>
<label for="tab-2" class="tab-label-2">Услуги</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
<label for="tab-3" class="tab-label-3">Работы</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
<label for="tab-4" class="tab-label-4">Контакты</label>
<div class="clear-shadow">
</div>
<div class="content">
  <div class="content-1">
  <h2>О нас</h2>
  <p>
  Содержание 1
  </p>
  </div>
  <div class="content-2">
  <h2>Услуги</h2>
  <p>
  Содержание 2
  </p>
  </div>
  <div class="content-3">
  <h2>Портфолио</h2>
  <p>
  Содержание 3
  </p>
  </div>
  <div class="content-4">
  <h2>Контакт</h2>
  <p>
  Содержание 4
  </p>
  </div>
</div>
</section>


Но и сами стили, их несколько, с разным эффектом открытие.

1) стиль CSS



2) стиль CSS



3) стиль CSS



4) стиль CSS



Думаю вам интересно посмотреть как все же работает этот скрипт, на это есть Демонстрация, где вы поймете что можно прописать в них и выбрать вам нужный эффект, так как появление информации преподносится по разному.
08.04.2016 Просмотров: 536 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
FeStemBer
FeStemBer 08.04.2016 16:191
0
Для чего они вообще веб маcтеру ucoz, но сами поймите, не могу вообще представить их на этом хостинге, здесь бы контентом заполнить сайт, и не каких закладок не нужно.
csretven
csretven 08.04.2016 16:592
0
Давайте не умничать, на счет скриптов, здесь хоть на сайте что то заливают, да пусть старое, так как считаю что старое всегда пригодиться, на форуме в скриптах, всегда новое можно увидит, а что по закладкам, думаю не вам решать, ваше дело флудить и писать что то не по теме. Все скрипты и коды нужны, если они работают.
workman
workman 08.04.2016 19:335
0
Ну вам что не положи все не то и все не так )))
Maryges
Maryges 08.04.2016 17:283
0
Ух ты как много умного узнал, только мало что понял что ты Траст, хотел донести. То что это лажа и не стоит внимание заострять, что то в этом смысле.
workman
workman 08.04.2016 19:294
0
Ребята. Вообще-то табами можно сделать несколько комментариев на сайте. Например комменты сайта - комменты ВК,комменты - Фейсбук ...
Kosten
Kosten 08.04.2016 19:336
0
workman, а это точно же, на таблах сделаны комментарий, это который по умолчанию и к примеру второй от социальной сети в контакте, так и третий можно запелить.
csretven
csretven 09.04.2016 22:227
0
workman, вы полностью правы, так как таблы основном и делают под ответы, также можно пременять и по другим назначением.
avatar