Cách tạo Menu Accordion bằng HTML, CSS và JavaScript - KIEMLUA24H
   

Cách tạo Menu Accordion bằng HTML, CSS và JavaScript

Cách tạo Menu Accordion bằng HTML, CSS và JavaScript

 

Bạn có thể sử dụng HTML, CSS và JavaScript để tạo các phần tử web động và phong cách. Và một yếu tố hữu ích mà bạn có thể xây dựng là một menu đàn accordion.

Menu Accordion mở rộng và thu gọn khi người dùng nhấp vào một 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ủ đề và 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 tạo một menu đàn accordion đơn giản trông giống như sau:

ezgif.com-gif-maker.gif

Trong thiết kế giao diện người dùng, menu 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 nhã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ị một câu trả lời tương ứng.

Cách tạo Menu Accordion bằng HTML, CSS và JS

Chúng ta sẽ bắt đầu bằng cách xác định mã đánh dấu HTML. Nếu bạn đang sử dụng 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 ! tiếp theo là enter. Đ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 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 trang 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à accordion. Bên trong thư mục, chúng tôi sẽ tạo ba tệp: index.html, styles.css, và app.js. Chúng tôi cũng sẽ liên kết tất cả các tệp vào đá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, một 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>
Đánh dấu cho Menu Accordion

Nếu không có CSS, trang của chúng tôi sẽ trông hoàn toàn trống rỗng, như thế này:

htmlook.png
Menu accordion trông như thế nào khi không có CSS

Cách tạo kiểu cho Accordion bằng CSS

Tất nhiên, chúng tôi muốn menu đàn accordion của mình trông đẹp. Đã đến lúc đưa một số CSS vào sử dụng. Tôi đã thêm một số nhận xét trong mã để giải thích những gì mỗi phần đang làm:

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&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 này được áp dụng, đây là cách đàn accordion của chúng ta sẽ trông như thế nào bây giờ:

withcss1.png
Các kiểu được thêm vào menu accordion

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 (giữ 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:

withcss2.png

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::after bộ chọn được sử dụng để đặt nội dung trước hoặc sau một phần tử được 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 bù đắp topright để đặt nó ở góc ngoài cùng 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.

Cách tạo Menu Accordion bằng HTML, CSS và JavaScript
Nội dung của menu Accordion hiện đã bị ẩn

Thêm JavaScript vào 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à nhập 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 lại 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 đổi 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 HTML, mở DevTools của bạn (nhấp vào F12) và kiểm tra nó bên trong tab phần tử.

Bạn nên tìm active lớp đã đăng ký trên đó:

active.png
lớp hoạt động được bật trên mục menu đầu tiên

Nhấp vào phần tử một lần nữa sẽ xóa active lớp từ nó.

Cách hoàn thành ứng dụng

Có một điều 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 một 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 một 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;
}

Cuối cùng thì đây là cách ứng dụng của chúng tôi trông và hoạt động:

ezgif.com-gif-maker.gif
Cái nhìn cuối cùng

Kết thúc

Vì vậy, trong hướng dẫn này, chúng tôi đã xây dựng một menu accordion bằng HTML, CSS và JavaScript.

Cảm ơn đã theo dõi cùng. Tôi hy vọng bạn đã học được điều gì đó hữu ích từ hướng dẫn này.

Chia sẻ ngay
  
 
 
   

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Vui lòng bật JavaScript!
Nếu không bật trang không thể hoạt động bình thường![ ? ]