X
Юрий Немец

Адаптивные вкладки на всю ширину

В наше время все активно используют мобильные устройства для просмотра сайтов и серфинга по интернету. Каждый владелец сайта пытается сделать чтобы он был удобен как можно большему числу пользователей. И сейчас адаптивность сайта к различным разрешения экрана является обязательным требованием. Поэтому в этом уроке мы рассмотрим как создать адаптивные вкладки на всю ширину сайта.

Похожие материалы:

Пример можно увидеть здесь:

Посмотреть примерСкачать

Изображения еды для каждой вкладки были взяты — здесь.



HTML часть

Все вкладки и содержимое находятся в блоке с идентификатором tabs и классом tabs:

1
2
3

<div id="tabs" class="tabs">
    ...
</div>

Первым блоком здесь идут вкладки:

1
2
3
4
5
6
7
8
9

<nav>
    <ul>
        <li><a href="#section-1" class="icon-shop"><span>Магазин</span></a></li>
        <li><a href="#section-2" class="icon-cup"><span>Напитки</span></a></li>
        <li><a href="#section-3" class="icon-food"><span>Еда</span></a></li>
        <li><a href="#section-4" class="icon-lab"><span>Лаборатория</span></a></li>
        <li><a href="#section-5" class="icon-truck"><span>Список</span></a></li>
    </ul>
</nav>

А затем большой блок с идентификатором content, где в содержимое каждой вкладки расположено в определенном блоке <section>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="content">
    <section id="section-1">
        <div class="mediabox">
            ...
        </div>
        <div class="mediabox">
	    ...
        </div>
        <div class="mediabox">
            ...
        </div>
    </section>
    ...
</div>


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

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot?pvm5gj');
    src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'),
        url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'),
        url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
 
.icon-food:before {
    content: "\e600";
}
 
.icon-lab:before {
    content: "\e601";
}
 
.icon-cup:before {
    content: "\e602";
}
 
.icon-truck:before {
    content: "\e603";
}
 
.icon-shop:before {
    content: "\e604";
}

Далее задаем стили для вкладок и содержимого:

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

.tabs {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 1em 0 2em;
    font-weight: 300;
}
 
.tabs nav {
    text-align: center;
}
 
.tabs nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}
 
.tabs nav ul li {
    border: 1px solid #becbd2;
    border-bottom: none;
    margin: 0 0.25em;
    display: block;
    float: left;
    position: relative;
}
 
.tabs nav li.tab-current {
    border: 1px solid #47a3da;
    box-shadow: inset 0 2px #47a3da;
    border-bottom: none;
    z-index: 100;
}
 
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
    content: '';
    position: absolute;
    height: 1px;
    right: 100%;
    bottom: 0;
    width: 1000px;
    background: #47a3da;
}
 
.tabs nav li.tab-current:after {
    right: auto;
    left: 100%;
    width: 4000px;
}
 
.tabs nav a {
    color: #becbd2;
    display: block;
    font-size: 1.45em;
    line-height: 2.5;
    padding: 0 1.25em;
    white-space: nowrap;
}
 
.tabs nav a:hover {
    color: #768e9d;
}
 
.tabs nav li.tab-current a {
    color: #47a3da;
}
 
.tabs nav a:before {
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    font-weight: normal;
    font-variant: normal;
    font-family: 'icomoon';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    margin: -0.25em 0.4em 0 0;
}
 
.content section {
    font-size: 1.25em;
    padding: 3em 1em;
    display: none;
    max-width: 1230px;
    margin: 0 auto;
}
 
.content section:before,
.content section:after {
    content: '';
    display: table;
}
 
.content section:after {
    clear: both;
}
 
 
.no-js .content section {
    display: block;
    padding-bottom: 2em;
    border-bottom: 1px solid #47a3da;
}
 
.content section.content-current {
    display: block;
}
 
.mediabox {
    float: left;
    width: 33%;
    padding: 0 25px;
}
 
.mediabox img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
 
.mediabox h3 {
    margin: 0.75em 0 0.5em;
}
 
.mediabox p {
    padding: 0 0 1em 0;
    margin: 0;
    line-height: 1.3;
}

И последнее, это медиа запросы, ориентированные под разные размеры экранов:

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

@media screen and (max-width: 52.375em) {
    .tabs nav a span {
        display: none;
    }
 
    .tabs nav a:before {
        margin-right: 0;
    }
 
    .mediabox {
        float: none;
        width: auto;
        padding: 0 0 35px 0;
        font-size: 90%;
    }
 
    .mediabox img {
        float: left;
        margin: 0 25px 10px 0;
        max-width: 40%;
    }
 
    .mediabox h3 {
        margin-top: 0;
    }
 
    .mediabox p {
        margin-left: 40%;
        margin-left: calc(40% + 25px);
    }
 
    .mediabox:before,
    .mediabox:after {
        content: '';
        display: table;
    }
 
    .mediabox:after {
        clear: both;
    }
}
 
@media screen and (max-width: 32em) {
    .tabs nav ul,
    .tabs nav ul li a {
        width: 100%;
        padding: 0;
    }
 
    .tabs nav ul li {
        width: 20%;
        width: calc(20% + 1px);
        margin: 0 0 0 -1px;
    }
 
    .tabs nav ul li:last-child {
        border-right: none;
    }
 
    .mediabox {
        text-align: center;
    }
 
    .mediabox img {
        float: none;
        margin: 0 auto;
        max-width: 100%;
    }
 
    .mediabox h3 {
        margin: 1.25em 0 1em;
    }
 
    .mediabox p {
        margin: 0;
    }
}


Javascript часть

И подключаем в конце страницы небольшой Javascript плагин(его можно скачать здесь):

1
2
3
4

<script src="js/cbpFWTabs.js"></script>
<script>
    new CBPFWTabs( document.getElementById( 'tabs' ) );
</script>


Вывод

Я думаю вы и сами понимаете как важна адаптивность. Надеюсь вам понравились данные вкладки и вы найдете где их можно применить.


Успехов!

Категории: jQuery