Html thả xuống

Question

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

Nội dung chính Show

Hộp thả xuống cơ bản
Trình đơn thả xuống
Căn chỉnh nội dung thả xuống
Ảnh thả xuống
Thanh điều hướng Dropdown

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

Hộp thả xuống cơ bản

Tạo hộp thả xuống xuất hiện khi người dùng 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>

Trình đơn thả xuống

Create 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ế web, đặc biệt là các trang web 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 đúng. 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>

Ảnh thả xuống

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 - thanh điều hướng

<!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 theo. Thư viện hình ảnh trong CSS

Thứ Bảy, 27/04/2019 11. 50

4,5 ★ 8 👨 20. 871

#CSS

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

Tìm kiếm Google bằng giọng nói tiếng Việt qua Chrome
6 môi trường Máy tính để bàn Linux tốt nhất năm 2022
Cách cài đặt widget Facebook trên iPhone nhận thông báo nhanh
webOS đã được tái sinh thành… ứng dụng Android
Giá iPhone 4 của VinaPhone từ 11,6 triệu
chữa bệnh cho. Internet

CSS và CSS3

TOP code CSS xếp hạng sao (Star Rating) đẹp cho website

Xem thêm

CSS và CSS3

CSS cơ bản
- CSS giới thiệu
- Cú pháp và Selector CSS
- Vị trí đặt CSS
- CSS - Màu
- CSS - Nền
- CSS - Đường viền
- CSS - Ký quỹ
- CSS - Đệm
- CSS - Chiều rộng và Chiều cao
- CSS - Mô hình hộp
- CSS - Phác thảo
- CSS - Văn bản
- CSS - Phông chữ
- CSS - Biểu tượng
- CSS - Liên kết
- CSS - Tạo danh sách
- CSS - Bảng
- CSS - Hiển thị
- CSS - Chiều rộng tối đa
- CSS - Vị trí
- CSS - tràn
- CSS - Float và Clear
- CSS - Khối nội tuyến
- CSS - Căn chỉnh
- CSS - Trình kết hợp
- CSS - Lớp giả
- CSS - Phần tử giả
- CSS - Độ mờ
- CSS - Thanh điều hướng
- CSS - Trình đơn thả xuống
- CSS - Thư viện hình ảnh
- CSS - Sprite hình ảnh
- CSS - Bộ chọn thuộc tính
- CSS - Biểu mẫu
- CSS - Bộ đếm
- CSS - Bố cục
- CSS - Đơn vị
- CSS - Tính đặc hiệu
nâng cao CSS
- CSS - Góc bo tròn
- CSS - Hình ảnh đường viền
- CSS - Nhiều nền
- CSS - Màu
- CSS - Chuyển màu
- CSS - Hiệu ứng đổ bóng
- CSS - Hiệu ứng văn bản
- CSS - Phông chữ Web
- CSS - Chuyển đổi 2D
- CSS - Chuyển đổi 3D
- CSS - Chuyển tiếp
- CSS - Hoạt ảnh
- CSS - Chú giải công cụ
- CSS - Flexbox
- CSS - Nút
- CSS- @media
- Tạo hiệu ứng hover node bằng CSS

công nghệ
- Ứng dụng
- hệ thống
- Game - Trò chơi
- điện thoại Iphone
- Android
- Linux
- Nền web
- Đồng hồ thông minh
- Chụp ảnh - Quay phim
- hệ điều hành Mac
- Phần cứng
- SEO thủ thuật
- base format
- quả mâm xôi
- Dịch vụ ngân hàng
- Lập trình
- Online service
- Dịch vụ nhà mạng
- Nhà thông minh
Tải xuống
- Ứng dụng văn phòng
- Tải game
- Hệ thống tiện ích
- Ảnh, đồ họa
- Internet
- Bảo mật, Antivirus
- Họp, học trực tuyến
- Video, phim, nhạc
- Email
- Lưu trữ đám mây
- Giao tiếp, liên lạc, hẹn hò
- Support for learning
- Máy ảo
Tiện ích
Khoa học
- Khoa học vui
- Khám phá khoa học
- Bí ẩn - Chuyện lạ
- Chăm sóc sức khỏe
- Khoa học Vũ trụ
- Khám phá thiên nhiên
Điện máy
- tủ lạnh
- tivi
- Điều hòa
- Máy giặt
Cuộc sống
- Kỹ năng
- Món ngon mỗi ngày
- làm đẹp
- nuôi dạy con
- Chăm sóc nhà cửa
- Kinh nghiệm Du lịch
- Halloween
- mẹo vặt
- giáng sinh - noel
- tết 2023
- quà tặng
- Giải trí
- Là gì?
- nhà đẹp
- HÀNG ĐẦU
- phong thuỷ
Băng hình
- công nghệ
- Phòng thí nghiệm của Cisco
- Phòng thí nghiệm của Microsoft
- Video Khoa học
Ô tô, Xe máy
- Giấy phép lái xe
Làng công nghệ
- Tấn công mạng
- Công nghệ
- new technology
- Trí tuệ nhân tạo (AI)
- Anh tài công nghệ
- Bình luận công nghệ
- Tổng hợp
Học CNTT
- quiz technology
- Microsoft Word 2016
- Microsoft Word 2013
- Word 2007
- Excel 2019
- Excel 2016
- Hàm excel
- Microsoft PowerPoint 2019
- Microsoft PowerPoint 2016
- Google Trang tính - Trang tính
- photoshop CS6
- photoshop CS5
- HTML
- CSS và CSS3
- con trăn
- Học SQL
- Lập trình C
- Lập trình C++
- Lập trình C#
- Học HTTP
- Bootstrap
- Máy chủ SQL
- JavaScript
- Học PHP
- jQuery
- Học MongoDB
- Unix/Linux
- Học Git
- NodeJS

Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm

programming html