Русский
Українська
English
Вітаю шановний користувач. Дуже часто при створенні сайтів нам потрібно на одній зі сторінок вивести багато текстової інформації, і якщо її додавати в спільний блок контенту то сторінка у нас може вийти дуже об'ємною, і користувач просто не дійде до прочитання потрібного йому контенту, і тут нам на допомогу приходять вкладки (таби) для сайту, в яких весь контент ми можемо розподілити на окремі вкладки, і це дозволяє відвідувачеві зручно читати потрібний йому контент, а ви тим самим візуально економите місце на вашій сторінці.
Використання вкладок на веб ресурсах є дуже популярним рішенням, так як вони дозволяють не тільки економити місце на сайті, але і підвищують юзабіліті і конверсію вашого сайту, вкладки своєю анімацією при переході між ними приваблюють відвідувача.
Тому в данній статті ми навчимося створювати прості і зручні вкладки які можна використовувати на будь-якій сторінці сайту, розглянемо процес створення табів для компактного і зручного виведення вмісту.
В даному уроці при створенні вкладок ми будемо використовувати технології CSS3, і всього кілька рядків JavaScript коду, ну і підключимо саму бібліотеку jQuery. Даний вид вкладок відмінно доповнить дизайн будь-якого сайту, будь то ваш готовий інтернет магазин, або сайт компанії, персональний блог, загалом не важливо, дане рішення підходить для будь-якого інтернет ресурсу. І так, приступимо до створення наших вкладок на сайті.
В першу чергу ми ознайомимося з простою структурою самого коду розмітки HTML, зверніть увагу на атрибут title який в нашому конкретному випадку ми використовуємо в jQuery.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ul id="tabs">
<li><a href="#" title="tab1">Про компанію</a></li>
<li><a href="#" title="tab2">Доставка і оплата</a></li>
<li><a href="#" title="tab3">Відео огляд</a></li>
<li><a href="#" title="tab4">Четверта вкладка</a></li>
<li><a href="#" title="tab5">Пята вкладка</a></li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
<div id="tab4">...</div>
<div id="tab5">...</div>
</div>
|
Давайте розглянемо деякі значення які ми використовуємо в HTML коді:
#tabs –є неврегульованим списком, з вмістом навігації самих вкладок.
#content – це контейнер в якому буде присутній контент для кожної конкретної вкладки.
|
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 1.5em;
float: left;
text-decoration: none;
color: #25b7bf;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
font-size: 18px;
font-weight: 700;
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after{
background: #fff;
z-index: 3;
}
#content
{
background: #fff;
padding: 2em;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
margin: 0 0 15px 0;
}
#about
{
color: #999;
}
#about a
{
color: #eee;
}
|
Даний код CSS стилів ви можете додати безпосередньо в тіло сторінки або підключити окремим файлом наприклад так:
|
1
|
<link rel="stylesheet" href="css/style.css">
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
$(document).ready(function() {
$("#content div").hide(); // Приховуємо зміст
$("#tabs li:first").attr("id","current"); // Активуємо першу закладку
$("#content div:first").fadeIn(); // Виводимо вміст
$('#tabs a').click(function(e) {
e.preventDefault();
$("#content div").hide(); //Приховати весь зміст
$("#tabs li").attr("id",""); //Скидання ID
$(this).parent().attr("id","current"); // Активуємо закладку
$('#' + $(this).attr('title')).fadeIn(); // Виводимо вміст поточної закладки
});
});
</script>
|
Також зверніть увагу що для того щоб все коректно у вас працювало, на сайті повинна бути підключена бібліотека jQuery, зазвичай на сайтах вона вже присутня, але якщо ж на вашому сайті дана бібліотека ще не підключена, то вам потрібно її підключити наприклад так:
|
1
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
Також ви можете скачати готові вихідні нижче.
Немає коментарів
Ви можете залишити коментар першим.