Как сделать сайдбар

Что такое сайдбар и как его сделать привлекательным

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

Что такое сайдбар

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

Нужна ли боковая панель и для чего

• навигационное меню;
• информационные блоки;
• функциональные элементы (например, корзина);
• реклама, акции;
• ссылки на статьи;
• фильтры товаров;
• дополнительные виджеты.

Они выглядят органично и привлекают внимание пользователей.

Маркетинг

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

Что такое Телепорт от Google, и как с ним работать

Что такое Телепорт от Google, и как с ним работать

Виды

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

Иногда панель располагают слева.

Редко встречается сайдбар по обе стороны или с двумя столбцами с одной стороны.

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

Что можно добавить в сайдбар

Из-за боковой панели может страдать контент: площадь размещения уменьшают, шрифты делают мельче, чтобы поместить больше информации. Чтобы сделать sidebar на сайте эффективным, стоит размещать только полезные элементы.

Элементы навигации и управления

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

Социальные виджеты

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

Информация об авторе или о компании

Биография автора, краткий рассказ о становлении компании – это важная информация для пользователей. Подобная информация может говорить об успешности бренда и повысить лояльность клиентов.

Конверсионные элементы

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

Реклама

Реклама на сайдбаре – рискованная затея. Ее размещение рассеивает внимание посетителей, заставляя избегать всех элементов, представленных на боковой панели. Поэтому ее нужно делать визуально привлекательной, но не выбивающейся из общего дизайна страницы. Также необходимо учитывать такое явление как «баннерная слепота» — игнорирование навязываемой рекламы.

Для наибольшей эффективности используют следующие приемы:

• добавляют яркие цвета;
• внедряют привлекательные символы;
• пишут продуманные заголовки.

Анонсы контента

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

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

Чего не должно быть в сайдбаре

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

• облако тегов;
• виджет «свежие записи»;
• календарь;
• счетчики;
• раздел «последние комментарии».

Каждый из этих элементов не несет полезной информации для пользователей, но занимает место, ухудшая юзабилити страницы.

Принципы оформления сайдбара

При создании сайдбара следует придерживаться принципов размещения и оформления.

Количество сайдбаров на сайте

Рекомендуется использовать не более одного сайдбара. В пользу этого есть несколько аргументов:

1. Две (и более) боковые панели закрывают основной контент, делая его неудобным для чтения.
2. Главная информация на странице может не привлекать внимание из-за отвлекающих элементов сайдбара.
3. В адаптивном дизайне панели размещаются внизу, что меняет облик сайта и делает его неузнаваемым.

Размеры

Ширину нужно устанавливать, опираясь на основное содержимое, чтобы сайдбар не перекрывал приоритетный контент. Стандартно она составляет 20-30% от ширины области контента, если боковая панель одна. Если используется более одного сайдбара, суммарная ширина не должна превышать 50%. Высота не должна пересекать границы экрана, в противном случае посетителям придется прокручивать.

Расположение сайдбара

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

Цветовые схемы и оформление

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

Маркетинг

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

Сайт в 2022 году: какой способ создания подойдет вам

Сайт в 2022 году: какой способ создания подойдет вам

Как сделать сайдбар

Боковую панель можно спроектировать с помощью CSS и HTML или через WordPress. Для этого понадобится готовый макет сайта, чтобы правильно распределить ширину желаемого блока.

При создании сайдбара вручную нужно:

1. Открыть кодовый редактор.

1. Создать общий блок div, где будут располагаться колонки, и выбрать ему класс (например, layout).
2. Выбрать позиционирование для контейнера и свойство колонок .
3. Настроить дизайн панели: цвета, шрифты.

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

В WordPress не нужно писать код вручную, что значительно упрощает процесс. Работа проходит в конструкторе, где регистрируется навигационная панель с добавлением виджетов. Для этого нужно записать несколько функций в PHP файлы. Потребуются массивы с данными, которые будут ссылаться на виджеты и их теги div.

Заключение

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

Как сделать сайдбар за 5 строк кода

Сайдбары хороши в двух случаях: если на них расположено что-то настолько важное, что они должны всегда быть перед глазами (взять, к примеру, любой почтовый клиент, да хотя бы и Gmail) или если нужно иметь возможность это самое важное спрятать для экономии места (опять же, как в Gmail, но уже в мобильной версии). Браться за создание сайдбаров с нуля – задача не для средних умов, да и вообще бессмысленно. Для такой задачи лучше употребить соответствующий фреймворк. Об одном из таких примеров мы сегодня и поговорим.

Коротко о Webix

Прежде чем перейти непосредственно к коду, давайте обмолвимся коротко, что это за библиотека такая. Итак, Webix представляет из себя библиотеку UI компонентов разной сложности, от простой кнопки до Spreadsheet Widget, с помощью которого можно создавать онлайн таблицы в стиле Excel. Помимо собственно компонентов, в наличии механизм обработки событий, поддержка оффлайн-режима, интеграция с jQuery, AngularJS, Vue.js, Backbone.js, online инструменты: Skin builder, Form builder. Заявлена совместимость с Angular 2.

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

Подключаем необходимые файлы

Если вы загрузите архив с библиотекой, внутри папки codebase вы обнаружите необходимые js и css файлы:

Также можно использовать CDN:

npm install webix

nuget install Webix

Или если вы предпочитаете Bower:

bower install webix

Все вышеперечисленное относится непосредственно к Webix. Для того, чтобы получить возможность создавать сайдбары, нам понадобится еще парочка файлов. Доступ к ним же через CDN:

Сайдбар на примере e-mail клиента

Поскольку мы уже заговорили об e-mail клиентах, не будем отступать от этой темы и создадим в качестве примера именно такое приложение. С помощью компонента DataTable я взял вот такой вот просмотрщик имейлов, к которому мы и будем добавлять сайдбар:

Поскольку обзор DataTable не входит в наши планы, подробно останавливаться на нем я не буду, исходный код примера можно будет посмотреть ниже.

Начнем с основ. Для того, чтобы добавить в приложение определенный компонент, в Webix используется свойство view. Например, мы хотим создать кнопку:

view: "button"

Для инициализации Webix-приложения нам понадобится следующий код:

// опционально. код выполнится после загрузки страницы webix.ready(function()< // конструктор webix.ui(< // описание приложения view: "button", >); >);

Код выше создаст страницу, состоящую из одной кнопки. Поскольку наше приложение состоит из нескольких компонентов, нам нужно задуматься о создании лэйаута. Для этого используются свойства rows и cols, которые служат для создания рядов и колонок.

webix.ui(< cols: [ < view: "button">, < view: "button">] >);

Создаст уже две колонки, по одной кнопке в каждой. Комбинируя эти свойства, добавляя вложенные колонки и ряды, меняя их размеры, например, с помощью свойства gravity можно создать лэйаут необходимой сложности.

Теперь мы можем перейти к сайдбару. Он основан на компоненте Tree и также использует формат JSON для описания своей структуры. Для удобства лучше хранить такое описание в отдельной переменной.

Наш сайдбар будет состоять из следующих пунктов меню:

var menu_data = [ , < /* прочие пункты */ >, , < id: "work", value: "Work">, < id: "news", value: "News">]> ], 

Каждый элемент должен иметь уникальный ID. value определяет, каким будет текст пункта меню, а icon – иконку. Webix использует набор иконок Font Awesome. Обратите внимание на пункт Tags. Он содержит вложенные подменю, которые будут открываться по клику.

Итак, суммируя все вышесказанное, мы можем перейти к нашему приложению:

webix.ui(< cols:[ /* первая колонка, сайдбар */ < view: "sidebar", data: menu_data, >, /* вторая колонка */ < /* dataview component */ >] >);

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

В результате мы получили вот такой сайдбар:

Пример кода и демку можно посмотреть здесь.

Добавляем кнопку для скрытия сайдбара

Если мы хотим сэкономить немного места или просто не хотим, чтобы сайдбар мозолил глаза, можно добавить в приложение кнопку-гамбургер, знакомую нам по мобильным (и не только) приложениям. Для этого необходимо добавить к приложению верхний тулбар, что немного усложнит наш лэйаут. Теперь он будет состоять из двух рядов. В первый из них, верхний ряд мы и поместим тулбар. Второй, нижний, останется без изменений и будет состоять их просмотрщика с сайдбаром:

webix.ui(< rows:[ < /* здесь будет тулбар */>, , < /* наши имейлы */ >]> ] >);

Давайте разберемся с кодом, который нам понадобится для создания заголовка. Как и было сказано, тип создаваемого компонента определяется значением свойства view. В данном случае этим значением будет toolbar. Его содержимое определяется значением свойства elements. В нашем случае мы поместим на тулбар следующие элементы: кнопку-гамбургер, заголовок и несколько иконок-уведомлений:

 >, /* заголовок */ < view: "label", label: "Webix E-Mail CLient">, < /* добавляем пустое пространство */ >, /* уведомление 1 */ < view: "button", type: "icon", icon: "envelope-o", width: 45, css: "app_button", badge:4>, /* уведомление 2 */ < view: "button", type: "icon", icon: "bell-o", width: 45, css: "app_button", badge:10>] >,

Свойства type: «icon» и icon: «icon-name» создают кнопки-иконки. Свойство click позволяет определить функцию, которая будет вызываться по клику. В данном случае, она переключает состояния сайдбара. К двум последним кнопкам мы добавили свойство badge, которое позволяет использовать оранжевые бейджи с номерами, соответствующими значению свойства.

Вот что получилось в итоге:

В свернутом виде остаются видимыми иконки меню сайдбара. Наведя на них курсор, можно посмотреть содержимое меню и выбрать один из пунктов.

Раскрытый сайдбар имеет уже привычный нам вид:

И да, обратите внимание на значки уведомления справа вверху. Именно ради этих оранжевых кружочков мы и использовали свойство badge.

Попробовать этот пример и поиграть с кодом можно по этой ссылке.

Заключение

Приведенный пример не описывает всех возможностей данного компонента. Помимо прочего, вы можете задавать шаблоны для элементов сайдбара: указывать CSS-класс, который нужно к ним применить, менять внешний вид стрелок для многоуровневых меню и т.д. Sidebar наследует API компонента Tree, а также предоставляет набор уникальных для него методов. Более подробно о них вы можете прочитать на странице документации.

• javascript library
• sidebar
• боковая панель

Создание сайдбара с помощью HTML, CSS и JavaScript

Предлагаю пошаговое руководство по создания отзывчивого сайдбара (боковой панели). Этот графический элемент можно использовать для навигации в любых веб-проектах. Уверен, что существует миллион различных способов создания боковой панели, но я выбрал именно этот.

Все шаги руководства будут доступны каждому, кто обладает базовыми знаниями в области HTML, CSS и JavaScript. Замечу, что изначально этот сайдбар создавался для использования на дашборде/CMS, поскольку он позволяет добавить множество опций меню.

Из личных предпочтений я использовал ванильный JavaScript вместо jQuery. Единственная необходимая зависимость — Font Awesome 6.2 — последняя доступная на данный момент версия. Я использовал бесплатную версию Font Awesome 6.2, доступ к которой можно получить здесь.

Чтобы начать работу, выполните следующие шаги. Вы можете скачать код из GitHub по этой ссылке.

Шаг 1: Настройте HTML и не забудьте добавить Font Awesome 6.2 CDN в тег .