Табы для сайта (Tabs) — это вкладки на одной странице сайта, которые экономят время и упорядочивают информацию. Я английского языка tabs — это ярлык, этикетка, лейбл. А нам в веб дизайне привычнее и понятнее называть их табами или вкладками. Но вкладки легче показать, чем объяснить.Пример вкладок для сайта
Этот пример и сам скрипт взят мною с сайта jQueary idTabs. Очень интересные сайт где много табов с примерами, очень советую.
И в этой статье мы будем разбирать только один, самый простой скрипт создания табов, но как по мне и его вполне достаточно для полета фантазии.
3 шага для создания вкладок на своем сайте.
Шаг 1 — JS
Первый шаг это подключение библиотеки jQuery. Для этого нужно скачать файл jquery.idTabs.min.js. Создать в корне сайте папку js и поместить скачанный файл в эту папку. Далее на странице, где будут использоваться Табы разместить следующий код после тега <body>:
1 |
<script type="text/javascript" src="/js/jquery.idTabs.min.js"></script> |
Если вкладки будут использоваться на всех страницах сайта — лучше разместить этот код в шаблон страницы.
Для сайтов на Worpdress:
В редакторе темы (Консоль — Внешний вид — Редактор) найти файл, который отвечает за функции темы. Обычно это function.php, но, например, в моей теме это includes/theme-functions.php. В самом конце, перед закрывающим ?> вставить следующий код
1 2 3 4 5 6 |
// Подключаем скрипт табов if (!is_admin()) { wp_register_script ('idTabs', '/js/jquery.idTabs.min.js', array( 'jquery' )); wp_enqueue_script( 'idTabs'); } } |
Шаг 2 — HTML
Это непосредственно код скрипта вкладок.
Этот код Вы вставляете в то место страницы (или шаблона страницы) где Вы хотите, чтобы у Вас были вкладки.
Скрипт вкладок для сайта состоит из 2 частей
1. HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="usual1" class="usual"> <!---Вкладки---> <ul> <li><a href="#tab1" class="selected">Вкладка 1</a></li> <li><a href="#tab2">Вкладка 2</a></li> <li><a href="#tab3">Вкладка 3</a></li> </ul> <!---///Вкладки---> <!---Информация соответствующая вкладкам---> <div id="tab1">Это информация, которая выводится при нажатии на вкладку 1. Она может быть абсолютно любой</div> <div id="tab2">А это инфо вкладки 2. Информации может быть совсем любая даже картинка <img src="https://stepfor.top/flags/UK.png" height="70" border="0" alt=""> </div> <div id="tab3">Информация третьей вкладки. Вкладок может быть сколько угодно.</div> </div> <!---///Информация соответствующая вкладкам---> <!---Сам скрипт НЕ МЕНЯТЬ!!!!---> |
2. JS
Сразу под кодом HTML вставить:
<script type=»text/javascript»> $(«#usual1 ul»).idTabs(); </script>
Внимание, для сайтов WordPress код чуть другой:
1 2 3 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#usual1 ul").idTabs(); }); </script> |
Теперь у вас на сайте должны появится вкладки.
В ucoz удобно делать вкладки в шаблонах, а вместо информации вставлять соответствующие системные коды. Именно так я создала Блок описания товара в своем Скрипте Интернет-магазина.
Как видим сам код простой и изменить его не составит труда. Меняете названия вкладок по своему усмотрению. Наполняете абсолютно любой информацией, используя html-теги. Информации должна быть внутри соответствующих div-тегов.
Если Вы хотите добавить еще вкладки, то копируете и вставляете во Вкладках строчку <li><a href=»#tab3″>Вкладка 3</a></li>, а в Инфо строчку <div id=»tab3″>Инфо 3.</div>и меняете соответственно в обеих id, то есть tab3 на tab4 и так далее, если нужны еще вкладки.
Шаг 3 — CSS
С кодом постепенно стало ясно, но ведь вкладки должны иметь внешний вид, хотя бы такой как в примере! Для этого используем CSS Стили. Ниже приведены стили моего примера, на их основе Вы можете создать свои собственные, нужна только фантазия и совсем небольшие знания CSS :-).
Итак, копируем код, который ниже и вставляем его Панель Управления — Дизайн — Управление дизайном (CSS) в самый низ странцы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* Style for Usual tabs */ .usual /* отвечает за весь внешний блок*/ { background:#181818; /*фон внешнего блока */ color:#111; padding:15px 20px; /*отступы внешнего блока от края */ width:500px; /*ширина внешнего блока*/ border:1px solid #222; /*рамка внешнего блока*/ margin:8px auto; } .usual ul {padding: 0px;} .usual li { list-style:none; float:left; } /*вид вкладок*/ .usual ul a /*стили вкладок */ {display:block; padding:6px 10px; /*отступы текста от края вкладок */ text-decoration:none!important; /* нет подчеркивания у ссылок */ margin:1px; margin-left:0; font:10px Verdana; /* размер и тип шрифта */ color:#FFF; /* цвет шрифта */ background:#444; /* фон вкладок */ } .usual ul a:hover /*стили вкладки, когда на нее наведена мышка */ { color:#FFF; /* цвет шрифта */ background:#111; /* фон вкладок */ } .usual ul a.selected /*стили вкладки, когда она выбрана */ { margin-bottom:0; color:#000; /* цвет шрифта */ background:snow; /* фон вкладок */ border-bottom:1px solid snow; /* рамка */ cursor:default; } .usual div /*стили информационного блока */ { padding:10px 10px 8px 10px; /* отступы текста инфо от краев */ *padding-top:3px; *margin-top:-15px; clear:left; background:snow; /* фон инфо блока */ font:10pt Georgia; /* размер и тип шрифта иинфо блока */ } .usual div a { color:#000; font-weight:bold; } /* цвет и жирный шрифт ссылок внутри инфоблока */ #usual2 { background:#0A0A0A; border:1px solid #1A1A1A; } #usual2 a { background:#222; } #usual2 a:hover { background:#000; } #usual2 a.selected { background:snow; } #tabs3 { background:#FF9; } |
Вкладки — изображения
В моем Скрипте Интернет-магазина Блок фотографий сделан тоже с помощью вкладок. Только в таком варианте веcь текст заменяют фотографии:
Разберем и этот скрипт.
HTML
Функция lightbox из кода ниже предусмотрена только для сайтов uCoz. То есть сам код рабочий, но функция lightbox будет работать только на сайтах uCoz. Для сайтов на WordPress вы можете скачать плагин Simple Lightbox и все будет работать. Но по сути в данном коде важна не эта функция, а сама структура вкладок.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="image1" class="imagebox kopacity"> <ul> <li><a href="#tab5" class="selected"><img class="button" src="$IMG_URL1$" width="65"></a></li> <li><a href="#tab6"><img class="buttonimg" src="$IMG_URL2$" width="65"></a></li> <li><a href="#tab7"><img class="buttonimg" src="$IMG_URL3$" width="65"></a></li> <li><a href="#tab8"><img class="buttonimg" src="$IMG_URL4$" width="65"></a></li> </ul> <div id="tab5"><a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL1$" width="300"></a></div> <div id="tab6"><a href="$IMG_URL2$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL2$" width="300"></a></div> <div id="tab7"><a href="$IMG_URL3$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL3$" width="300"></a></div> <div id="tab8"><a href="$IMG_URL4$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL4$" width="300"></a></div> </div> <script type="text/javascript"> $("#image1 ul").idTabs();</script> |
Если Ваш сайт находится не на хостинге uCoz, тогда вместо $IMG_URL1$ (и т.д.) Вам нужно вставлять свои ссылки на фотографии.
Итак, принцип кода совершенно не поменялся, только вместо текста везде находятся соответствующие картинки. Во вкладках они маленькие, при показе больше, при нажатии на картинку — еще больше. Вы видите что один и тот же файл картинки расположен и во вкладке и в блоке
Таким образом, размер фотографии регулируется по ширине с помощью атрибута width и Вы сами можете менять его по желанию.
Если Ваш сайт находится не на хостинге uCoz, тогда вместо $IMG_URL1$ (и т.д.) Вам нужно вставлять свои ссылки на фотографии.
CSS
Табы не возможны без стилей. Ниже приведены стили, которые фигурируют именно в этом примере. Куда копировать стили на хостинге uCoz я уже писала в этой статье .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.imagebox { background: #f4f4f4; border: 2px solid #ACACAC; border-radius:5px; padding: 5px; width:300px; } .imagebox ul {padding: 0px;} .imagebox li { list-style:none; float:left; margin-top: -12px; } .imagebox ul a { display:block; text-decoration:none; padding:3px 2px; } .imagebox ul a.selected { background: #ACACAC; padding: 5px;} .buttonimg:hover {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);} |
Про графические вкладки, когда вместо самой вкладки — изображение, читайте в статье Графические вкладки на сайт.
Я очень надеюсь, что я максимально объяснила как сделать вкладки на сайте, но если есть вопросы, пишите обязательно, я очень жду Ваших комментариев.
Наталья, помогите, пожалуйста, выровнять табы по краям.
Дело в том, что если добавлять материал без табов, то он имеет такой вид (как и должно быть): http://i.piccy.info/i9/b396651e6e382f9c8188bccba2b80571/1448022084/20188/969308/bez_tabov.png
Но когда добавляешь материал используя табы, то они почему-то смешаются вправо относительно текста и отступы от края (слева и снизу) становятся большие, чего быть не должно. Вот так:
http://i.piccy.info/i9/ac4fb3589bf13b1de7462fee6da558e6/1448022218/20360/969308/taby.png
Очень вас прошу, помогите вернуть табы на место, чтобы они не уходили туда, куда не надо!
Екатерина, Попробуйте убрать:
6-я строчка в стилях.
Не помогло.
Насколько я понимаю, шаг 1 — подключение библиотеки jQuery, на Юкоз делать не надо? Так ведь? То есть, начинать надо сразу с шага 2?
Скажите, пожалуйста, эти вкладки (табы), которые нарисованы на 1-ом изображении, подойдут для Юкоз? У вас тут про Вордпресс написано, а меня именно Юкоз интересует. Чтобы можно было в эти вкладки текст вставлять и видео.
По идее и именно так. Вы попробуйте. Если что, подключите библиотеку. Просто я давно уже не работаю на uCoz. Возможно произошли изменения.
Я была не права. На Юкозе шаг 1, с установкой jquery.idTabs.min.js, тоже надо делать, иначе табы работать не будут.
Кстати, классные вкладки получились. Спасибо! И у вас хороший сайт.
А вложенные вкладки будут работать?
Все зависит от вложенности и какая именно у вас задумка. Думаю что можно будет найти какое-то решение, но для этого мне нужно понять что именно вы хотите реализовать.