Exore LTD » jQuery » Адаптивные вкладки на всю ширину
Лого SiteHere.ru

Ноябрь 29, 2015 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

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

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

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

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

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

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

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



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>


Вывод

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


Успехов!

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

13 комментариев к записи
  • 3D

    Отличные вкладки! Спасибо!

     
    Ответить
  • Алексей

    Добрый день! Ничего непонятно по поводу иконок еды у вкладок…как мы указываем им путь и какое разширение у них?

     
    Ответить
    • Юрий

      Здравствуйте, Алексей!
      Скачайте архив с исходниками. Путь к изображениям, например, для первой вкладки, задается в строках: 30, 35 и 40. Указывать высоту и ширину не нужно, потому что изображения должны быть адаптивными (подстраиваться под ширину вкладки в зависимости от размера окна браузера).
      Размер этих изоборажений: 360х195 px.

       
      Ответить
      • Алексей

        Дело в том, что я хочу поставить свои изображения, они у меня в png/jpg, пытался прописать путь, но что они не появились.

         
        Ответить
        • Юрий

          Потому путь к изображению необходимо указывать относительно файла стилей.

           
          Ответить
          • Алексей

            Ок) я все равно ничего не понял). Как мне вместо СВГшек вставить PNG?

             
            Ответить
            • Юрий

              Алексей, путь к изображениям задается вот в этих строках:
              Для 1-й вкладки в строках: 30-й, 35-й и 40-й.
              Для 2-й вкладки в строках: 48-й, 53-й и 58-й.
              Для 3-й вкладки в строках: 65-й, 70-й и 75-й.
              Для 4-й вкладки в строках: 82-й, 87-й и 92-й.
              Для 5-й вкладки в строках: 99-й, 104-й и 109-й.

              Всё в файле index.html.

              P. S. Указывать высоту и ширину не нужно, потому что изображения должны быть адаптивными.

               
              Ответить
              • Алексей

                Я имел в виду не большие картинки, а мелкие иконки рядом с заголовками, те, что меняют свой цвет: Магазин Напитки Еда Лаборатория Список. В принцие, я смог вместо СВГ вставить обычные ПНГ, но он не меняют свой цвет) Ковырялся в исходниках, но там нет картинок, а только координаты.

                 
                Ответить
                • Юрий

                  Иконки у вкладок задаются в строках: с 94-й по 112-ю. В файле component.css. Там используются иконочные шрифты "icomoon".

                   
                  Ответить
  • Игорь

    Скажите, пожалуйста, а как сделать не столбцы, а горизонтальные блоки

     
    Ответить
    • Юрий

      Здравствуйте, Игорь!
      Необходимо разместить меню в одном столбце, а контент в другом. То есть сделать 2 столбца.
      Если не разберетесь, то рекомендую посмотреть на готовое решение в данном мини-курсе: "Лендинг за 60 минут".

       
      Ответить
  • black

    Все доступно и понятно с горизонтальным расположением. Если необходимо расположить Табы вертикально — необходимо только переписать CSS или же надо будет изменить и HTML?

     
    Ответить
    • Юрий Немец

      Спасибо. Да, все верно, можно использовать лишь CSS.

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *