Боковая панель | HTML | CodeBasics
Большинство сайтов имеют боковую панель или, как её ещё называют, сайдбар. Он служит для отображения информации, которая дополняет основной текст, но не является обязательной. Чаще всего это меню раздела, список определений из статьи, виджеты и т.д.
Для того чтобы корректно разметить такую область, существует тег <aside>
, внутри которого и располагается наша боковая панель. Добавим в пример из прошлого урока боковую панель с дополнительным меню.
<header> <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта --> <nav> <!-- Меню --> <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <aside> <!-- Боковая панель (сайдбар) --> <nav> <!-- Дополнительное меню страницы --> <ul> <li><a href="/service-1/">Услуга 1</a></li> <li><a href="/service-2/">Услуга 2</a></li> <li><a href="/service-3/">Услуга 3</a></li> </ul> </nav> </aside> <main> <p>Основной контент страницы.Это может быть статья, описание услуги, данные на странице контакты</p> <section> <h3>Оставить заявку</h3> <form> <!-- Здесь форма заказа услуги --> </form> </section> <section> <h3>Читайте также</h3> <article> <h4>Услуга 2</h4> <p>Описание новой услуги</p> <a href="#">Ссылка на услугу</a> </article> <article> <h4>Услуга 3</h4> <p>Описание новой услуги</p> <a href="#">Ссылка на услугу</a> </article> <article> <h4>Услуга 4</h4> <p>Описание новой услуги</p> <a href="#">Ссылка на услугу</a> </article> </section> </main>
Обратите внимание, что <aside>
содержится вне тега <main>
. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега
<main>
.
Задание
Создайте шапку сайта. Она состоит из 2-х элементов:
- Логотип
- Секция навигации. Внутри неё маркированный список из двух элементов
Добавьте секцию <main>
. Внутри создайте секцию с заголовком в теге <h3>
. Внутри секции создайте два блока с описанием новых услуг. Не забудьте, что внутри тега
обязательно содержится заголовок. Сами заголовки внутри <article>
разметьте тегом <h4>
.
Добавьте боковую панель. Она является уникальной для каждой страницы и содержит текст, относящийся только к этой странице. Внутри панели вставьте произвольный текст. Подумайте, где именно будет расположена эта область
Упражнение не проходит проверку — что делать? 😶Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Хоть мы и говорили про боковую панель, но
aside
обозначает дополняющую область. При этом, зачастую, визуально она выглядит как боковая панель
←Предыдущий
Следующий→
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
html — Боковое меню на всю высоту страницы
Вопрос задан
Изменён 7 лет 5 месяцев назад
Просмотрен 7k раза
Ребят, либо я очень туплю, либо это нельзя сделать? Помогите, пожалуйста.
Есть хидер и футер (абсолютно позиционированный и прижатый к низу страницы). Так же есть боковое меню, которое должно растягиваться на всю допустимую высоту. Как это сделать?
http://jsfiddle.net/v9tj3/5/
<div> <div> <div></div> </div> <div> <div> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пункт <br /> пунктend </div> <ul> <li>111111</li> <li>222222</li> <li>3333</li> <li>4444444444</li> <li>5555555</li> <li>ABCD</li> </ul> </div> <div></div> <div> <span>LEFT</span> <span>RIGHT</span> </div> </div>
—
* { margin: 0px; padding: 0px; } html, body { height: 100%; } ul { //display: inline; display: inline-block; font-size: 12px; list-style: none; margin-top: 10px; zoom: 1; } li { background: #000; color: #fff; display: inline; float: left; height: 22px; margin-right: 2px; overflow: hidden; text-align: center; } .container { min-height: 100%; position: relative; } .header { background: #d1d4d9; border: 1px solid #000; box-shadow: 0px 0px 10px #a9a9a9; height: 108px; z-index: 5; } .logo { background: #000; float: right; height: 91px; margin: 5px 5px 5px 0px; width: 206px; } .footer { background: #9e2627; border-top: 3px solid #000; bottom: 0px; height: 30px; position: absolute; width: 100%; } .footer-helper { height: 30px; width: 100%; } .lBlock { background: #27919e; box-shadow: 2px 0px 10px #cecdd2; color: #fff; float: left; width: 200px; z-index: -5; } .rBlock { overflow: hidden; text-align: center; width: 100%; } .left { float: left; } .right { float: right; }
- html
- css
12
Вот первый результат по 2 колонкам одинаковой высоты css
http://htmlbook.
- еще можно display: table
Нужно задать для колонки свойство — height: 100%;. Странно что вы указали колонке абсолютную высоту в 200px и надеетесь, что она растянется на всю страницу. Если возникнут проблемы — обращайтесь в комментарии
6
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как создать боковое меню навигации
❮ Назад Далее ❯
Узнайте, как создать анимированное закрывающееся боковое меню навигации.
× О Услуги Клиенты Контакт
× О Услуги Клиенты Контакт
× О Услуги Клиенты Контакт
Попробуйте сами »
Шаг 1) Добавьте HTML:
Пример
open
…
Шаг 2) Добавьте CSS:
Пример
/* Боковое меню навигации */
. sidenav {
height: 100%; /*
100 % Полная высота */
width: 0; /* 0 ширина — изменить это
с JavaScript */
позиция: фиксированная; /* Оставайтесь на месте
*/
z-индекс: 1; /* Оставайтесь на вершине */
top: 0; /* Оставайтесь наверху */
left: 0;
фоновый цвет: #111; /* Черный*/
переполнение-x: скрыто; /* Отключить горизонтальную прокрутку */
отступ сверху: 60px; /* Разместите контент на расстоянии 60 пикселей от верхнего края */
transition: 0.5s; /* 0,5-секундный эффект перехода для слайда в боковом меню */
}
/* Ссылки меню навигации */
.sidenav a {
padding: 8px 8px 8px 32px;
текстовое оформление: нет;
размер шрифта: 25 пикселей;
цвет: #818181;
отображение: блок;
переход: 0,3 с;
}
/* Когда вы наводите курсор на навигационные ссылки,
изменить их цвет */
.sidenav a:hover {
цвет: #f1f1f1;
}
/* Расположение и стиль кнопки закрытия (верхняя
правый угол) */
. sidenav .closebtn {
position:
абсолютный;
сверху: 0;
справа: 25 пикселей;
размер шрифта: 36 пикселей;
левое поле: 50 пикселей;
}
/* Стиль содержимого страницы — используйте это, если хотите отправить содержимое страницы в
справа при открытии боковой навигации */
#main {
transition: margin-left .5s;
отступ: 20 пикселей;
}
/* На небольших экранах, высота которых меньше
450 пикселей, измените стиль боковой панели (меньше отступов и шрифт меньшего размера).
размер) */
Экран @media и (максимальная высота: 450 пикселей) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Шаг 3) Добавьте JavaScript:
Пример ниже скользит в боковой панели навигации и делает ее шириной 250 пикселей:
/* Набор
ширина боковой навигации до 250px */
функция
openNav() {
document. getElementById(«mySidenav»).style.width
= «250 пикселей»;
}
/*
Установите ширину боковой навигации на 0 */
function closeNav() {
document.getElementById(«mySidenav»).style.width = «0»;
}
Попробуйте сами »
Пример ниже скользит в боковой панели навигации и перемещает содержимое страницы вправо (значение, используемое для установки ширины sidenav, также используется для установки левое поле «содержимого страницы»):
/* Установите ширину боковой навигации на 250 пикселей и левое поле
содержимое страницы до 250 пикселей */функция
openNav () {
document.getElementById(«mySidenav»).style.width
= «250 пикселей»;
document.getElementById(«main»).style.marginLeft
= «250 пикселей»;
}
/* Установите ширину боковой навигации равной 0, а
левое поле содержимого страницы на 0 */
function closeNav() {
document. getElementById(«mySidenav»).style.width = «0»;
document.getElementById(«main»).style.marginLeft = «0»;
}
Попробуйте сами »
Пример ниже также скользит в боковой панели навигации и перемещает страницу содержимое справа, только на этот раз мы добавляем черный цвет фона с 40% непрозрачность элемента body, чтобы «подсветить» боковую навигацию:
/* Установите ширину боковой навигации на 250 пикселей и левое поле
содержимое страницы до 250 пикселей и добавьте черный цвет фона в тело функции */
openNav() {
document.getElementById(«mySidenav»).style.width
= «250 пикселей»;
document.getElementById(«main»).style.marginLeft
= «250 пикселей»;
document.body.style.backgroundColor = «rgba(0,0,0,0.4)»;
}
/* Установите ширину боковой навигации равной 0, а
левое поле содержимого страницы на 0, а цвет фона тела на
белый */
функция closeNav() {
document. getElementById(«mySidenav»).style.width = «0»;
document.getElementById(«main»).style.marginLeft = «0»;
document.body.style.backgroundColor = «белый»;
}
Попробуйте сами »
Пример ниже скользит в боковой навигации слева и закрывает вся страница (100% ширина):
/* Открываем функцию sidenav */
openNav() {
document.getElementById(«mySidenav»).style.width
= «100%»;
}
/* Закрыть/скрыть боковую панель */
function closeNav() {
document.getElementById(«mySidenav»).style.width = «0»;
}
Попробуйте сами »
В приведенном ниже примере открывается и закрывается боковое меню навигации без анимации:
/* Открываем функцию sidenav */
openNav() {
document.getElementById(«mySidenav»).style.display
= «заблокировать»;
}
/* Закрыть/скрыть боковую панель */
function closeNav() {
document. getElementById(«mySidenav»).style.display = «нет»;
}
Попробуйте сами »
В следующем примере показано, как создать правостороннее меню навигации:
Правостороннее меню навигации:
.sidenav {
right: 0;
}
Попробуйте сами »
В приведенном ниже примере показано, как создать боковое меню навигации, которое всегда отображается (фиксировано):
Всегда показывать боковую панель:
/* Sidenav */
.sidenav {
height: 100%;
ширина:
200 пикселей;
позиция: фиксированная;
z-индекс: 1;
сверху: 0;
слева: 0;
background-color: #111;
переполнение-x: скрыто;
отступы сверху: 20px;
}
/* Содержимое страницы */
.main {
поле слева: 200px; /* То же, что и ширина sidenav */
}
Попробуйте сами »
Совет: Перейдите к нашему руководству по CSS Navbar, чтобы узнать больше о панелях навигации.
Вы когда-нибудь слышали о W3Schools Spaces ? Здесь вы можете создать свой сайт с нуля или использовать шаблон и разместить его бесплатно.
Начните бесплатно ❯
* кредитная карта не требуется
❮ Предыдущая Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
2 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
16 меню боковой панели CSS
Коллекция отобранных бесплатных HTML и меню боковой панели CSS примеров кода из codepen и других ресурсов. Обновление коллекции июля 2018 года. 3 новых предмета.
- Меню CSS
- Боковые панели Bootstrap
О коде
Меню администратора приложения
Меню администратора приложения. светлый/темный режимы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: tailwind.css
О коде
Заполнение меню при наведении курсора
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Одностраничное приложение на чистом CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Эффект меню
Инверсия эффектов меню цвета текста.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Навигация только с помощью CSS для боковой панели
CSS отражает только навигацию для боковой панели.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Меню боковой панели CSS
Панель навигации HTML и CSS и мегаменю боковой панели .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: bootstrap.css, font-awesome.css
О коде
Фиолетовое боковое меню
Это обратный инжиниринг дизайна «Hyperspace» из HTML5 Up! https://html5up.net/гиперспейс
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Pure CSS Fly в боковой панели навигации
Простая многоуровневая боковая панель навигации . Включает в себя поднавигацию на чистом css, которая оставляет видимыми значки родительской навигации. Элементы навигации будут прокручиваться ( overflow-y
) при необходимости. Использует преобразования
с и перехода
с.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: ionicons.css
О коде
Анимация навигации по боковой панели
Ничто так не сравнится с маленькой модной накладкой для тела.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Фиксированная навигация
Исправлена навигация на боковой панели, которая расширялась при наведении.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Полностью адаптивное боковое меню CSS3
Полностью адаптивное боковое меню без необходимости использования JavaScript и с использованием менее 200 строк функционального кода CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Скользящее меню боковой панели CSS
Скольжение CSS Боковое меню с прокруткой, JS не использовался
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Вращающаяся боковая 3D-панель навигации
Вертикальная панель навигации , которая переключается со значка на текст с классной анимацией.