Как сделать overlay css

Как сделать — меню навигации в полноэкранном размере

Подробнее о создании меню навигации в полноэкранном виде.

Нажмите на кнопки ниже, чтобы увидеть, как это работает:

Show (No animation)

Создание навигации по полноэкранному оверлею

Шаг 1) добавить HTML:

Пример

<!— The overlay —>
<div >
<!— Button to close the overlay navigation —>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<!— Use any element to open/show the overlay navigation menu —>
<span onclick="openNav()">open</span>

Step 2) Add CSS:

Пример

/* The Overlay (background) */
.overlay <
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
>

/* Position the content inside the overlay */
.overlay-content <
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
>

/* The navigation links inside the overlay */
.overlay a <
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
>

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus <
color: #f1f1f1;
>

/* Position the close button (top right corner) */
.overlay .closebtn <
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
>

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don’t overlap */
@media screen and (max-height: 450px) <
.overlay a
.overlay .closebtn <
font-size: 40px;
top: 15px;
right: 35px;
>
>

Шаг 3) добавить JavaScript:

Пример ниже слайдов в меню навигации наложения слева направо (от 0 до 100% ширины), когда он запускается:

Скользить со стороны

/* Open when someone clicks on the span element */
function openNav() <
document.getElementById("myNav").style.width = "100%";
>

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() <
document.getElementById("myNav").style.width = "0%";
>

Пример ниже слайдов в меню навигации наложения вниз от верхнего (от 0 до 100% высоты).

Примечание: В этом примере, обратите внимание, что CSS немного отличается от одного выше (по умолчанию высота теперь 0, ширина 100% и переполнения-y скрыт (отключить вертикальной прокрутки, за исключением небольших экранов)):

Сдвиньте вниз от верхнего

/* Open */
function openNav() <
document.getElementById("myNav").style.height = "100%";
>

/* Close */
function closeNav() <
document.getElementById("myNav").style.height = "0%";
>

В этом примере открывается меню навигации без анимации:

Открыть меню без анимации

/* Open */
function openNav() <
document.getElementById("myNav").style.display = "block";
>

/* Close */
function closeNav() <
document.getElementById("myNav").style.display = "none";
>

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

How to Create an Overlay Using CSS

There are many techniques for creating overlays. In this snippet, we’ll show how to create an overlay using CSS properties.

One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property. We give higher z-index to the next <div>, which is opened on the top of our overlay.

Create HTML¶

  • Create two <div> elements with the classes "overlay" and "modal".
  • Create another <div> element and write some text in it.

Add CSS¶

  • Style the "overlay" class by setting the position property to "absolute" and the z-index to "10". Specify the width, height, top and left properties.
  • Style the "modal" class by setting the position to "fixed" and z-index to "11" (1px higher than the overlay layer). Specify the margin-top and margin-left, border-radius, line-height, and other properties.
  • Style the <body> by setting the font, color, min-height properties.
  • Set the position to "relative" for the overlay to extend when you scroll.

So, we’ve created an overlay. Let’s see the outcome!

Example of creating an overlay:¶

We can also create an overlay using the ::before and ::after selectors.

We can have the same styles and considerations used in the previous example by styling the ::before and ::after pseudo-classes on the body.

Как сделать — Сайдбар навигации

Узнайте, как создать анимированное закрываемое боковое навигационное меню на сайте.

Создать анимированную боковую навигацию

Шаг 1) Добавить HTML:

Пример

<!— Используйте любой элемент, чтобы открыть sidenav —>
<span onclick="openNav()">open</span>

<!— Добавьте весь контент страницы внутри этого div, если вы хотите, чтобы боковая навигация выдвигала контент страницы вправо (не используется, если вы хотите, чтобы sidenav находился сверху страницы —>
<div > .
</div>

Шаг 2) Добавить CSS:

Пример

/* Боковое навигационное меню */
.sidenav <
height: 100%; /* 100% Full-height */
width: 0; /* 0 ширина — изменить это с помощью JavaScript */
position: fixed; /* Оставайтесь на месте */
z-index: 1; /* Оставайтесь сверху */
top: 0; /* Оставайтесь наверху */
left: 0;
background-color: #111; /* Фон черный*/
overflow-x: hidden; /* Отключить горизонтальную прокрутку */
padding-top: 60px; /* Поместите контент в 60px сверху */
transition: 0.5s; /* 0.5 второй эффект перехода слайда в боковой навигации */
>

/* Ссылки меню навигации */
.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;
>

/* Положение и стиль кнопки закрытия (верхний правый угол) */
.sidenav .closebtn <
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
>

/* Стиль содержимого страницы — используйте это, если вы хотите сдвинуть содержимое страницы вправо при открытии боковой навигации */
#main <
transition: margin-left .5s;
padding: 20px;
>

/* На экранах меньшего размера, где высота меньше 450px, измените стиль sidenav (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) <
.sidenav
.sidenav a
>

Шаг 3) Добавить JavaScript:

Пример ниже выскальзывает в боковой навигации и делает его шириной 250 пикселей:

Оверлей боковой навигаци. Пример

/* Установите ширину боковой навигации до 250 пикселей */
function openNav() <
document.getElementById("mySidenav").style.width = "250px";
>

/* Установите ширину боковой навигации на 0 */
function closeNav() <
document.getElementById("mySidenav").style.width = "0";
>

Приведенный ниже пример перемещает боковую навигацию и сдвигает содержимое страницы вправо (значение, используемое для установки ширины sidenav, также используется для установки левого поля "страницы из содержимым"):

Боковая навигация выталкивает контент

/* Установите ширину боковой навигации 250 пикселей, и левый край содержимого страницы — 250 пикселей. */
function openNav() <
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
>

/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы — 0. */
function closeNav() <
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
>

Приведенный ниже пример также перемещает боковую навигацию и перемещает содержимое страницы вправо, только на этот раз мы добавляем черный цвет фона с непрозрачностью 40% к элементу body, чтобы "выделить" боковую навигацию:

Боковая навигация выталкивает контент с непрозрачностью

/* Установите ширину боковой навигации 250 пикселей, и левое поле содержимого страницы — 250 пикселей и добавьте черный цвет фона к телу. */
function openNav() <
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
>

/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы — 0, и цвет фона тела — белым. */
function closeNav() <
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
>

Пример ниже скользит в боковой навигации слева и охватывает всю страницу (ширина 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 на русском.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *