F.A.Q. раздел сайта с помощью CSS3 и jQueryЕсли на вашем сайте пользователи имеют много возможностей, то скорее всего, что такой проект нуждается в создании раздела часто задаваемых вопросов  с информацией для поддержки ваших пользователей, кроме контактной формы. Мы собрали простой в настройке шаблон частых вопросов, который можно использовать, чтобы построить свою справку по сайту с удобной навигацией. Благодаря отзывчивому интерфейсу и реализации с помощью CSS и JQuery мы получаем кроссбраузерный раздел, с поддержкой устройств где выключен JS.

 

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

Шаг 1. HTML

Мы приводим пример части html- разметки .cd-faq  раздела. Содержание делится на 2 основных div’а-  .cd-faq-categories и .cd-faq-items — первый из которых отвечает за блок навигации, а второй список за структуру вопросов и ответов.

Каждый .cd-faq-group является неупорядоченным списком, содержащий справку, принадлежащий к той же категории в группе.

Шаг 2. CSS

CSS довольно простой, вы можете загрузить исходный файл и сами убедиться. Мы добавил комментарии к сложным частям кода, а также мы хотели обратить внимание на одну важную вещь мы использовали .no-js класс, чтобы сделать эту демку совместимой с устройствами без поддержки JavaScript (или для устройств, где JavaScript выключены пользователем). Это не мало важно, так как, большинство разработчиков начинают переход на HTML5 и CSS3.

F.A.Q. раздел сайта с помощью CSS3 и jQuery

Как это работает? Мы назначаем данный класс в <HTML> разметке. Плагин Modernizr удаляет этот класс и назначить .js класс вместо него если устройство поддерживает JS по умолчанию. Если  Modernizr не работает — значит в браузере не работает поддержка — то будет использован .no-JS класс, чтобы сделать наш контент универсальным для различных браузеров без поддержки JS.

Шаг 3. jQuery

Когда пользователь выбирает одну из категорий часто задаваемых вопросов то .cd-faq-categories, для видового экрана меньше, чем 768px, мы назначаем .slide-in класса .cd-faq-items и. selected класс соответствующего .cd-faq-group. . Мы используем JQuery для отображения на мобильных устройства, чтобы включить событие адаптивности.

Когда окно просмотра больше, чем 1024px (переменные MQL определены в файле main.js), мы связываем updateCategory () функцию к событию для окна прокрутки.

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

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