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

(HTML / SASS) Как сверстать вертикальный сайдбар?

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

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

Помимо ответа и объяснения, также может помочь и полезная статья, касающаяся моей проблемы, если такая есть. Заранее скажу, что если вы приложите код, то оставляйте только те CSS строки кода, которые связанны с расположениями предметов, а не цвет фона или шрифт. И заранее спасибо!

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

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

image

Коротко о Webix

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

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

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

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

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

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

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

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

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

image

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

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

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

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

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

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

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

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

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

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

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

image

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

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

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

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

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

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

image

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

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

image

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

Как сделать сайдбар по всей высоте родителя?

Как сделать блок "Соседние статьи" справа по всей высоте родительского блока? Раньше у родительского блока была задана height , но ее пришлось переделать в min-height из-за поломки верстки при использовании аккордиона.

Или может быть как-то можно пофиксить работу самого аккордиона при height: 100% (вместо min-height )?

чтобы сайдбар был справа, или поместить его в коде после .arcticle, или задать ему flex-order больше чем у .article (> 0), или задать flex-order самому .article:

Ну и, конечно, выкинуть все лишние элементы.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css bootstrap height или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *