Metro аккордеон для сайта с помощью CSS3Большая часть наших читателей уже знакома с новый интерфейсом metro которая была реализована не только на мобильных телефонах но и на операционной системе windows 8. Стоить заметить, что новая операционка не особо пользуется популярностью среди смышленых юзеров. Но ее привлекательный интерфейс наверняка приглянулся. В данном уроке мы рассмотрим интересный способ реализации вертикального аккордеона в новом минималистическом стиле с помощью css.

Такой аккордеон достаточно просто реализовать. Кроме этого легко редактировать и подключить к сайту. И так, давайте приступим.

Шаг 1. HTML

Мы будем использовать элементы ul и li для построения аккордеона и тег ссылки после каждого элемента li первого уровня. Для начала мы подключаем фреймворки.

Мы будем использовать класс .close для каждого элемента ul первого уровня, кроме этого используем тег i для установки иконки для каждой категории.

С разметкой мы закончили, переходим к следующему шагу.

Metro аккордеон для сайта с помощью CSS3

Шаг 2. CSS

Начнем со шрифта, мы будем использовать шрифт Didact Gothic из репозитория Google Fonts. Для этого нам необходимо его подключить.

Мы будем использовать два класса: .active и .closed. Эти классы используются для реализации работоспособности аккордеона. При этом класс .active формирует цвет фона активной категории, а класс.closed помогает организовать открытие и закрытие категорий.

Шаг 3. JavaScript

Обратите внимание, что у нас есть функция, которая при нажатии на нужный нам тег a добавляет к нему класс .toggleClass(), за чем следует установка цвета фона с задержкой _this.toggleClass(‘active’, 5);.

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: