Дата и время публикации:
Как создать навигационное боковое меню с Javascript и css3
1. Что это такое
Боковое навигационное меню (от англ. SideNav) или боковая панель (от англ. Sidebar) или просто боковое меню (от англ. Side Menu) является навигационной формой современного дизайна WEB, реализуемой через каскадные таблицы стилий СSS и скрипты JavaScript.
Ниже приводится рецепт, предлагаемый w3schools.com на основе DIV несмотря на рекомендации консорциума W3C отказаться от его использования.
2. Таблицы стилий СSS
Боковое меню описывается классом sidenav, как показано в листинге 2.1.
Листинг 2.1
.sidenav {
height: 100%; /* Открываем на всю высоту, */
width: 0; /* а ширину будем изменять в скрипте JavaScript. */
top: 0; /* Чтобы меню не прыгало при прокрутке */
left: 0; /* страницы WEB, привязываемся к левому верхнему */
position: fixed; /* углу окна браузера WEB и накладываем вторым */
z-index: 1; /* слоем поверх содержимого страницы с заданием */
background-color: #004655; /* цвета выбранного дизайном . По вертикали */
overflow-x: hidden; /* разрешаем отображать содержимое только внутри */
padding-top: 60px; /* страницы с отступом 60px от верхнего края и */
transition: 0.5s; /* установкой анимации, "выползания" меню. */
}
Элемент меню в виде ссылки (тег a) описывается отдельно, как показано в листинге 2.2
Листинг 2.2
.sidenav a {
padding: 8px 8px 8px 32px; /* устанавливаем отступы от края меню и */
text-decoration: none; /* элементами между собой с запретом */
font-size: 25px; /* декорирования и установкой размера */
color: #FFF68F; /* шрифта c цвета выбранного дизайном. */
display: block; /* Отображение блочное с установкой */
transition: 0.3s /* скорости анимации перехода с пункта */
/* меню на пункт и наведения курсора мышкой */
}
Цвет подсветка элемента меню при наведении мышкой (селектор hover) или переходом на клавиатуре (селектор hover) задается, как показано в листинге 2.3.
Листинг 2.3
.sidenav a:hover, .offcanvas a:focus{
color: #FFEB00; /* задание цвета при выборе пункта меню */
}
В листинге 2.4 показан подкласс .closebtn класса .sidenav описывает свойства отображения иконки, отображаемой в правом верхнем углу меню.
Листинг 2.4
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
C использованием медиа-запроса @media будем изменять некоторые свойства для устройств типа монитор и имеющих максимальную высоту экран не более 450px
Листинг 2.5
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;} /* изменяем отступ от верха меню */
.sidenav a {font-size: 18px;} /* и размер шрифта элемента */
}
3. Использование JavaScript на странице
В начале странице или в отдельном файле sidenav.js, что более предпочтительно, напишем две функции – открытия и закрытия бокового меню. В листинге 3.1 приводится их реализация.
Листинг 3.1
/* Открытие бокового меню осуществляется установкой свойства стиля width, равным 250px, */
function openSideNav(keyId) {
document.getElementById(keyId).style.width = "250px";
}
/* а его закрытие осуществляется установкой свойства стиля width, равным 250px */
function closeSideNav(keyId) {
document.getElementById(keyId).style.width = "0";
}
Теперь остается лишь наполнить боковое меню содержимым и вставить на страницу, как показано в листинге 3.2
Листинг 3.2
<html>
<head>
<style>
. . .
<!--
Вставка определения классов стилий CSS и JavaScript, опеределенных
в листингах 2.1,..., 2.5 и 3.1.
-->
. . .
</style>
</head>
<body>
. . .
<div id="MySideNav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav("MySideNav")">×</a>
<a href="#">О ресурсе</a>
<a href="#">Услуги</a>
<a href="#">Клиентам</a>
<a href="#">Контакты</a>
</div>
. . .
<h2>Пример бокового меню>/h2<
<p>Нажмите на элемент ниже для того, чтобы открыть боковое навигационное меню.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav("MySideNav")">☰ открыть</span>
</body>
3. Билиография
2) Angular 2 Animate Example: Creating a Sliding Side Navigation Tutorial