Nhập từ cần tìm và nhấn Enter

[NƠI ĐẶT QUẢNG CÁO - GỌI NGAY 0911296103]
author photo
Đăng bởi: Thời gian:
Tìm hiểu làm thế nào để tạo ra một hiệu ứng động, closable trình đơn điều hướng bên.

Tạo một Animated Side Navigation
Làm thế nào để làm - Side menu
Bước 1) Thêm HTML:

Ví dụ:
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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>

Bước 2) Thêm CSS:

Ví dụ:
/* 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, .offcanvas a:focus{
    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;}
}

Bước 3) Thêm JavaScript:

Ví dụ dưới đây slide trong thanh điều hướng bên, và làm cho nó 250px rộng:

Lớp phủ sidenav ví dụ
/* 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";
}

Ví dụ dưới đây slide trong thanh điều hướng bên, và đẩy nội dung trang bên phải (giá trị sử dụng để thiết lập chiều rộng của sidenav cũng được sử dụng để thiết lập lề trái của "nội dung trang"):

Sidenav đẩy nội dung
/* 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";
}

Ví dụ dưới đây cũng trượt trong điều hướng bên, và đẩy nội dung trang bên phải, chỉ có thời gian này, chúng tôi thêm một màu nền đen với Opacity 40% để các yếu tố cơ thể, để "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";
}

Ví dụ dưới đây slide trong thanh điều hướng bên trái từ và bao gồm toàn bộ trang (100% chiều rộng):

Sidenav Full-chiều rộng:
/* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

Ví dụ dưới đây sẽ mở ra và đóng menu điều hướng bên không có hình ảnh động:

Sidenav mà không Animation
/* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.display = "none";
}

Mời các bạn viết lời bình cho bài viết!

Nhấp để nhận xét