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

Thanh điều hướng là một thành phần rất phổ biến trong trang web hiện nay, Thanh điều hướng xuất hiện gần giống như tất cả các trang web theo nhiều kiểu khác nhau để chứa các phần menu chính

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

1 Vậy Animated Side Navigation là gì ?

Điều hướng bên hoạt hình là một định dạng Thanh điều hướng có thể ẩn/hiện thông qua các nút, Điều hướng bên hoạt hình thường được ẩn đi khi tải trang mới và chỉ được hiển thị khi người dùng muốn sử dụng nó

Trong bài viết này mình sẽ hướng dẫn các bạn tạo một phần Điều hướng bên hoạt hình đơn giản

Ok chúng ta cùng tiến hành nhé

Bài viết này đã được đăng tại [free tuts. bọc lưới]

1. Build interface

Bước đầu tiên là xây dựng phần giao diện, các bạn tạo tệp index.html và đặt đoạn mã HTML dưới đây vào phần thân thẻ

Mã số

	

			×
	  	Trang chủ
	  	Học lập trình online
	  	Thủ thuật
	  	Liên hệ
	
	

		
Freetuts.net hướng dẫn tạo Animated Side Navigation
	  	
Click vào nút Open để mở phần menu ẩn.
	  	☰ open
	

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

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 onclick 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