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

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

Для начала разметка, она будет достаточно простой, у нас будет общий блок навигации, в которой будут заключены подпункты меню с описанием вкладок:

Каждый класс будет соответственно устанавливать необходимую нам иконку, это улучшит общую эргономику сайта и читаемость вкладок.

Интерактивные вкладки для сайта с помощью CSS3

Шаг 2. CSS

Далее пройдемся по стилям, здесь нет ничего нового и сложного, для начала мы определяем общие параметры контейнера, устанавливаем размеры вкладок, и их соотношение к размеру браузера, кроме этого добавляем параметры при нажатии на необходимую нам вкладку.

Кроме этого , как вы заметили, мы вшили множество иконок, которые можно добавить до вкладок, это упростит Вам работу с вкладками и поисками иконок.

Вот и все. Готово!