Bạn có thể sử dụng HTML, CSS và JavaScript để tạo các phần tử web phong cách và năng động. Và một yếu tố hữu ích mà bạn có thể xây dựng là menu đàn accordion.
Menu Accordion mở rộng và thu gọn khi người dùng nhấp vào nút. Đó là một cách tuyệt vời để không phải hiển thị trước tất cả thông tin về một chủ đề mà thay vào đó cung cấp cho người dùng tùy chọn chỉ hiển thị những gì họ cần.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách xây dựng một menu đàn accordion đơn giản giống như sau:
Trong thiết kế giao diện người dùng, menu đàn accordion là một danh sách các phần thông tin khác nhau được xếp chồng lên nhau theo chiều dọc. Đối với mỗi danh sách, có một tiêu đề được gắn nhãn trỏ đến nội dung tương ứng. Nội dung của mỗi danh sách được ẩn theo mặc định. Nhấp vào một nhãn cụ thể sẽ mở rộng nội dung của nó.
Một trường hợp sử dụng rất phổ biến cho đàn accordion là giữ một danh sách các câu hỏi thường gặp. Nhấp vào bất kỳ câu hỏi nào sẽ chuyển đổi/hiển thị câu trả lời tương ứng.
Cách xây dựng Menu Accordion bằng HTML, CSS và JS
Chúng ta sẽ bắt đầu bằng cách xác định đánh dấu HTML. Nếu bạn đang sử dụng một IDE như VS Code và bạn đã cài đặt emmet, hãy tạo một IDE mới index.html tập tin và loại ! theo sau là nhập. Điều này sẽ tạo mã soạn sẵn HTML cho dự án của bạn.
Ngoài ra, bạn có thể sao chép đoạn mã sau vào index.htmlhoặc lấy mã cho dự án này từ Codepen.
<!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>Document</title>
<link rel="stylesheet" href="https://www.freecodecamp.org/news/build-an-accordion-menu-using-html-css-and-javascript/styles.css">
</head>
<body>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
Cấu trúc thư mục rất đơn giản. Chúng tôi sẽ tạo một thư mục có tên là đàn accordion. Trong thư mục, chúng tôi sẽ tạo ba tệp: index.html, styles.cssvà app.js. Chúng tôi cũng sẽ liên kết tất cả các tệp vào phần đánh dấu HTML của chúng tôi như bạn có thể thấy ở trên.
Đánh dấu HTML cho Accordion
Đối với mỗi danh sách trong menu, chúng tôi sẽ có hai divs – một cho nhãn, cái còn lại cho nội dung.
<body>
<div class="accordion-body">
<div class="accordion">
<h1>Frequently Asked Questions</h1>
<hr>
<div class="container">
<div class="label">What is HTML</div>
<div class="content">Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document. HTML is very simple to learn and use.</div>
</div>
<hr>
<div class="container">
<div class="label">What is CSS?</div>
<div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. CSS is popularly called the design language of the web.
</div>
</div>
<hr>
<div class="container">
<div class="label">What is JavaScript?</div>
<div class="content">JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third of the web trio.</div>
</div>
<hr>
<div class="container">
<div class="label">What is React?</div>
<div class="content">React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. </div>
</div>
<hr>
<div class="container">
<div class="label">What is PHP?</div>
<div class="content">PHP is a server-side and general-purpose scripting language that is especially suited for web development. PHP originally stood for Personal Home Page. However, now, it stands for Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an acronym.</div>
</div>
<hr>
<div class="container">
<div class="label">What is Node JS?</div>
<div class="content">Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm</div>
</div>
<hr>
</div>
</div>
<script src="https://www.freecodecamp.org/news/build-an-accordion-menu-using-html-css-and-javascript/index.js" type="text/javascript"></script>
</body>
Nếu không có CSS, trang của chúng ta sẽ trông hoàn toàn trống rỗng, như thế này:
Cách tạo kiểu đàn accordion bằng CSS
Tất nhiên, chúng tôi muốn menu đàn accordion của mình trông đẹp mắt. Đã đến lúc đưa một số CSS vào hoạt động. Tôi đã thêm một số nhận xét vào mã để giải thích chức năng của từng phần:
@import url('https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap');
/* Sets the background color of the body to blue. Sets font to Rubik */
body {
background-color: #0A2344;
font-family: 'rubik', sans-serif;
}
/* Aligns the heading text to the center. */
h1 {
text-align: center;
}
/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */
.accordion {
width: 800px;
margin: 90px auto;
color: black;
background-color: white;
padding: 45px 45px;
}
Với tất cả các phong cách được áp dụng, đây là giao diện đàn accordion của chúng ta bây giờ:
Bây giờ chúng ta cần bắt đầu thực hiện một số công việc bên trong để thiết lập chức năng của nó. Đầu tiên, chúng tôi đặt thuộc tính vị trí cho từng vùng chứa (chứa cả nhãn và nội dung) thành tương đối.
Điều đó có nghĩa là bây giờ chúng ta có thể định vị các con của nó so với nó.
.accordion .container {
position: relative;
margin: 10px 10px;
}
/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */
.accordion .label {
position: relative;
padding: 10px 0;
font-size: 30px;
color: black;
cursor: pointer;
}
Bây giờ bạn có thể nhận thấy sự khác biệt trong hình ảnh bên dưới:
Hành động tiếp theo sẽ là thêm một dấu ‘+’ nhỏ vào cuối mỗi danh sách. Điều này sẽ cho người dùng biết rằng họ có thể mở rộng phần này để tìm hiểu/xem thêm.
Chúng tôi sẽ đạt được điều này bằng cách sử dụng ::before bộ chọn. Các ::before và ::after bộ chọn được sử dụng để đặt nội dung trước hoặc sau một phần tử đã chỉ định.
Ở đây, chúng tôi đang chèn ‘+’ trước nhãn. Nhưng chúng tôi sẽ sử dụng các thuộc tính offset top và right để đặt nó ở góc xa bên phải.
/* Positions the plus sign 5px from the right. Centers it using the transform property. */
.accordion .label::before {
content: '+';
color: black;
position: absolute;
top: 50%;
right: -5px;
font-size: 30px;
transform: translateY(-50%);
}
/* Hides the content (height: 0), decreases font size, justifies text and adds transition */
.accordion .content {
position: relative;
background: white;
height: 0;
font-size: 20px;
text-align: justify;
width: 780px;
overflow: hidden;
transition: 0.5s;
}
/* Adds a horizontal line between the contents */
.accordion hr {
width: 100;
margin-left: 0;
border: 1px solid grey;
}
Điều này sẽ làm cho mọi thứ tốt hơn. Cũng lưu ý rằng nội dung cho mỗi danh sách hiện đã bị ẩn.
Thêm JavaScript vào đàn accordion của chúng tôi
Tại thời điểm này, đàn accordion của chúng tôi khá tĩnh. Để làm cho một vùng chứa hiển thị nội dung khi người dùng nhấp vào nó, chúng tôi sẽ cần đưa vào một số JavaScript.
Điều hướng đến tập lệnh của bạn app.js và gõ vào đoạn mã sau:
const accordion = document.getElementsByClassName('container');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active')
})
}
Tập lệnh này sẽ truy cập tất cả các danh sách của chúng tôi bằng cách classname của container.
Sau đó, chúng tôi sẽ lặp qua danh sách. Đối với mỗi vùng chứa, chúng tôi chỉ muốn đăng ký một trình lắng nghe sự kiện cho nó. Khi nó được nhấp vào, chúng tôi muốn chuyển lớp “hoạt động” trên phần tử đó.
Bây giờ chúng ta sẽ kiểm tra hiệu ứng này. Nhấp vào vùng chứa đầu tiên có nhãn What is HTMLhãy mở DevTools của bạn (nhấp vào F12) và kiểm tra nó bên trong tab thành phần.
Bạn nên tìm active lớp đã đăng ký trên đó:
Nhấp vào phần tử một lần nữa sẽ loại bỏ active lớp từ nó.
Cách hoàn thành ứng dụng
Còn một việc cuối cùng chúng ta cần làm. Chúng ta cần tạo một lớp đang hoạt động trong biểu định kiểu. Chúng tôi sẽ xác định cách chúng tôi muốn đàn accordion của mình trông như thế nào sau khi JavaScript chuyển đổi lớp trên vùng chứa.
/* Unhides the content part when active. Sets the height */
.accordion .container.active .content {
height: 150px;
}
/* Changes from plus sign to negative sign once active */
.accordion .container.active .label::before {
content: '-';
font-size: 30px;
}
Đây là cách ứng dụng của chúng tôi cuối cùng trông và hoạt động:
kết thúc
Vì vậy, trong hướng dẫn này, chúng tôi đã tạo một menu đàn accordion bằng HTML, CSS và JavaScript.
Cảm ơn vì đã theo dõi. Tôi hy vọng bạn đã học được điều gì đó hữu ích từ hướng dẫn này.
Nếu bạn quan tâm đến nội dung như thế này, hãy theo dõi blog của tôi.
Có một tuần tuyệt vời.