Đăng nhập Đăng ký
Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn
Tự kiểm tra bằng các câu hỏi trắc nghiệm
Ghi lại kiến thức của bạn
Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn
Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng
Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)
Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi
Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình
Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn
Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!
Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces
Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.
Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript
Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi
Đọc xu hướng dài hạn của việc sử dụng trình duyệt
Kiểm tra tốc độ đánh máy của bạn
Tìm hiểu dịch vụ web của Amazon
Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau.
Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông
Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn
Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng
Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo
Về bán hàng: [email protected]
Về lỗi: [email protected]
Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục
Tìm hiểu cách tạo menu điều hướng bên có hình động, có thể đóng.
<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>
/* 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; /* Stay at the top */
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;}
}
Ví dụ bên dưới trượt trong điều hướng bên và làm cho nó rộng 250px:
/* Set
the width of the side navigation to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
}
/*
Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Hãy tự mình thử »Ví dụ bên dưới trượt trong điều hướng bên và đẩy nội dung trang sang phải (giá trị dùng để đặt độ rộng của sidenav cũng được dùng để đặt lề trái của "nội dung trang"):
/* 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";
}
Hãy tự mình thử »Ví dụ bên dưới cũng trượt trong điều hướng bên và đẩy nội dung trang sang phải, chỉ lần này, chúng tôi thêm màu nền đen với độ mờ 40% cho phần tử nội dung, để "làm nổi bật" điều hướng bên:
/* 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";
}
Hãy tự mình thử »Ví dụ bên dưới trượt trong điều hướng bên từ bên trái và bao phủ toàn bộ trang (chiều rộng 100%):
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.width
= "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Hãy tự mình thử »Ví dụ bên dưới mở và đóng menu điều hướng bên không có hình động:
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.display
= "block";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
Hãy tự mình thử »Ví dụ dưới đây cho thấy cách tạo menu điều hướng bên phải:
Ví dụ bên dưới cho thấy cách tạo menu điều hướng bên luôn hiển thị (cố định):
/* The sidenav */
.sidenav {
height: 100%;
width:
200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Page content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn về Thanh điều hướng CSS của chúng tôi để tìm hiểu thêm về các thanh điều hướng.
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? 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
Nếu bạn muốn sử dụng dịch vụ của Example.com.vn với tư cách là một tổ chức giáo dục, nhóm hoặc doanh nghiệp, hãy gửi email cho chúng tôi:
[email được bảo vệ]
Nếu bạn muốn báo cáo lỗi hoặc nếu bạn muốn đưa ra đề xuất, hãy gửi email cho chúng tôi:
[email được bảo vệ]