Форма входа
Категории
| Шаблоны для uCoz [18] |
| Виды материалов [10] |
| Мини профили [7] |
| Мини чаты [8] |
| Виды комментариев [14] |
| Формы входа [3] |
| Информеры [33] |
| Украшения [16] |
| Меню сайта [5] |
| Кнопки [27] |
| Шапки сайта [3] |
| Медиа [19] |
| Переключатели [8] |
| Разное [65] |
| Формы поиска [9] |
| Скрипты [46] |
| Игры на сайт [6] |
| Аякс (Ajax) окна [1] |
| PHP скрипты [3] |
Материал
Главная » 2013 Март 5 » Вкладки (табы) для юкоз на css
« Предидущий | ID: 132 | Следующий »
22:12 Вкладки (табы) для юкоз на 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> Теперь можете отредактировать эти стили на свой вкус. |
| Всего комментариев: 5 | ||||||
| ||||||
Статистика