Автор

19 06.2015
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 () функцию к событию для окна прокрутки.

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

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


vk.com/club.ssdru

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


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

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

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


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

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


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

Фон является неотъемлемой частью любого сайта, красивое оформление позволяет задать тон всему ресурсу. Здесь, перед веб-мастером, стоит не простая задача, ведь необходимо подобрать правильно цвета, чтобы пользователь не терялся на сайте и информация была хорошо видна. В данном уроке мы рассмотрим пример создания замечательного анимированного фона, который будет жить своей жизнь и менять цветовую палитру, смотрится весьма удивительно, и позволяет привлечь внимание посетителей.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close