Как сверстать боковое меню
Узнайте, как создать меню с фиксированной боковой навигацией с помощью CSS.
Создание фиксированной боковой панели
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
/* The sidebar menu */
.sidenav <
height: 100%; /* Full-height: remove this if you want «auto» height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
>
/* The navigation menu links */
.sidenav a <
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>
/* When you mouse over the navigation links, change their color */
.sidenav a:hover <
color: #f1f1f1;
>
/* Style page content */
.main <
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
>
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) <
.sidenav
>
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш учебник CSS Navigation.
Совет: Чтобы узнать, как создать анимированную, закрывающуюся боковую навигацию, перейдите в руководство по навигации.
Узнайте, как создать адаптивное боковое навигационное меню с помощью CSS.
Создать адаптивный сайдбар
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Боковое навигационное меню */
.sidebar <
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
>
/* Сайдбар ссылки */
.sidebar a <
display: block;
color: black;
padding: 16px;
text-decoration: none;
>
/* Активная/текущая ссылка */
.sidebar a.active <
background-color: #4CAF50;
color: white;
>
/* Ссылки при наведении мыши */
.sidebar a:hover:not(.active) <
background-color: #555;
color: white;
>
/* Содержание страницы. Значение свойства margin-left должно соответствовать значению свойства width боковой панели */
div.content <
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
>
/* На экранах шириной менее 700 пикселей превратить боковую панель в верхнюю панель */
@media screen and (max-width: 700px) <
.sidebar <
width: 100%;
height: auto;
position: relative;
>
.sidebar a
div.content
>
/* На экранах размером менее 400 пикселей панель отображать вертикально, а не горизонтально */
@media screen and (max-width: 400px) <
.sidebar a <
text-align: center;
float: none;
>
>
Совет: Посетите CSS Навбар учебник, чтобы узнать больше о панелях навигации на нашем сайте W3Schools на русском.
Узнайте, как создать анимированное закрываемое боковое навигационное меню на сайте.
Создать анимированную боковую навигацию
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Ссылки меню навигации */
.sidenav a <
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
>
/* Когда вы наводите курсор мыши на навигационные ссылки, изменяется их цвет */
.sidenav a:hover <
color: #f1f1f1;
>
/* На экранах меньшего размера, где высота меньше 450px, измените стиль sidenav (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) <
.sidenav
>
Шаг 3) Добавить JavaScript:
Пример ниже выскальзывает в боковой навигации и делает его шириной 250 пикселей:
Оверлей боковой навигаци. Пример
/* Установите ширину боковой навигации до 250 пикселей */
function openNav() <
document.getElementById(«mySidenav»).style.width = «250px»;
>
/* Установите ширину боковой навигации на 0 */
function closeNav() <
document.getElementById(«mySidenav»).style.width = «0»;
>
Приведенный ниже пример перемещает боковую навигацию и сдвигает содержимое страницы вправо (значение, используемое для установки ширины sidenav, также используется для установки левого поля «страницы из содержимым»):
Боковая навигация выталкивает контент
Приведенный ниже пример также перемещает боковую навигацию и перемещает содержимое страницы вправо, только на этот раз мы добавляем черный цвет фона с непрозрачностью 40% к элементу body, чтобы «выделить» боковую навигацию:
Боковая навигация выталкивает контент с непрозрачностью
Пример ниже скользит в боковой навигации слева и охватывает всю страницу (ширина 100%):
Боковая навигация на всю ширину:
/* Открыть боковую навигацию */
function openNav() <
document.getElementById(«mySidenav»).style.width = «100%»;
>
/* закрыть/скрыть боковую навигацию */
function closeNav() <
document.getElementById(«mySidenav»).style.width = «0»;
>
Пример ниже открывает и закрывает боковое меню навигации без анимации:
Боковая навигация без анимации
/* Открыть боковую навигацию */
function openNav() <
document.getElementById(«mySidenav»).style.display = «block»;
>
/* Закрыть/скрыть боковую навигацию */
function closeNav() <
document.getElementById(«mySidenav»).style.display = «none»;
>
В приведенном ниже примере показано, как создать правое навигационное меню:
Правосторонняя навигация:
В приведенном ниже примере показано, как создать боковое навигационное меню, которое всегда отображается (зафиксировано):
Всегда отображать боковую навигацию:
/* Боковая навигация */
.sidenav <
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
>
/* Страница из содержимым */
.main <
margin-left: 200px; /* То же, что ширина sidenav */
>
Совет: Посетите CSS Навбар учебник чтобы узнать больше о панелях навигации на нашем сайте W3Schools на русском.
CSS меню
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню
Если вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.
Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.
Навигация по странице:
В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.
У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.
К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.
Пара слов о преимуществе выпадающих меню:
Вертикальное выпадающее меню вправо
к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.
Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.
Html для вертикального меню
Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:
Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.
Вертикальное выпадающее меню CSS
к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.
Вот эта строчка CSS
Посмотреть что у нас получилось в этом примере можно на скине:
Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:
Вот такой не сложный пример выпадающего меню у меня получился.
Это еще не конец, идем дальше.
Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.
Вертикальное выпадающее меню влево на CSS
к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)
Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.
Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:
Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера: