Главная » Статьи » украшения для сайта
Блок с вкладками

Код блока предельно лёгкий и не будет нагружать загрузку страницы.Работает без применения скриптов и может быть применён под любые цели.Вы можете установить его в любом месте даже в материале.Для установки достаточно скопировать весь код по месту установки предварительно произведя требуемые названия вкладок и содержимое контента.В HTML редакторе нельзя проверить код блока,потому что переход по вкладкам присходит действиями свойств.




Код для блока с вкладками

<style>
#tab1, #tab2, #tab3 {
display:none;
position:fixed;
}
.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1) {
background: #fff;
padding: 5px;
border: 1px solid #e1e1e1;
line-height: 28px; }
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) {
border-bottom: #fff;
}
.menu1 > a:hover {
text-decoration: none;
}
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {
display: none;
padding: 5px;
border: 1px solid #e1e1e1;
border-top: #fff;
background: #fff;
}
.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) {
display: block;
}
</style>
<div class="menu1">
<br id="tab2"/><br id="tab3"/>
<a href="#tab1">Заголовок вкладки1</a><a href="#tab2">Заголовок вкладки2</a><a href="#tab3">Заголовок вкладки3</a><div>вклака 1</div><div>вклака 2</div><div>вклака 3</div></div>
menu1 #tab3:target ~ div:nth-of-type(1) { display: none; padding: 5px; border: 1px solid #e1e1e1; border-top: #fff; background: #fff; } .menu1 > div:nth-of-type(1), .menu1 #tab2:target ~ div:nth-of-type(2), .menu1 #tab3:target ~ div:nth-of-type(3) { display: block; }


Заголовок вкладки1Заголовок вкладки2Заголовок вкладки3
вклака 1
вклака 2
вклака 3
Категория: украшения для сайта | Добавил: NAREK (18.11.2012)
Просмотров: 884 | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *:

Реклама

SEO sprint - максимальная раскрутка сайтов!

Top Шаблоны

  • DEXTER
  • GamerPress
  • IRENE
  • ENGAMER

    • Наш опрос

    • Оцените мой сайт
      Результаты | Архив опросов
      Всего ответов: 22




    Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0