Nhấp vào css hoạt hình

Trong phần Thanh điều hướng này, mình sẽ tạo ra một số menu đơn giản được đặt trong các thẻ a

Ngoài ra, mình cũng tạo thêm một thẻ a và một thẻ span đã được gán sự kiện để gán chức năng ẩn Navbar. Chúng ta sẽ viết chức năng cho chúng ở các phần sau

2. Định dạng các thành phần với CSS

Bây giờ ta đã có các thành phần nền rồi, mình tiếp tục sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong kiểu thẻ nhé

Mã CHẠY

body {
	margin: 0px;
}
.container {
	width: 60%;
	margin: auto;
}
h2 {
	text-align: center;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 20%;
    background-color: #333333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

Các đoạn mã CSS ở trên tất cả các bản rất cơ bản. Có 2 điểm mà các bạn cần lưu ý

• Phần điều hướng sẽ mặc định được ẩn đi bởi thuộc tính width: 0;
• Phần chuyển động khi ẩn và thanh điều hướng hiện tại sẽ được quyết định bởi transition: 0.5s; bạn có thể thay đổi thời gian để phù hợp với nhu cầu của mình

Vì vậy, chúng ta đã có phần giao diện có thể thay đổi tùy chọn theo kích thước màn hình rồi, chuyển sang bước cuối cùng nhé

3. Xử lý với Javascript

Ở hai phần trước, chúng ta đã tạo ra một giao diện hiển thị. Tuy nhiên, các nút vẫn chưa được gán chức năng nên trong phần này mình sẽ sử dụng javascript để viết chức năng cho chúng

You set this đoạn script to after the body

Mã CHẠY

	function openNav[] {
	    document.getElementById["mySidenav"].style.width = "250px";
	    document.getElementById["main"].style.marginLeft = "250px";
	}

	function closeNav[] {
	    document.getElementById["mySidenav"].style.width = "0";
	    document.getElementById["main"].style.marginLeft= "0";
	}

Trong phần một, khi tạo các nút thành phần chức năng mình đã lồng thêm sự kiện title cho nó, nên trong phần này chúng ta sẽ viết các hàm lí giải các sự kiện đó

• Hàm openNav[] sẽ hiển thị thanh điều hướng bằng cách đặt chiều dài cho nó, lưu ý mình cũng đặt lại margin-left cho phần nội dung bằng đúng chiều dài của thanh điều hướng để nó không bị thanh điều hướng đảo ngược
• Hàm closeNav[] sẽ ẩn thanh điều hướng bằng cách đặt lại chiều dài của nó và margin-left của phần nội dung bằng 0

It's đơn giản phải không nào, giờ các bạn chạy file index.html để xem kết quả nhé

4. Lời kết

Qua bài viết này, mình đã hướng dẫn các bạn tạo một phần Animated Side Navigation đơn giản với CSS và Javascript, hi vọng nó sẽ giúp các bạn có thêm lựa chọn khi xây dựng trang web. Nếu có gì thắc mắc các bạn hãy quay lại phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts. bọc lưới