Автор

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

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


Если на вашем сайте пользователи имеют много возможностей, то скорее всего, что такой проект нуждается в создании раздела часто задаваемых вопросов с информацией для поддержки ваших пользователей, кроме контактной формы. Мы собрали простой в настройке шаблон частых вопросов, который можно использовать, чтобы построить свою справку по сайту с удобной навигацией. Благодаря отзывчивому интерфейсу и реализации с помощью 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. CSS

CSS довольно простой, вы можете загрузить исходный файл и сами убедиться. Мы добавил комментарии к сложным частям кода, а также мы хотели обратить внимание на одну важную вещь мы использовали .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 () функцию к событию для окна прокрутки.

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

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

Мы уже не раз рассказывали о важности интеграции социальных сетей на вашем сайте. Они позволят не только увеличить оборот посетителей но и привлечь постоянных читателей сайта, что соответственно увеличит ядро аудитории. В сегодняшнем уроке мы рассмотрим как создать достаточно простые но привлекательные социальные кнопки для сайта, для этого мы будем использовать только CSS, что значительно ускорит загрузку страницы.


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

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


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

iLoad это скрипт галереи изображений для вашего сайта написанный на javascript. iLoad распространяется бесплатно для некоммерческих проектов при условии сохранения копирайтов и ссылок в файле. На этой странице вы всегда можете скачать свежую версию этого скрипта фото галереи и найдете информацию о том как работать с iLoad.

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!


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

Простой, отзывчивый слайдер с радиальным эффектом перехода на основе SVG clipPath и элементов маски.


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close