В одной из своих прошлых статей я рассказывала как сделать вкладки на сайт. Сегодня же также поговорим о вкладках, но уже об более красивых и более сложных, а именно о графических вкладках. Ведь сами вкладки (табы) могут быть и изображением. Как например тут:
Графическое изображение вкладок
Для того, чтобы сделать такие вкладки на своей сайте, в первую очередь Вам нужно иметь сами изображения этих вкладок. Вы можете изготовить их самостоятельно. Только хочу обратить Ваше внимание, что, в моем примере высота вкладок 44px. Но для начала предлагаю Вам скачать мой вариант вкладок
Разархивируйте архив, в нем будут 4 файла. Их нужно загрузить на Ваш сайт в папку tabnew.
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 | // Подключаем скрипт табов if (!is_admin()) { wp_register_script ('idTabs', '/js/jquery.idTabs.min.js'); wp_enqueue_script( 'idTabs'); } |
HTML
HTML код вкладок мало, чем отличается от кода простых вкладок. Ставите этот код в том месте веб-страницы, где должны быть Ваши вкладки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!---Вкладки---> <div id="graphtab1" class="graphtab"> <ul> <li><a href="#tab1" class="selected"><span class="left"></span><span class="middle"><span class="text">Вкладка 1</span></span><span class="right"></span></a></li> <li><a href="#tab2"><span class="left"></span><span class="middle"><span class="text">Вкладка 2</span></span><span class="right"></span></a></li> <li><a href="#tab3"><span class="left"></span><span class="middle"><span class="text">Вкладка 3</span></span><span class="right"></span></a></li> </ul> </div> <!---///Вкладки---> <!---Информация соответствующая вкладкам---> <div class="graphtabdiv" id="tab1">Это информация, которая выводится при нажатии на вкладку 1. Она может быть абсолютно любой</div> <div class="graphtabdiv" id="tab2">А это инфо вкладки 2. Информации может быть совсем любая даже картинка <img src="https://stepfor.top/flags/UK.png" height="70" border="0" alt=""> </div> <div class="graphtabdiv" id="tab3">Информация третьей вкладки. Вкладок может быть сколько угодно.</div> </div> <!---///Информация соответствующая вкладкам---> <!---Сам скрипт НЕ МЕНЯТЬ!!!!---> <script type="text/javascript"> $("#graphtab1 ul").idTabs(); </script> |
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | /* Style for graphtabs */ .graphtab { padding:5px 0px; width:650px; margin:8px auto; } .graphtabdiv { width:650px; /*ширина внешнего блока*/ padding:5px 0px; background:url(/tabnew/line.png) no-repeat top; width: 650px; background-color: snow; margin:8px auto; margin-top: 39px; } .graphtab {color:#111;} .graphtab ul {padding: 0px;} .graphtab li { list-style:none; float:left; margin-right: 20px; } /*вид вкладок*/ .graphtab ul a span.left, .graphtab ul a.selected span.left, .graphtab ul a:hover span.left { display: block; float: left; height: 44px; width: 20px; } .graphtab ul a span.left {background:url(/tabnew/tableft.jpg) no-repeat bottom;} .graphtab ul a.selected span.left {background:url(/tabnew/tableft.jpg) no-repeat center;} .graphtab ul a:hover span.left {background:url(/tabnew/tableft.jpg) no-repeat top;} .graphtab ul a span.right, .graphtab ul a.selected span.right, .graphtab ul a:hover span.right { display: block; float: left; width: 20px; height: 44px; } .graphtab ul a span.right {background: url(/tabnew/tabright.jpg) no-repeat bottom;} .graphtab ul a.selected span.right {background: url(/tabnew/tabright.jpg) no-repeat center;} .graphtab ul a:hover span.right {background: url(/tabnew/tabright.jpg) no-repeat top;} .graphtab ul a span.middle{ display: block; float: left; height: 44px; } .graphtab ul a span span.text { display: block; height: 44px; margin-top: 12px; font-size: 13pt; font-weight: bold; color: #FFF; letter-spacing: 1px; font-family: Tahoma, Geneva, sans-serif; text-shadow: 0px 1px 0px #B5535B; filter: dropshadow(color=#B5535B,offX=0,offY=1); } .graphtab ul a.selected span span.text { color: #B5535B; text-shadow: 0px 1px 0px #FFF; filter: dropshadow(color=#FFF,offX=0,offY=1); } .graphtab ul a:hover span span.text {color: #FFF;} .graphtab ul a span.middle {background:url(/tabnew/tabmiddle.jpg) repeat-x bottom;} .graphtab ul a.selected span.middle {background:url(/tabnew/tabmiddle.jpg) repeat-x center;} .graphtab ul a:hover span.middle {background:url(/tabnew/tabmiddle.jpg) repeat-x top;} |
Вот собственно и все. Красивых Вам вкладок!