Наш опрос
Курите ли вы?
Всего ответов: 42
Случайный анекдот
1 У американца, француза и русского спрашивают: «Что у вас висит ниже пояса?» Американец: - То, что доставляет мне удовольствие! Француз: - То, что доставляет удовольствие девушкам! Русский: - Сабля! А то, что у них - висит, у меня - стоит!
Статистика
Онлайн всего: 4
Гостей: 4
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3473
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3293

   Вкладки (табы) для юкоз на css



На этом уроке мы научимся создавать вкладки (табы) для сайтов юкоз на чистом ксс. Одним из главных и больших плюсов вкладок на css, является отсутствие скриптов и библиотек jQueru, соответственно другие скрипты на вашем сайте не будут с ними конфликтовать. Табы на ксс просты в установке и не нагружают ваш сайт.

Установка:
Код вкладок ставим по месту:
Код
<div class="menu1">
<br id="tab2"/><br id="tab3"/><br id="tab4"/><br id="tab5"/><br id="tab6"/>
<a href="#tab1"><b>Вкладка 1</b></a><a href="#tab2"><b>Вкладка 2</b></a><a href="#tab3"><b>Вкладка 3</b></a><a href="#tab4"><b>Вкладка 4</b></a><a href="#tab5"><b>Вкладка 5</b></a><a href="#tab6"><b>Вкладка 6</b></a>

<div>Содержимое вкладки 1</div>
<div>Содержимое вкладки 2</div>
<div>Содержимое вкладки 3</div>
<div>Содержимое вкладки 4</div>
<div>Содержимое вкладки 5</div>
<div>Содержимое вкладки 6</div>
</div>


У этого кода есть особенность:
Вторую строчку "Вкладка 1Вкладка 2Вкладка 3Вкладка 4Вкладка 5Вкладка 6" не следует разбивать на несколько строк, у меня привело это к перекосу вкладок.

Теперь чуть ниже этого кода (не в css!!!) ставим стили:

Код
<style type="text/css">
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6 {display:none; position:fixed;}

.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1),
.menu1 #tab4:target ~ a:nth-of-type(1),
.menu1 #tab5:target ~ a:nth-of-type(1),  
.menu1 #tab6:target ~ a:nth-of-type(1) {
  background: #fff;
  padding: 8px 15px 8px 15px;
  border: 1px solid #CAD3DA;
  line-height: 32px; text-shadow:#CAD3DA 1px 1px 2px; color:#DC9248;}

.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3),
.menu1 #tab4:target ~ a:nth-of-type(4),
.menu1 #tab5:target ~ a:nth-of-type(5),  
.menu1 #tab6:target ~ a:nth-of-type(6) {border-bottom: #F4F6F7; background: #DC9248; text-shadow:#CAD3DA 1px 1px 3px; color:#F7F7F7;}

.menu1 > a:hover { text-decoration:; }

.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1),
.menu1 #tab4:target ~ div:nth-of-type(1),
.menu1 #tab5:target ~ div:nth-of-type(1),  
.menu1 #tab6:target ~ div:nth-of-type(1) {
  display: none;
  padding: 5px;
  border: 0px solid #CAD3DA;
  border-top: #fff;
  background: none;}

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3),
.menu1 #tab4:target ~ div:nth-of-type(4),
.menu1 #tab5:target ~ div:nth-of-type(5),
.menu1 #tab6:target ~ div:nth-of-type(6) { display: block; }
</style>


Теперь можете отредактировать эти стили на свой вкус.

Html редактор
Автор: Prosvetekvator
Просмотров: 13397
05.03.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Вкладки (табы) для юкоз на css След. »

Всего комментариев: 5

5 Алексей Никто (Никтовович)
А то я хотел бы на одной странице 3-х уровневые табы сделать. В первом слое будет 5 вкладок, в двух из них будет по 3 уровня включая 1-й, а в 3 других по 2 уровня включая 1-й.

14.09.2015 в 01:32 | Перейти к материалу >
-
0
+

4 Алексей Никто (Никтовович)
желательно с примером. А то на css я не нашел многоуровневых табов(( только с подключением скриптов.

13.09.2015 в 23:55 | Перейти к материалу >
-
0
+

3 Алексей Никто (Никтовович)
а можно из этого кода сделать таб в табе? многоуровневый таб считай.

13.09.2015 в 23:53 | Перейти к материалу >
-
0
+

1 Алексей Никто (Никтовович)
а расширить окошко вкладки как то можно?) поставить фиксированное кол-во пикселей?)

07.09.2015 в 00:58 | Перейти к материалу >
-
0
+

2 Елена Задорина (zadorina_lenusya1997)
Конечно можно, табы добавляйте и все)

07.09.2015 в 06:59 | Перейти к материалу >
-
0
+

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Мини-чат
Топ пользователей
Новое на форуме








Комментарии
11.06.2022