Categories: Юзабилити

Графические вкладки для сайта – установка

В одной из своих прошлых статей я рассказывала как сделать вкладки на сайт. Сегодня расскажу как сделать графические вкладки для сайта. Сами вкладки (табы) тут являются.Пример тут:

✪ DEMO⇊ СКАЧАТЬ
Графическое изображение вкладок
Для того, чтобы сделать такие вкладки на своей сайте, в первую очередь Вам нужно иметь сами изображения этих вкладок. Вы можете изготовить их самостоятельно. Обращаю ваше внимание, что в моем примере высота вкладок 44px и стили CSS соответстуют этой высоте.
Для начала предлагаю Вам скачать мой вариант вкладок
Разархивируйте архив, в нем будут 4 файла. Их нужно загрузить на Ваш сайт в папку tabnew.

JavaScript

Для работы вкладок необходимо подключение библиотеки jQuery. Для этого нужно скачать файл jquery.idTabs.min.js. Создать в корне сайта папку js и поместить скачанный файл в эту папку. Далее на странице, где будут использоваться Табы разместить следующий код после тега <body>:

<script type="text/javascript" src="/js/jquery.idTabs.min.js"></script>

Если вкладки будут использоваться на всех страницах сайта – лучше разместить этот код в шаблон страницы.

Для сайтов на Worpdress:
В редакторе темы (Консоль – Внешний вид – Редактор) найти файл, который отвечает за функции темы. Обычно это function.php, но, например, в моей теме это includes/theme-functions.php. В самом конце, перед закрывающим ?> вставить следующий код

// Подключаем скрипт табов
if (!is_admin()) {
wp_register_script ('idTabs', '/js/jquery.idTabs.min.js');
wp_enqueue_script( 'idTabs'); 
}

HTML

HTML код вкладок мало, чем отличается от кода простых вкладок. Ставите этот код в том месте веб-страницы, где должны быть Ваши вкладки.

 <!---Вкладки--->  
<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 стили вашего сайта.

/* 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;}

Вот собственно и все. Красивых вам вкладок!

Больше статей: Color Picker для сайта - HTML коды цветов