Cách THỰC HIỆN - Điều hướng lớp phủ toàn màn hình
Tìm hiểu cách tạo menu điều hướng lớp phủ toàn màn hình.
Nhấp vào các nút bên dưới để xem nó hoạt động như thế nào:
Tạo Điều hướng lớp phủ Toàn màn hình
Bước 1) Thêm HTML:
Thí dụ
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<a href="#"
class="closebtn" onclick="closeNav()">×</a>
<!-- Overlay content -->
<div
class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
Bước 2) Thêm CSS:
Thí dụ
/* 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 {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
Bước 3) Thêm JavaScript:
Ví dụ bên dưới trình bày trong menu điều hướng lớp phủ từ trái sang phải (0 đến 100% chiều rộng), khi nó được kích hoạt:
Trượt vào từ một bên
/* 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%";
}
Ví dụ bên dưới trình bày trong menu điều hướng lớp phủ từ trên xuống (0 đến 100% chiều cao).
Lưu ý: Trong ví dụ này, hãy lưu ý rằng CSS hơi khác so với CSS ở trên (chiều cao mặc định hiện là 0, chiều rộng là 100% và tràn-y bị ẩn (tắt cuộn dọc, ngoại trừ màn hình nhỏ)):
Trượt xuống từ trên cùng
/* Open */
function openNav() {
document.getElementById("myNav").style.height
= "100%";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
Ví dụ này mở menu điều hướng mà không có hoạt ảnh:
Mở menu mà không có hoạt ảnh
/* Open */
function openNav() {
document.getElementById("myNav").style.display
= "block";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
Mẹo: Đi tới Hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về các thanh điều hướng.
Bạn đã từng nghe về W3Schools Spaces ? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng