HomeLập trìnhJavaScriptCách tạo Menu...

Cách tạo Menu thả xuống bằng CSS và JavaScript


Trong hướng dẫn này, bạn sẽ học cách tạo một menu thả xuống đơn giản với vanilla Javascript, HTML và CSS. Chúng ta sẽ xem qua mã HTML, CSS và Javascript, nhưng chú ý nhiều hơn đến phần lập trình, vì đây là hướng dẫn về JS. Chúng tôi sẽ chỉ sử dụng JS và CSS đơn giản, không có khung hoặc bộ xử lý trước. Ngoại lệ (loại) duy nhất sẽ nhập tệp CSS Font Awesome vì chúng tôi sẽ sử dụng một trong các biểu tượng của nó.

Điều này được nhắm mục tiêu đến các nhà phát triển có hiểu biết trung bình về HTML, CSS và JS. Tôi đã cố gắng làm cho nó rõ ràng nhất có thể, nhưng tôi sẽ không tập trung quá nhiều vào các chi tiết ở đây. Tôi mong bạn hãy tận hưởng.

Ảnh chụp màn hình

Đây là cách kết quả mã trông giống như:

Màn hình lúc đầu:

jrnu6mE

Đã mở danh sách thả xuống:

gszPtRa

Danh sách thả xuống với tùy chọn được chọn:

TKXxZGF

HTML:

Trong phần này, chúng ta sẽ thảo luận về việc triển khai mã HTML cho trang demo. Để bắt đầu, chúng ta hãy xem <head> mã số

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Dropdown Example</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="styles.css">
</head>

Về cơ bản, đây là bản tóm tắt phần đầu của HTML, ngoại trừ phần link các thẻ đang tải hai biểu định kiểu CSS mà chúng ta sẽ sử dụng trong hướng dẫn này: các kiểu Font Awesome và styles.css tệp, nơi chúng tôi sẽ xác định kiểu của trang này.

Đọc thêm  JavaScript forEach() – Mảng JS cho mỗi ví dụ về vòng lặp

Sau đó, có phần còn lại của tệp HTML, phần thân:

<body>
	<div class="dropdown">
		<div class="title pointerCursor">Select an option <i class="fa fa-angle-right"></i></div>
		
		<div class="menu pointerCursor hide">
			<div class="option" id='option1'>Option 1</div>
			<div class="option" id='option2'>Option 2</div>
			<div class="option" id='option3'>Option 3</div>
			<div class="option" id='option4'>Option 4</div>
		</div>

	</div>
	<span id='result'>The result is: </span>
	<script>
	  ...
	</script>
</body>
</html>

Phần này có thể chia làm 3 phần chính:

  • Các .dropdown div, nơi cấu trúc của phần tử thả xuống sẽ được xác định.
  • Các #result phần tử, sẽ chứa tùy chọn đã chọn của người dùng, từ phần tử thả xuống.
  • Kịch bản được viết vào <script> nhãn. Việc triển khai của nó được ẩn ở đây, vì các chi tiết của nó sẽ được giải thích trong phần cuối cùng của hướng dẫn này.

Phần tử thả xuống là một div chứa một titlemenu phần tử. Cái trước chỉ xác định văn bản nào sẽ được trình bày trên thành phần trước khi bất kỳ tùy chọn nào được chọn và cái sau sẽ xác định các tùy chọn mà thành phần có thể chọn.

Các result phần tử ở đó chỉ để cho bạn biết tùy chọn nào hiện đang được chọn.

phong cách:

Dưới đây bạn có thể kiểm tra mã css đầy đủ. Như bạn có thể thấy nó sử dụng CSS3 transitiontransform công trình.

Hãy chú ý đến .dropdown định nghĩa các lớp. Chúng được sử dụng để xác định bố cục cho thành phần vùng chứa thả xuống cũng như các phần tử bên trong của nó, chẳng hạn như .title và nó .option‘S.

body{
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.hide {
    max-height: 0 !important;
}

.dropdown{
	border: 0.1em solid black;
	width: 10em;
	margin-bottom: 1em;
}

.dropdown .title{
	margin: .3em .3em .3em .3em;	
	width: 100%;
}

.dropdown .title .fa-angle-right{
	float: right;
	margin-right: .7em;
	transition: transform .3s;
}

.dropdown .menu{
	transition: max-height .5s ease-out;
	max-height: 20em;
	overflow: hidden;
}

.dropdown .menu .option{
	margin: .3em .3em .3em .3em;
	margin-top: 0.3em;
}

.dropdown .menu .option:hover{
	background: rgba(0,0,0,0.2);
}

.pointerCursor:hover{
	cursor: pointer;
}

.rotate-90{
	transform: rotate(90deg);
}

JavaScript:

Bây giờ chúng ta sẽ xem phần Javascript được triển khai như thế nào. Đầu tiên chúng ta sẽ xem qua các định nghĩa hàm và sau đó là mã lệnh gọi các hàm này để thực hiện các hành động thả xuống.

Đọc thêm  Cách tìm nghịch đảo cộng của mỗi số trong JavaScript [CodeWars Challenge Solved]

Về cơ bản, có 3 hành động diễn ra tùy thuộc vào tương tác của người dùng là gì, khi người nghe của họ được thêm vào các phần tử DOM:

  1. Nhấp vào phần tử thả xuống
  2. Chọn một trong các tùy chọn thả xuống
  3. Thay đổi tùy chọn hiện được chọn

Tôi muốn làm rõ rằng chúng tôi đang sử dụng chức năng mũi tên ( () => {} ) và const từ khóa, đó là các tính năng ES6. Bạn có thể ổn nếu đang sử dụng phiên bản mới nhất của trình duyệt, nhưng hãy ghi nhớ điều đó.

1. Nhấp vào phần tử thả xuống

function toggleClass(elem,className){
	if (elem.className.indexOf(className) !== -1){
		elem.className = elem.className.replace(className,'');
	}
	else{
		elem.className = elem.className.replace(/\s+/g,' ') + 	' ' + className;
	}
	
	return elem;
}

function toggleDisplay(elem){
	const curDisplayStyle = elem.style.display;			
				
	if (curDisplayStyle === 'none' || curDisplayStyle === ''){
		elem.style.display = 'block';
	}
	else{
		elem.style.display = 'none';
	}
}


function toggleMenuDisplay(e){
	const dropdown = e.currentTarget.parentNode;
	const menu = dropdown.querySelector('.menu');
	const icon = dropdown.querySelector('.fa-angle-right');

	toggleClass(menu,'hide');
	toggleClass(icon,'rotate-90');
}

Khi phần tử thả xuống được nhấp vào, nó sẽ mở (nếu nó được đóng) hoặc đóng (nếu nó được mở). Điều này xảy ra bằng cách ràng buộc toggleMenuDisplay đến trình xử lý sự kiện nhấp chuột trên phần tử thả xuống. Chức năng này chuyển đổi hiển thị của nó menu phần tử bằng cách sử dụng toggleDisplaytoggleClass chức năng.

2. Chọn một trong các tùy chọn thả xuống

function handleOptionSelected(e){
	toggleClass(e.target.parentNode, 'hide');			

	const id = e.target.id;
	const newValue = e.target.textContent + ' ';
	const titleElem = document.querySelector('.dropdown .title');
	const icon = document.querySelector('.dropdown .title .fa');


	titleElem.textContent = newValue;
	titleElem.appendChild(icon);
	
	//trigger custom event
	document.querySelector('.dropdown .title').dispatchEvent(new Event('change'));
	//setTimeout is used so transition is properly shown
	setTimeout(() => toggleClass(icon,'rotate-90',0));
}

3. Thay đổi tùy chọn hiện được chọn

function handleTitleChange(e){
	const result = document.getElementById('result');

	result.innerHTML = 'The result is: ' + e.target.textContent;
}

Chức năng handleTitleChange bị ràng buộc vào phong tục change sự kiện trên .title phần tử, để thay đổi #result nội dung phần tử bất cứ khi nào phần tử tiêu đề thay đổi. Việc kích hoạt sự kiện này được thực hiện ở phần trước.

Đọc thêm  Làm tổ cho các vòng lặp trong JavaScript

Mã chính

//get elements
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option');

//bind listeners to these elements
dropdownTitle.addEventListener('click', toggleMenuDisplay);
dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected));
document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

Trong phần chính, chỉ có một số mã đơn giản để lấy các phần tử tùy chọn và tiêu đề của trình đơn thả xuống để liên kết với chúng các sự kiện được thảo luận trong phần trước.

Thử nghiệm

Bạn có thể tìm thấy bản demo và mã đầy đủ của ứng dụng này tại đây.

Thêm thông tin



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status