Nhấp chuột hoạt động css

Bài viết này là một phần của bài viết [JavaScript] Bài 13 - Event & Listener trong Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên

Trong bài viết này, chúng tôi sẽ cùng xây dựng một thanh điều hướng phụ đơn giản thường được đặt ở bên cạnh khối hiển thị nội dung chính của trang web. Bên cạnh đó, chúng ta sẽ thử bổ sung một tính năng đơn giản giúp người dùng lọc nhanh danh sách các liên kết bằng cách nhập từ khóa vào một ô nhập liệu ở phần đầu của thanh điều hướng

Xem kết quả dự kiến

1. Chuẩn bị mã HTML

Vẫn như bình thường, chúng ta sẽ khởi động với một khuôn mẫu HTML cơ bản chưa có nội dung.

doctype html>


   
   
   
   
   Sidenav w/ Filter
   
   
   


   
   
   

Trước hết chúng ta cần dàn bố cục chính của trang web để có thể xác định được vị trí mà thanh điều hướng phụ

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

8 của chúng ta sẽ được đặt trên trang. Ở đây để tiết kiệm thời gian tiết kiệm điện cho nội dung chính cần quan tâm là khối

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

8 nên chúng ta sẽ chọn một bố cục đơn giản với -

• Một thanh điều hướng chính

     /* Templating */
  
  body {
     /* --- aligning */
     display: grid;
     grid-template:
        "topnav  topnav "
        "sidenav main   "
        "footer  footer "
        / 300px  1fr;
  }
  
  .topnav {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     width: 100%;
     height: 54px;
     /* --- positioning */
     grid-area: topnav;
  }
  
  .sidenav {
     /* --- coloring */
     background: white;
     border-right: 2px solid lightgray;
     /* --- positioning */
     grid-area: sidenav;
  }
  
  .main {
     /* --- coloring */
     background: white;
     /* --- positioning */
     grid-area: main;
  }
  
  .footer {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     height: 450px;
     /* --- positioning */
     grid-area: footer;
  }
  

  0
• Một khối hiển thị nội dung chính

     /* Templating */
  
  body {
     /* --- aligning */
     display: grid;
     grid-template:
        "topnav  topnav "
        "sidenav main   "
        "footer  footer "
        / 300px  1fr;
  }
  
  .topnav {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     width: 100%;
     height: 54px;
     /* --- positioning */
     grid-area: topnav;
  }
  
  .sidenav {
     /* --- coloring */
     background: white;
     border-right: 2px solid lightgray;
     /* --- positioning */
     grid-area: sidenav;
  }
  
  .main {
     /* --- coloring */
     background: white;
     /* --- positioning */
     grid-area: main;
  }
  
  .footer {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     height: 450px;
     /* --- positioning */
     grid-area: footer;
  }
  

  1
• Sau đó tới thanh điều hướng

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  8
• Và cuối cùng là phần chân trang web

     /* Templating */
  
  body {
     /* --- aligning */
     display: grid;
     grid-template:
        "topnav  topnav "
        "sidenav main   "
        "footer  footer "
        / 300px  1fr;
  }
  
  .topnav {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     width: 100%;
     height: 54px;
     /* --- positioning */
     grid-area: topnav;
  }
  
  .sidenav {
     /* --- coloring */
     background: white;
     border-right: 2px solid lightgray;
     /* --- positioning */
     grid-area: sidenav;
  }
  
  .main {
     /* --- coloring */
     background: white;
     /* --- positioning */
     grid-area: main;
  }
  
  .footer {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     height: 450px;
     /* --- positioning */
     grid-area: footer;
  }
  

  3

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

Cụ thể hơn về khối

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

4, chúng ta có các thành phần chính là -

• Một

     /* Templating */
  
  body {
     /* --- aligning */
     display: grid;
     grid-template:
        "topnav  topnav "
        "sidenav main   "
        "footer  footer "
        / 300px  1fr;
  }
  
  .topnav {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     width: 100%;
     height: 54px;
     /* --- positioning */
     grid-area: topnav;
  }
  
  .sidenav {
     /* --- coloring */
     background: white;
     border-right: 2px solid lightgray;
     /* --- positioning */
     grid-area: sidenav;
  }
  
  .main {
     /* --- coloring */
     background: white;
     /* --- positioning */
     grid-area: main;
  }
  
  .footer {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     height: 450px;
     /* --- positioning */
     grid-area: footer;
  }
  

  5 dữ liệu

     /* Templating */
  
  body {
     /* --- aligning */
     display: grid;
     grid-template:
        "topnav  topnav "
        "sidenav main   "
        "footer  footer "
        / 300px  1fr;
  }
  
  .topnav {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     width: 100%;
     height: 54px;
     /* --- positioning */
     grid-area: topnav;
  }
  
  .sidenav {
     /* --- coloring */
     background: white;
     border-right: 2px solid lightgray;
     /* --- positioning */
     grid-area: sidenav;
  }
  
  .main {
     /* --- coloring */
     background: white;
     /* --- positioning */
     grid-area: main;
  }
  
  .footer {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     height: 450px;
     /* --- positioning */
     grid-area: footer;
  }
  

  6 được sử dụng để người dùng nhập từ khóa và lọc nhanh các kết nối liên quan
• Các danh sách liên kết

     /* Templating */
  
  body {
     /* --- aligning */
     display: grid;
     grid-template:
        "topnav  topnav "
        "sidenav main   "
        "footer  footer "
        / 300px  1fr;
  }
  
  .topnav {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     width: 100%;
     height: 54px;
     /* --- positioning */
     grid-area: topnav;
  }
  
  .sidenav {
     /* --- coloring */
     background: white;
     border-right: 2px solid lightgray;
     /* --- positioning */
     grid-area: sidenav;
  }
  
  .main {
     /* --- coloring */
     background: white;
     /* --- positioning */
     grid-area: main;
  }
  
  .footer {
     /* --- coloring */
     color: white;
     background: black;
     /* --- sizing */
     height: 450px;
     /* --- positioning */
     grid-area: footer;
  }
  

  7 tương ứng với các mục nội dung của trang web

Và để thiết lập khoảng cách giữa các thành phần với các khung

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

4 được đồng đều thì chúng ta sẽ đặt tất cả vào một chung tiện ích chung

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

9

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

4

Tại đây

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

5 nhập từ khóa

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

6 của chúng ta sẽ bao gồm 2 thành phần là một ô dữ liệu

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72 và một nút nhấn

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73 để xóa nội dung đã nhập. Tuy nhiên, chúng tôi không sử dụng thẻ

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

74 mà sử dụng

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

75 vì không cần chuyển yêu cầu của người dùng tới máy chủ web nào cả.

Tiếp theo là các danh sách liên kết

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

7 với mỗi danh sách sẽ bao gồm một tiêu đề của hạng mục nội dung

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

77 và các liên kết tới các bài viết

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

78. Ở đây chúng ta sử dụng thuộc tính

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

79 để gắn các từ khóa của bài viết với các liên kết. Và khi người dùng nhập từ khóa để tìm kiếm, nếu từ khóa vừa nhập xuất hiện trong tiêu đề của liên kết hoặc trong

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

50 thì chúng ta sẽ để liên kết hiển thị bình thường. Trong trường hợp còn lại thì các liên kết sẽ được ẩn đi để rút ngắn danh sách và người dùng có thể lọc được bài viết liên quan

Bạn có thể tạo ra nhiều danh sách liên kết để có thể dễ dàng chạy thử tính năng của bộ lọc. Dưới đây là các tập tin liên kết mà bạn có thể sao chép/dán để sử dụng

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

6

2. Viết code CSS cho. bên lề

Ở đây chúng ta vẫn sẽ xuất với thao tác

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

51 căn bản

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

2. 1 Chỉnh sửa bố cục chính của trang

Để nhanh chóng điều chỉnh bố cục chính của trang web và định hình khu vực sử dụng khối điều hướng phụ

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

4 thì chúng ta có thể sử dụng nhóm thuộc tính

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

53. Từ kết quả dự kiến, chúng ta sẽ đặt màu nền tối cho thanh điều hướng

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

54 và khối chân trang web

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

55;

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

7

2. 2 Filter. sidenav-bộ lọc

Để bắt đầu viết code cho khối

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

4, chúng ta sẽ tạo

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

83 cơ bản cho

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

9 sử dụng chung trong các thành phần của trang web. Vùng chứa này thường được sử dụng cho tất cả các thành phần của trang web để tạo khoảng

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

83 cơ bản nhằm phân tách nội dung từ 2 cạnh của vùng chứa cha ở bên ngoài

Trong trường hợp khác, nếu vùng chứa có chiều rộng

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

86, ví dụ như phần hiển thị nội dung bài viết

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

57, thì vùng chứa này còn được sử dụng để giới hạn độ rộng của dòng chữ trong khoảng

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

88, giúp đảm bảo chắc chắn người dùng sẽ có

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

5

First header is a filter

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

6. Các nhiệm vụ cần thực hiện của chúng ta về cơ bản vẫn chia làm 2 phần như trên

• Thiết lập màu sắc, kích thước và điều chỉnh vị trí của các phần tử
• Thiết lập phông chữ cho nội dung và canh chỉnh vị trí của nội dung

Phần đầu tiên của công việc thì chúng ta cần đảm bảo độ rộng của ô nhập liệu

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72 và nút nhấn

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73 là

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

82 của container cha

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

9. Do node nhấn

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73 có nội dung rất ngắn, chúng ta sẽ chỉ định chiều rộng và chiều cao cố định. Sau đó sử dụng hàm

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

85 để thiết lập độ rộng tương quan cho ô nhập liệu

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73

Tuy nhiên, còn một vấn đề nhỏ nữa, đó là 2 thành phần này đều là các khối

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

87 và với kích thước phông chữ mặc định, trình duyệt web sẽ đặt 2 khối này cách nhau một khoảng nhỏ khoảng

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

88. Do đó chúng ta cần giảm khoảng cách này đi bằng cách sử dụng thuộc tính

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

89 cho

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

6 hoặc

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

01

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

8

Sau khi đã có một khối

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

6 lấp đầy chiều rộng của vùng chứa bên ngoài, chúng ta cần thực hiện thiết lập phong cách hiển thị và canh chỉnh cho nội dung chữ bên trong ô nhập liệu và nhấn nút

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

8

Ngoài ra, chúng ta còn lưu ý quan trọng khác đó là cần phải tạo thêm 1 thẻ trạng thái

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

07 để biểu thị cho trạng thái liên kết được ẩn đi khi không phù hợp với từ khóa người dùng nhập vào bộ lọc

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

0

3. Viết mã JavaScript cho. sidenav-bộ lọc

Trước khi bắt tay vào viết mã, chúng ta cần lưu lại một vài yếu tố chính của tính năng này.

• Đối với ô nhập liệu

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  72, khi người dùng nhấn một phím nào đó để nhập một chữ cái, chúng ta cần thực hiện bộ lọc danh sách ban đầu để ẩn đi những liên kết không phù hợp. Và mỗi khi người dùng xóa một chữ cái, chúng ta cũng cần thực hiện thao tác lọc danh sách ban đầu để hiển thị lại những liên kết phù hợp với từ khóa
• Đối với nút nhấn

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  73 dùng để xóa nội dung trong ô nhập liệu, chúng ta chỉ cần hiển thị lại đầy đủ tất cả các danh sách. Hoặc một cách khác là chúng ta cứ xóa nội dung trong ô nhập dữ liệu sau đó kích hoạt một sự kiện nhấn phím cho

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  72 để giả định là người dùng thao tác nhấn phím xóa ký tự. Như vậy cũng hợp lý phải không?

Việc viết mã xử lý nút nhấn

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73 thì chắc chắn là không có gì để chúng ta phải mờ mắt quá nhiều ở thời điểm hiện tại. Tuy nhiên, hãy nói thêm một chút về đối tượng chính ở đây là ô nhập liệu

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72

Giả sử chúng ta đang ở thời điểm người dùng đã nhập một vài từ khóa nào đó và đã có khoảng 1/2 số liên kết không phù hợp được ẩn đi. Bây giờ khi người dùng nhấn thêm một phím nào đó để xóa hoặc thêm một ký tự, thì mã của chúng ta sẽ cần thực hiện những công việc sau -

• Truy vấn tất cả các liên kết

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  78 - bao gồm cả những liên kết đang hiện và đang ẩn
• Lọc ra các liên kết phù hợp với đoạn từ khóa đang có trong ô nhập liệu

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  73
• Tiếp tục lọc ra các liên kết đang bị ẩn trong kết quả phù hợp của tập tin
• Sau đó xóa lớp

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  07 để các liên kết này được hiển thị lại

Một cách xử lý khác là chúng ta sẽ làm việc với 2 nhóm liên kết

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

18 và

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

19 riêng biệt -

• Truy vấn 2 nhóm liên kết

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  18 và

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  19 lưu vào 2 biến khác nhau
• Ở nhóm liên kết đang ẩn, lọc ra những liên kết phù hợp với đoạn từ khóa
• Xoá lớp

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  07 để cho các liên kết phù hợp quay trở lại
• Ở nhóm liên kết đang hiện hành, lọc ra những liên kết

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  23 phù hợp với đoạn từ khóa
• Thêm lớp

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  07 để ẩn các liên kết

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  23 phù hợp đi

Cho dù là phương án xử lý nào đi chăng nữa thì chúng ta vẫn sẽ phải làm việc với đầy đủ danh sách liên kết ban đầu. Và thực hiện tới 2 lần lặp để kiểm tra tính phù hợp của các liên kết với đoạn từ khóa trong

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72. Nguyên do là cả 2 cách xử lý vấn đề này đều xuất phát từ thao tác khách quan tác động lên trạng thái của tập hợp các liên kết

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

78

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

3

Bây giờ chúng ta hãy thử nhìn vấn đề theo một cách khác. Giả sử chúng ta có thể chia khối công việc cần làm để các liên kết tự thực hiện chứ không phải tác động chỉnh sửa có thể xen vào từ đâu đó khác. Khi có một sự kiện người dùng được phát động, mỗi liên kết sẽ tự kiểm tra xem nội dung của mình có phù hợp với đoạn từ khóa hay không. Và sau đó tự điều chỉnh trạng thái

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

28 một cách chủ quan. Như vậy sẽ thật tuyệt.

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

4

Nếu có thể viết mã phát triển logic chủ quan cho các liên kết như vừa nói, chúng ta sẽ không cần phải sàng lọc các kết quả tập tin nhiều lần để phân loại các liên kết. Lối suy nghĩ duy nhất này có vẻ như không yêu cầu khả năng phỏng đoán kết quả lọc các danh sách và dường như sẽ có ít khả năng để chương trình xảy ra lỗi hơn. Vì vậy chúng ta sẽ thử viết code xử lý theo hướng tư duy vừa thảo luận nhé -

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

29

3. 1 Tổng quan các hàm xử lý chính

Đầu tiên chúng ta sẽ chuẩn bị các phần khung của chương trình -

• Các liên kết

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  78 sẽ được gắn hàm xử lý sự kiện

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  31 để tự kiểm tra từ khóa và cập nhật trạng thái hiển thị mỗi khi nhận được thông báo

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  32
• Dữ liệu đầu vào

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  72 sẽ được gắn hàm xử lý

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  34 để thông báo sự kiện cho các liên kết là

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  32
• Nút nhấn

     /* Reset CSS */
  
  * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }
  

  73 sẽ được gắn hàm xử lý

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  37 để khi nhận được nút nhấn, hãy xóa nội dung trong ô nhập liệu. Sau đó gắn thêm hàm xử lý

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  34 để thông báo sự kiện cho các liên kết là

  T o p - N a v i g a t i o n - B a r
  M a i n - C o n t e n t
  
     
  
  F o o t e r
  

  32

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

5

Như vậy là chúng ta đã có phần khung chương trình với 3 hàm xử lý sự kiện chính được gắn vào các phần tử tương ứng. Ở đoạn gắn hàm xử lý sự kiện cho các liên kết, chúng ta đã tạo ra một tên sự kiện mới là

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

40. Và hàm xử lý sự kiện của các liên kết sẽ được kích hoạt nếu như chúng ta gửi tới các liên kết một đối tượng

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

41

Tức là các sự kiện click chuột

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

42 do trình duyệt tạo ra tại nút nhấn

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73, và các sự kiện nhấn và phím tắt

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

44 tại vị trí của ô nhập cổng

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72, sẽ là mã của phiên giao dịch của chúng ta thành một kiểu duy nhất. .

3. 2 Viết mã cho các hàm xử lý sự kiện

Bây giờ chúng ta sẽ viết mã chi tiết cho các hàm xử lý sự kiện. Có thể là chúng ta nên xuất phát từ phiên dịch các sự kiện chức năng sang

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

40 đi.

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

6

Rồi. xong. Ở đây trong phần thân hàm, chúng ta không quan tâm đến sự kiện

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

49 nhận được là kiểu gì,

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

50 hay

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

51. Thay vào đó chỉ đơn giản là bất kỳ khi nào hàm xử lý này được kích hoạt ở vị trí ô nhập dữ liệu

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72 hoặc nút nhấn

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

73 thì chúng ta hiểu rằng

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

54. Mặc dù nội dung đó có thể thay đổi hoặc không nhưng công việc của hàm xử lý này chỉ đơn giản là thông báo cho

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

55 rằng

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

40

Kế hoạch sẽ là hàm

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

37 do nhiệm vụ này thực hiện rất đơn giản. Ở đây chúng ta sẽ chỉ xóa nội dung của ô nhập liệu chứ không thực hiện bất kỳ thao tác nào khác. Công việc thông báo cho các liên kết là nhiệm vụ của hàm

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

34.

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

7

Cuối cùng là hàm xử lý các sự kiện quan trọng nhất

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

31 - Mỗi liên kết sẽ tự động truy cập vào

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

72 để xem chuỗi từ khóa trong ô nhập liệu và kiểm tra xem mình có phù hợp không;

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

8

Ở cấp độ của hàm

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

61, chúng ta vẫn thường xử lý việc phân tích sự kiện và ra quyết định về công việc cần thực hiện tiếp theo. Sau đó công việc cần thực hiện bằng cách thao tác trên các

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

62 nên được lý giải chi tiết ở các hàm tác vụ phụ

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

63 và các hàm tiện ích

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

64 xử lý. Và ở đây chúng ta cũng sẽ thực hiện như vậy với một khung xử lý chính và ủy thác 2 thao tác

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

28 cho 2 hàm

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

66

3. 3 Viết mã cho các chức năng xử lý nhiệm vụ phụ

Tuy nhiên, tại vị trí công việc được ủy thác xuống 2 hàm

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

66, chúng ta không biết liên kết đó

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

18 hay

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

19;

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

9

3. 4 Viết các hàm tiện ích hỗ trợ

Cuối cùng là viết các hàm hỗ trợ đã được gọi nhưng chưa có mã phát triển.

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

40

4. Total end code of a sidenav đơn giản

Xin chúc mừng. Bạn đã hoàn thành công việc xây dựng một thanh điều hướng phụ đơn giản có hỗ trợ tính năng lọc nhanh các danh sách liên kết. Để hoàn thiện hơn nữa, bạn có thể xử lý thêm mã

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

70 cho

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

4. Công việc này đã quá quen thuộc từ khi chúng ta cùng xây dựng một thanh điều hướng

T o p - N a v i g a t i o n - B a r
M a i n - C o n t e n t

   

F o o t e r

70 cách đây rất lâu, khi mà chúng ta vẫn chưa biết đến JavaScript.

Mục đích của chúng ta trong bài viết này là thử phát triển logic xử lý sự kiện theo phương thức hành động chủ quan đứng từ vị trí của các phần tử HTML cần phải thay đổi để đáp ứng với sự kiện. Thay vì xử lý theo phương thức hành động khách quan tác động lên các phần tử HTML cần thay đổi từ bên ngoài