Как сделать сайдбар css
Перейти к содержимому

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

  • автор:

Фиксированный двухколоночный макет

Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. В широкой колонке располагается контент, а в узкой, называемой ещё на жаргоне веб-разработчиков сайдбар (от англ. sidebar, боковая панель) навигация. Впрочем, ничего не мешает сделать колонки одинаковой ширины, если это продиктовано дизайном. На рис. 5.11 представлен макет, состоящий из двух колонок, в правой колонке расположена навигация, а в левой контент.

Двухколоночный макет

Рис. 5.11. Двухколоночный макет

Из-за того, что ширина всех колонок известна заранее, в силу того, что мы имеем дело с фиксированным макетом, существует несколько способов формирования колонок. Общий принцип у них такой. Слои с колонками располагаются в контейнере, назовём его layout , для которого устанавливается ширина макета и выравнивание по центру.

Будем придерживаться соглашения, что слой sidebar формирует боковую панель с навигацией, а content основное содержание страницы (контент).

Навигация слева

Первый способ формирования колонок основан на позиционировании. Для слоя layout задаём относительное позиционирование, а для внутренних слоёв абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left и top (пример 5.3).

Пример 5.3. Использование позиционирования

.layout < width: 980px; margin: auto; position: relative; /* Относительное позиционирование */ >.sidebar, .content < position: absolute; >.sidebar < background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ >.content < background: #F4ECCE; /* Цвет фона */ left: 180px; /* Сдвиг вправо */ width: 800px; /* Ширина колонки */ >

По умолчанию у свойства left значение 0, так что для sidebar это свойство не установлено. У абсолютно позиционированных элементов ширина равна ширине контента, так что значение width требуется указывать для каждого слоя.

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

Более простой стиль получается при использовании свойства float со значением left , которое задано для слоя sidebar . Но чтобы получилась не обтекаемая врезка, а подобие колонки, для слоя content также требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её (пример 5.4).

Пример 5.4. Использование float

.layout < width: 980px; margin: auto; >.sidebar < background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: left; /* Обтекание справа */ >.content < background: #F4ECCE; /* Цвет фона */ margin-left: 180px; /* Отступ слева */ >

Как вариант, можно убрать свойство margin-left , а для формирования колонок добавить к layout свойство overflow с значением auto или hidden .

Навигация справа

Приведённые выше стили для создания навигации слева могут быть легко изменены и под навигацию справа. В действительности, разница между колонками только в их ширине и цвете фона. Изменив размеры, связанные с шириной и поменяв местами фон, получим результат, когда навигация уже расположена справа. В примере 5.5 показана модификация кода из примера 5.3.

Пример 5.5. Использование позиционирования

.layout < width: 980px; margin: auto; position: relative; >.sidebar, .content < position: absolute; >.content < background: #F4ECCE; /* Цвет фона */ width: 800px; /* Ширина колонки */ >.sidebar < background: #C6DD7D; /* Цвет фона */ left: 800px; /* Сдвиг вправо */ width: 180px; /* Ширина колонки */ >

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

Аналогичное действие можно провести и с примером, в котором фигурирует свойство margin-left . Но в данном случае удобнее использовать свойство float со значением right . Также margin-left поменяется на margin-right (пример 5.6).

Пример 5.6. Использование float

.layout < width: 980px; margin: auto; >.sidebar < background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: right; /* Обтекание слева */ >.content < background: #F4ECCE; /* Цвет фона */ margin-right: 180px; /* Отступ справа */ >

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

В примере 5.7 рассмотрен код, в котором навигация расположена в правой колонке, также присутствует подвал, и учитываются поля.

Пример 5.7. Двухколоночный макет

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Двухколоночный макет
  • Главная
  • Все коктейли
  • Коллекции
  • Бокалы
  • Компоненты
  • Фичи
  • Яблочный эг-ног

    Молоко — 40 мл, сок яблочный — 100 мл, сироп сахарный — 30 мм, один яичный желток.

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

    Результат данного примера показан на рис. 5.12.

    Двухколоночный макет

    Рис. 5.12. Двухколоночный макет

    Для слоя content поля включаются через свойство padding , но поскольку ширина слоя не указана, то поля никак на неё не повлияют. В слое sidebar вставлен список, у которого отступы установлены по умолчанию, поэтому никакого «налипания» текста на край фона нет. К подвалу (слой footer ) добавляется свойство clear , которое отменяет действие float . Оно требуется на тот случай, когда высота навигации превышает высоту контента, чтобы текст не накладывался на подвал.

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

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

    Отслеживать

    задан 2 июн 2021 в 19:04

    David Anisimov David Anisimov

    17 5 5 бронзовых знаков

    Так а в чём, собственно, конкретная проблема? Приложите код (html и css), где вы пытаетесь, и что-то не получается, тогда будет проще понять, что Вы делаете не так. Просто так за вас верстать вряд ли кто-то будет.

    Верстка сайдбаров: эффективная навигация и оформление контента

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

    Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

    Основные шаги верстки сайдбара

    • Разметка с использованием HTML

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

    • Стилизация с помощью CSS

    Для стилизации сайдбара используйте CSS. Применяйте классы и идентификаторы для элементов сайдбара и определите их внешний вид, размеры, цвета и шрифты. Используйте CSS-свойства, такие как `background`, `color`, `padding` и `margin`, чтобы создать привлекательный и сбалансированный дизайн.

    • Добавление интерактивности с помощью JavaScript

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

    Различные виды сайдбаров и их применение

    • Вертикальные сайдбары

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

    • Горизонтальные сайдбары

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

    • Выезжающие (overlay) сайдбары

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

    Создание адаптивных сайдбаров для мобильных устройств

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

    Важные аспекты интеграции

    • Взаимодействие с контентом

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

    • Совмещение с основной навигацией

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

    • Интеграция с футером страницы

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

    Оптимизация производительности и SEO

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

    Пример кода

    Пример базового кода для вертикального сайдбара:

    Создание сайдбара с помощью 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 в тег .

     


    Side Bar Tutorial




















    Main Content

    Lorem ipsum


    Шаг 2: Настройте CSS.

    /* Стиль по умолчанию */
    * margin: 0;
    font-family: 'Arial', sans-serif;
    >

    /* Сайдбар */
    .side-bar position: fixed;
    width: 3%;
    height: 100%;
    padding: 1%;
    background-color: #303030;
    color: #fff;
    border: 1px solid #000;
    >
    .side-top display: none;
    margin: 0 0 0 0;
    background-color: #181818;
    >
    .side-mid margin: 10px 0 25px 0;
    text-align: center;
    >
    .side-element-menu display: none;
    margin: 0 0 15px 0;
    padding: 10px 0px;
    border-radius: 4px;
    >
    .side-element display: block;
    margin: 0 0 15px 0;
    padding: 10px 0px;
    border-radius: 4px;
    >
    .side-title display: none;
    >
    .chosen-section background-color: #181818;
    color: #8970c2;
    >
    .side-element:hover cursor: pointer;
    color: #8970c2;
    >

    /* Панель ховера */
    .hover-bar display: none;
    position: fixed;
    margin-left: 5%;
    width: 10%;
    height: 100%;
    padding: 1%;
    background-color: #181818;
    color: #fff;
    border: 1px solid #000;
    >
    .hover-mid display: none;
    margin: 10px 0 25px 0;
    >
    .active-hover display: block;
    >

    /* Основной контент */
    .main-content margin: 0 0 0 6%;
    width: 92%;
    padding: 15px 0px 15px 15px;
    >
    .mc-extend margin: 0 0 0 18%;
    width: 80%;
    >

    @media only screen and (max-width: 600px) /* Side bar */
    .side-bar display: block;
    position: unset;
    width: 100%;
    padding: unset;
    background-color: #303030;
    color: #fff;
    border: 1px solid #000;
    >
    .side-top display: block;
    padding: 7px 15px;
    >
    .side-mid display: none;
    text-align: unset;
    margin: 0px;
    >
    .side-element-menu display: block;
    margin: 0;
    >
    .side-element display: block;
    margin: 0 0 0px 0;
    padding: 10px 15px;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0px;
    >
    .side-title display: inline-block;
    margin: 0 0 0 10px;
    >
    /* Панель ховера */
    .hover-bar z-index: 1;
    right: 0;
    top: 0;
    padding: 15px;
    width: 65%;
    height: 100%;
    border-radius: 4px;
    overflow: auto;
    background-color: #181818;
    color: #fff;
    box-shadow: 4px 4px 4px 4px #8970c2;
    >
    .hover-mid margin: 0px 0 25px 0;
    >
    /* Основной контент */
    .main-content margin: 0;
    width: unset;
    padding: 15px;
    >
    .mc-extend margin: 0;
    width: unset;
    padding: 15px;
    >
    >

    Шаг 3: Добавьте JS.

    window.addEventListener('load',function() // Сайдбар 
    const menuOption = document.querySelectorAll(".side-element");
    const menuBtn = document.getElementById("menu-btn");
    const hoverClass = document.querySelector(".hover-bar");
    const sections = document.querySelectorAll(".hover-mid");
    menuOption.forEach(function (item) item.addEventListener('click', function() if( this.dataset.hover !== undefined ) menuOption.forEach(function (m) m.classList.remove('chosen-section');
    >);
    const chosenSection = this.dataset.hover;
    sections.forEach(function (s) if(chosenSection === s.id) let containsHover = document.getElementById(chosenSection).classList.contains('active-hover');
    switch(containsHover) case false:
    document.getElementById(chosenSection).classList.add('active-hover');
    hoverClass.classList.add('active-hover');
    document.querySelector(".main-content").classList.add("mc-extend");
    item.classList.add("chosen-section");
    break;
    case true:
    document.getElementById(chosenSection).classList.remove('active-hover');
    hoverClass.classList.remove('active-hover');
    document.querySelector(".main-content").classList.remove("mc-extend");
    item.classList.remove("chosen-section");
    break;
    >
    > else document.getElementById(s.id).classList.remove('active-hover');
    >
    >);
    >
    >);
    >);
    // Отзывчивость
    const sideBarOptions = document.querySelector(".side-mid");
    menuBtn.addEventListener('click', function() let icon = this.querySelector('.fa-bars');
    let displayCheck = window.getComputedStyle(sideBarOptions).display;
    if(displayCheck == 'none') sideBarOptions.style.display = 'block';
    icon = this.querySelector('.fa-bars');
    icon.classList.add('fa-xmark');
    icon.classList.remove('fa-bars');
    > else sideBarOptions.style.display = 'none';
    icon = this.querySelector('.fa-xmark');
    icon.classList.add('fa-bars');
    icon.classList.remove('fa-xmark');
    menuOption.forEach(function (m) m.classList.remove('chosen-section');
    >);
    hoverClass.classList.remove('active-hover');
    sections.forEach(function(s) document.getElementById(s.id).classList.remove('active-hover');
    >);
    >
    >);
    >);

    Вы можете дополнительно включить в сайдбар такой элемент, как меню “Избранное”, и динамически загружать понравившиеся страницы. Если вы используете стек LAMP, то, вероятно, примерно представляете, как добавить эту функцию.

    Читайте нас в Telegram, VK и Дзен

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

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