Tạo danh sách thả xuống trong HTML

Nội dung chính Show

Cách tạo danh sách thả xuống
Cách sử dụng Danh sách thả xuống mới của bạn
Dropdown box cơ bản
Dropdown Menu
Căn chỉnh nội dung thả xuống
Ảnh Dropdown
Thanh điều hướng Dropdown

Nếu bạn đang làm việc với những người khác trên tệp Google Sheets được chia sẻ, đôi khi mọi người có thể nhập dữ liệu không mong muốn hoặc thứ gì đó phá vỡ công thức. Một cách để đảm bảo mọi người nhập dữ liệu bạn muốn là cung cấp dữ liệu đó cho họ trong danh sách xác thực thả xuống.

Cách tạo danh sách thả xuống

Danh sách thả xuống là một cách tuyệt vời để đảm bảo dữ liệu mọi người nhập vào biểu mẫu, ứng dụng hoặc bảng tính của bạn chính xác là những gì bạn đang mong đợi. Nó cũng cung cấp một cách nhanh hơn nhiều để mọi người nhập dữ liệu đó vì họ đang chọn từ danh sách được cấu hình sẵn mà bạn cung cấp.

Điều đầu tiên bạn cần làm là mở tệp Google Sheets của bạn và chọn (các) ô mà bạn muốn sử dụng danh sách thả xuống.

Tiếp theo, hãy mở menu Dữ liệu dữ liệu và chọn lệnh.

Từ danh sách thả xuống Tiêu chí, hãy chọn Danh sách các danh mục Từ một danh sách các phạm vi hoặc Danh mục vật phẩm.

Danh sách từ một phạm vi: Một danh sách các giá trị đã được chọn từ các ô khác trong cùng hoặc một trang tính khác. Ví dụ: nếu bạn muốn sử dụng các giá trị trong các ô B1-B9 trên trang 2, bạn sẽ nhập Tờ2! B1: B9 để dữ liệu chứa trong chúng xuất hiện trong danh sách thả xuống hoặc bằng cách chọn trực tiếp bất kỳ ô nào từ Trang tính của bạn.
Danh sách các mục: Một danh sách các mục dữ liệu được xác định trước. Đây có thể là văn bản hoặc số và bạn sẽ tự nhập từng giá trị, phân tách chúng bằng dấu phẩy (và không có dấu cách). Tùy chọn này không cho phép bạn chèn dữ liệu trực tiếp từ các ô khác.

Tại đây, chúng tôi đang sử dụng tùy chọn Danh sách các mặt hàng trên mạng và cung cấp một số lựa chọn số.

Sau khi bạn đã nhập dữ liệu bạn muốn xuất hiện trong danh sách thả xuống, hãy đảm bảo rằng bạn đã bật tùy chọn Danh sách thả xuống trong Hiển thị di động nếu không các giá trị sẽ không xuất hiện trong các ô đã chọn.

Bạn cũng có thể chọn những gì xảy ra khi ai đó cố gắng nhập một giá trị không có trong danh sách. Tùy chọn Cảnh báo Hiển thị trực tuyến cho phép họ nhập dữ liệu không hợp lệ, nhưng đánh dấu nó vào trang tính (chúng tôi sẽ xem xét cách chỉ trong một chút). Tùy chọn Nhập dữ liệu từ chối vào ngăn không cho họ nhập bất cứ thứ gì không có trong danh sách của bạn.

Và cuối cùng, bạn có thể kích hoạt tùy chọn văn bản trợ giúp xác thực của Show Show để cung cấp cho mọi người một số dấu hiệu về những gì họ có thể chọn trong các ô. Sau khi chọn tùy chọn, nhập bất kỳ hướng dẫn nào bạn muốn.

Hãy tiếp tục và nhấp vào Lưu Lưu khi bạn đã hoàn tất.

Cách sử dụng Danh sách thả xuống mới của bạn

Khi bạn hoàn tất, bất kỳ ai sử dụng trang tính đều có thể nhấp vào mũi tên thả xuống trong các ô đó và chọn một giá trị từ danh sách.

Nếu bạn đã chọn tùy chọn trợ giúp xác thực Hiển thị văn bản, thì văn bản đó sẽ bật lên bất cứ khi nào bất cứ ai chọn một trong các ô được xác thực.

Nếu ai đó nhập một giá trị không khớp với thứ gì đó trong danh sách và bạn đã bật tùy chọn Cảnh báo Hiển thị Cảnh báo, dữ liệu không hợp lệ được đánh dấu trong ô.

Di chuột qua nó cho thấy lý do tại sao nó được đánh dấu.

Nếu thay vào đó, bạn đã chọn tùy chọn Nhập từ chối đầu vào, mọi người sẽ nhận được cảnh báo như thế này khi họ cố gắng nhập bất cứ thứ gì không có trong danh sách của bạn.

Nếu bạn cần xóa hoặc sửa đổi bất kỳ mục nào trong danh sách thả xuống của bạn, hãy quay lại Dữ liệu> Xác thực dữ liệu để chỉnh sửa bất kỳ mục nào từ danh sách bạn đã tạo. Xóa danh sách hoàn toàn dễ dàng như nhấp vào nút Xóa Xóa Xác thực Xác nhận nằm ở phía dưới.

Hiệu ứng Dropdown được sử dụng chủ yếu với các thanh menu điều hướng như một giải pháp không thể thiếu trong thiết kế trang web, đăc biệt là các website có số lượng chỉ mục nhiều, không thể sắp xếp toàn bộ trên giao diện.

Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu các tạo danh sách/menu thả xuống khi di chuột qua một phần tử nhất định bằng CSS.

Tạo một dropdown box xuất hiện khi người dùng di chuyển chuột qua một phần tử.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<div class="dropdown">
<span style="color:#58257b;font-weight:bold;font-size: 20px">Thử di chuột
qua đây!</span>
<div class="dropdown-content">
<p style="color:#58257b;font-weight:bold;">Website Quản trị mạng</p>
</div>
</div>

</body>
</html>

Tạo menu thả xuống cho phép người dùng lựa chọn một tùy chọn từ danh sách. Đây là một giải pháp không thể thiếu trong thiết kế trang web, đăc biệt là các website có số lượng chỉ mục nhiều, không thể sắp xếp toàn bộ trên giao diện.

<!DOCTYPE html>
<html>
<head>
<style>
/* Kiểu nút Dropdown */
.dropbtn {
background-color: #58257b;
color: white;
font-weight: bold;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* Dùng trong <div> để định vị nội dung thả xuống */
.dropdown {
position: relative;
display: inline-block;
}

/ * Nội dung thả xuống (Ẩn theo mặc định) * /
.dropdown-content {
display: none;
position: absolute;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/ * Liên kết bên trong danh sách thả xuống * /
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/ * Thay đổi định dạng của liên kết thả xuống khi di chuột qua * /
.dropdown-content a:hover {
background-color: #58257b;
color: white;
}

/ * Hiển thị menu thả xuống khi di chuột * /
.dropdown:hover .dropdown-content {
display: block;
}

/ * Thay đổi màu nền của nút thả xuống khi nội dung được hiển thị * /
.dropdown:hover .dropbtn {
background-color: #984eca;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Di chuột qua nút phía dưới để hiển thị menu thả xuống.(by: QTM.com)</p>

<div class="dropdown">
<button class="dropbtn">Lập trình</button>
<div class="dropdown-content">
<a href="https://quantrimang.com/hoc-css">CSS và CSS3</a>
<a href="https://quantrimang.com/html">HTML</a>
<a href="https://quantrimang.com/python">Python</a>
</div>
</div>

</body>
</html>

Căn chỉnh nội dung thả xuống

Nếu bạn muốn thanh menu đổ xuống theo hướng phải sang trái thay vì trái sang phải thì có thể thêm thuộc tính right: 0.

.dropdown-content {
right: 0;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #58257b;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #58257b;
color: white;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #984eca;
}
</style>
</head>
<body>

<h2>Căn chỉnh nội dung thả xuống</h2>
<p>Định dạng nội dung thả xuống từ trái qua phải và từ phải qua trái</p>

<div class="dropdown" style="float:left;">
<button class="dropbtn">Bài trước</button>
<div class="dropdown-content" style="left:0;">
<a href="https://quantrimang.com/thuoc-tinh-float-va-clear-trong-css-162894">
Float và Clear</a>
<a href="https://quantrimang.com/combinator-trong-css-162959">
Combinator</a>
<a href="https://quantrimang.com/pseudo-class-trong-css-162986">
Pseudo-Class</a>
</div>
</div>

<div class="dropdown" style="float:right;">
<button class="dropbtn">Bài tiếp</button>
<div class="dropdown-content">
<a href="https://quantrimang.com/navigation-bar-trong-css-163063">
Navigation Bar</a>
<a href="https://quantrimang.com/opacity-trong-css-163016">Opacity</a>
<a href="https://quantrimang.com/pseudo-element-trong-css-163002">
Pseudo-Element</a>
</div>
</div>

</body>
</html>

Thêm hình ảnh và nội dung khác trong hộp thả xuống.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<h2>Ảnh dropdown</h2>
<p>Di chuột qua ảnh phía dưới để hiển thị nội dung thả xuống. (by: QTM.com)</p>

<div class="dropdown">
<img src="flower-1.jpg" alt="Beautiful Flower" width="100" height="67">
<div class="dropdown-content">
<img src="flower-1.jpg" alt="Beautiful Flower" width="350" height="234">
<div class="desc">Beautiful Flower</div>
</div>
</div>

</body>
</html>

Thêm menu thả xuống bên trong thanh điều hướng - navigation bar.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #58257b;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #ce3e6e;
color: white;
font-weight: bold;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #db7093;
color: white;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<ul>
<li><a href="https://quantrimang.com/">Trang chủ</a></li>
<li class="dropdown">
<a href="https://quantrimang.com/lang-cong-nghe" class="dropbtn">
Làng Công nghệ</a>
<div class="dropdown-content">
<a href="#">Tấn công mạng</a>
<a href="#">Chuyện Công nghệ</a>
<a href="#">Trí tuệ nhân tạo</a>
</div>
</li>
<li class="dropdown">
<a href="https://quantrimang.com/cong-nghe" class="dropbtn">Công nghệ</a>
<div class="dropdown-content">
<a href="#">Ứng dụng</a>
<a href="#">Lập trình</a>
<a href="#">Game - Trò chơi</a>
</div>
</li>
<li><a href="https://quantrimang.com/khoa-hoc">Khoa học</a></li>
</ul>

<h3>Dropdown Menu nằm bên trong Navigation Bar</h3>

</body>
</html>

Bài trước: Thanh điều hướng - Navigation Bar trong CSS

Bài tiếp: Thư viện hình ảnh trong CSS