Боковая панель | 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
Шаблоны > Меню категорий
Вывод данного раздела настраивается в файле categorymenu.tpl В данном разделе настраивается вывод меню из категорий публикаций.
[root] текст [/root] | Выводят текст, заключенный в них при первоначальной генерации шаблона меню. |
[item] текст [/item] | Выводят каждый элемент категории при построении списка меню категорий. В тексте заключенном в этом теге выводится HTML оформление каждого пункта меню |
[sub-prefix] текст [/sub-prefix] | Выводят текст, заключенных в них в виде префикса для подкатегорий, если категория является родительской и у нее есть подкатегории. |
[sub-suffix] текст [/sub-suffix] | Выводят текст заключенных, в них в виде суффикса для подкатегорий, если категория является родительской и у нее есть подкатегории. |
{sub-item} | Указывает место для вывода подкатегорий в родительской категории, в случае если у нее есть подкатегории. Данный тег может использоваться только внутри тегов [item] [/item] |
{id} | Выводит ID категории. |
{name} | Выводит имя категории. Данный тег может использоваться только внутри тегов [item] [/item] |
{url} | Выводит URL категории. Данный тег может использоваться только внутри тегов [item] [/item] |
{icon} | Выводит иконку категории. Данный тег может использоваться только внутри тегов [item] [/item] |
[category-icon] текст [/category-icon] | Выводят текст, заключенный в них, если для категории, где находится публикация, была задана иконка в настройках категории |
[not-category-icon] текст [/not-category-icon] | Выводят текст если для категории, где находится публикация, не задана иконка |
{news-count} | Выводит количество публикаций в категории. Данный тег может использоваться только внутри тегов [item] [/item] |
[active] текст [/active] | Выводят текст заключенный в них, если просматривая на сайте категория или новость, принадлежит категории из меню. |
[not-active] текст [/not-active] | Выводят текст, заключенный в них, если просматриваемая на сайте категория, или новость, не принадлежит категории из меню. |
[isparent] текст [/isparent] | Выводят текст заключенный в них, если категория является родительской и содержит в себе подкатегории Данный тег может использоваться только внутри тегов [item] [/item]. |
{description} | Выводит описание категории |
[description] текст [/description] | Выводят текст заключённый в них если задано описание категории |
[not-description] текст [/not-description] | Выводят текст заключённый в них если не было задано описание категории |
[not-parent] текст [/not-parent] | Выводят текст, заключённый в них, если категория не является родительской и не содержит в себе подкатегории |
[is-children] текст [/is-children] | Выводят текст, заключённый в них, если категория является подкатегорией другой категории |
[not-children] текст [/not-children] | Выводят текст заключённый в них, если категория не является подкатегорией другой категории |
Данный тег может использоваться только внутри тегов [item] [/item] и используется например для подветки активных категорий из меню.
Пример простейшего шаблона меню категорий на основе HTML тегов ul и li:
[root]<ul>[/root]
[item]
<li><a href=»{url}»>{name}</a>
[sub-prefix]<ul>[/sub-prefix]{sub-item}[sub-suffix]</ul>[/sub-suffix]
</li>
[/item]
[root]</ul>[/root]
Как создать вертикальное меню
❮ Назад Далее ❯
Узнайте, как создать вертикальное меню с помощью CSS.
Вертикальное меню
Главная страница Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4
Попробуйте сами »
Как создать вертикальную группу кнопок
Шаг 1) Добавьте HTML:
Пример
Шаг 2) Добавьте CSS:
Пример
.vertical-menu {
ширина: 200 пикселей; /* Установите ширину, если хотите */
.vertical-menu a {
background-color: #eee;
/* Серый цвет фона */
color: black; /* Черный текст
цвет */
отображение: блок; /* Сделать так, чтобы ссылки отображались ниже
друг друга */
padding: 12px; /* Добавляем отступы */
украшение текста: нет; /* Удалить подчеркивание из ссылок */
}
.vertical-menu a:hover
{
фоновый цвет: #ccc; /*
Темно-серый фон при наведении мыши */
}
.
vertical-menu a.active {
background-color: #04AA6D; /* Добавляем зеленый цвет к ссылке «активный/текущий»
*/
цвет: белый;
}
Попробуйте сами »
Меню вертикальной прокрутки
Главная Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 Ссылка 8 Ссылка 9Ссылка 10
Задайте определенную высоту и добавьте свойство overflow , если вы хотите меню с вертикальной прокруткой:
Пример
.vertical-menu {
width: 200px;
высота: 150 пикселей;
переполнение-у: авто;
}
Попробуйте сами »
Совет: Ознакомьтесь с учебным пособием How To-Side Navigation, чтобы узнать, как создать фиксированную боковую навигацию во всю высоту.
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
800
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Как создать адаптивную HTML-панель навигации?
HTML не нуждается в представлении. HTML расширяется как язык гипертекстовой разметки. Это самый популярный и широко используемый язык для разработки веб-приложений. Созданный в 1991 году Бернерсом-Ли, но впервые опубликованный в 1995 году, язык программирования HTML претерпел множество изменений и версий за эти годы. Выпущен в 1999, HTML 4 был популярной прорывной версией, которая привлекла большое внимание и была довольно быстро принята во всем мире, вскоре став для многих языком выбора для разработки веб-приложений. В очередной раз обновлен язык — HTML5; и был опубликован в 2012 году.
В этой статье о панели навигации HTML мы сосредоточимся на навигации между веб-страницами с помощью панели навигации.
Мы также добавим немного CSS, чтобы веб-страница выглядела и чувствовалась хорошо.
В этой статье вы научитесь кодировать и работать над веб-приложением HTML вместе с нами. Обсуждаемое приложение может перемещаться между страницами с помощью ссылок, представленных в панели навигации. Итак, без лишних слов, приступим!
Предпосылки
- Мы рекомендуем вам иметь базовые знания HTML и CSS, прежде чем переходить к руководству. Несмотря на то, что это простое руководство, оно поможет, если вы уже знаете самые основные понятия. У нас есть статья Что такое HTML?; Вы можете пойти проверить это.
- Мы используем Visual Studio Code в качестве текстового редактора для этого руководства. Это простой и мощный текстовый редактор, поддерживающий множество языков, включая HTML, CSS и JavaScript.
Каталог проектов
В конце каталог проекта должен выглядеть так.
Рис.: Каталог проектов
Код
Давайте теперь начнем кодировать это веб-приложение HTML.
Как вы можете видеть в каталоге проекта, в этом веб-приложении есть четыре страницы. Наша главная цель — позволить пользователям перемещаться по этим страницам с помощью панели навигации для добавления на все веб-страницы. Таким образом, код будет в основном одинаковым для всех четырех веб-страниц с небольшими изменениями здесь и там.
index.html
Это домашняя (целевая) страница сайта. Давайте продолжим и лучше поймем код в этом файле.
<заголовок>
<метакодировка="UTF-8" />
<ссылка
href=»https://fonts.googleapis.com/css2?family=Montserrat&display=swap»
rel=»таблица стилей»
/>
<тело>
<навигация>
<дел>
Панель навигации
html»>Главная