Как сделать - меню вне холста
Узнайте, как создать меню вне холста.
Создание меню вне холста
Шаг 1) добавить HTML:
Пример
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
<!-- Add all page content inside this div if you want the side nav to
push page content to the right (not used if you only want the sidenav to
sit on top of the page -->
<div id="main">
...
</div>
Шаг 2) добавить CSS:
Пример
/* The side navigation menu */
.sidenav {
height: 100%; /*
100% Full-height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links,
change their color */
.sidenav a:hover{
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.sidenav .closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */
@media screen and (max-height: 450px) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Шаг 3) добавить JavaScript:
Меню «вне холста»
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
В приведенном ниже примере также слайды в боковой навигации, и толкает содержимое страницы вправо, только на этот раз, мы добавляем черный цвет фона с 40% непрозрачность элемента Body, чтобы "выделить" боковой навигации:
Off-Canvas меню w/непрозрачность
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px and add a black background color to body */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0, and the background color of body to
white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.