Как сделать - Полноэкранная панель навигации
Узнайте, как создать полноэкранное оверлейное меню навигации на сайте.
Нажмите на кнопки ниже, чтобы увидеть, как это работает:
Попробуйте сами »Создайте полноэкранную навигацию с наложением (оверлеем)
Шаг 1) Добавить HTML:
Пример
<!-- Оверлей -->
<div id="myNav" class="overlay">
<!-- Кнопка закрытия оверлейной навигации -->
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<!-- Наложение содержимого -->
<div
class="overlay-content">
<a href="#">Про нас</a>
<a href="#">Сервисы</a>
<a href="#">Клиенты</a>
<a href="#">Контакты</a>
</div>
</div>
<!-- Используйте любой элемент, чтобы открыть / показать оверлейное меню навигации -->
<span onclick="openNav()">open</span>
Шаг 2) Добавить CSS:
Пример
/* Оверлей (фон) */
.overlay {
/* Высота & ширина зависит от того, как вы хотите раскрыть оверлей (см. JS ниже) */
height: 100%;
width: 0;
position: fixed; /* Оставаться на месте */
z-index: 1; /*
Расположиться сверху */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Черный резервный цвет */
background-color: rgba(0,0,0, 0.9); /* Черный с/непрозрачностью */
overflow-x: hidden; /* Отключить горизонтальную прокрутку */
transition: 0.5s; /* 0.5 секундный эффект перехода, чтобы сдвинуть внутрь или сдвинуть вниз (высота или ширина, в зависимости от раскрытия) */
}
/* Разместите контент внутри оверлея */
.overlay-content {
position: relative;
top: 25%; /* 25% сверху */
width: 100%; /* 100% в ширину */
text-align: center; /*
Центрирование текста/ссылок */
margin-top: 30px; /* Верхнее поле 30px, чтобы избежать конфликта с кнопкой закрытия на небольших экранах */
}
/* Ссылки навигации внутри оверлея */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Отображать блок вместо встроенного */
transition: 0.3s; /* Эффекты перехода при наведении (цвет) */
}
/* Когда вы наводите указатель мыши на ссылки навигации, меняется их цвет */
.overlay
a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Поместите кнопку закрытия (верхний правый угол) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Когда высота экрана меньше 450 пикселей, измените размер шрифта ссылок и снова поместите кнопку закрытия, чтобы они не перекрывались */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
Шаг 3) Добавить JavaScript:
Пример ниже скользит в меню навигации наложения слева направо (ширина от 0 до 100%), когда оно срабатывает:
Выскальзывание со стороны
/* Открывается при нажатии на элемент span */
function openNav() {
document.getElementById("myNav").style.width
= "100%";
}
/* Закрывается при нажатии на символ "x" внутри оверлея */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
Попробуйте сами »
Пример ниже скользит в меню навигации оверлея сверху вниз (высота от 0 до 100%).
Примечание: Обратите внимание, что в этом примере CSS немного отличается от приведенного выше (высота по умолчанию теперь равна 0, ширина равна 100%, а overflow-y скрыт (отключите вертикальную прокрутку, за исключением маленьких экранов)):
Скольжение сверху вниз
/* Открыть */
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
/* Закрыть */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
Попробуйте сами »
В этом примере открывается меню навигации без анимации:
Открыть меню без анимации
/* Открыть */
function openNav() {
document.getElementById("myNav").style.display = "block";
}
/* Закрыть */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
Попробуйте сами »
Совет: Перейдите в учебник CSS Навбар на нашем сайте W3Schools на русском, чтобы узнать больше о панелях навигации.
