Если на вашем сайте пользователи имеют много возможностей, то скорее всего, что такой проект нуждается в создании раздела часто задаваемых вопросов с информацией для поддержки ваших пользователей, кроме контактной формы. Мы собрали простой в настройке шаблон частых вопросов, который можно использовать, чтобы построить свою справку по сайту с удобной навигацией. Благодаря отзывчивому интерфейсу и реализации с помощью CSS и JQuery мы получаем кроссбраузерный раздел, с поддержкой устройств где выключен JS.
Такой раздел легко настроить и внедрить в шаблон для FAQ раздела вашего проекта, с вопросов и ответов, сгруппированных по категориям для облегчения навигации.
Шаг 1. HTMLМы приводим пример части html- разметки .cd-faq раздела. Содержание делится на 2 основных div'а- .cd-faq-categories и .cd-faq-items - первый из которых отвечает за блок навигации, а второй список за структуру вопросов и ответов.
<section class="cd-faq">
<ul class="cd-faq-categories">
<li><a href="#basics">Обычный вид</a></li>
<li><a href="#mobile">Мобильный</a></li>
<li><!-- ... --></li>
</ul>
<div class="cd-faq-items">
<ul id="basics" class="cd-faq-group">
<li class="cd-faq-title"><h2>Basics</h2></li>
<li>
<a class="cd-faq-trigger" href="#0">Как мне изменить свой пароль?</a>
<div class="cd-faq-content">
<!-- content here -->
</div>
</li>
<li>
<a class="cd-faq-trigger" href="#0">Как войти на сайт?</a>
<div class="cd-faq-content">
<!-- content here -->
</div>
</li>
<li><!-- ... --></li>
</ul>
<ul id="mobile" class="cd-faq-group">
<!-- ... -->
</ul>
<!-- ... -->
</div>
</section>
Каждый .cd-faq-group является неупорядоченным списком, содержащий справку, принадлежащий к той же категории в группе.
Шаг 2. CSSCSS довольно простой, вы можете загрузить исходный файл и сами убедиться. Мы добавил комментарии к сложным частям кода, а также мы хотели обратить внимание на одну важную вещь мы использовали .no-js класс, чтобы сделать эту демку совместимой с устройствами без поддержки javascript (или для устройств, где javascript выключены пользователем). Это не мало важно, так как, большинство разработчиков начинают переход на HTML5 и CSS3.
Как это работает? Мы назначаем данный класс в разметке. Плагин 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 () функцию к событию для окна прокрутки.
Вот и все. Готово!Скачивание файлов доступно только зарегистрированным пользователям